Float causes hover not to work in Internet Explorer

08 Jun 2006, 20:51

#1

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Float causes hover not to work in Internet Explorer

Hi, I am needing some help to diagnose whether this is a IE specific known bug, and/or if there is a known fix.

Problem 1 I have made a menu dynamically driven from the modules/categories_tabs.php file, and it will display the icons and the 'hover' hyperlink text underneath. It works perfectly well in FireFox, but IE will not allow the hover to happen (neither will opera actually).

I am applying an ID to the images DIV container as they are created, this way I should be able to control the layout of the icons via the stylesheet. The DIV ID (text_under) looks like this

#text_under {
float: left;
text-align: center;
}

I know the problem is related to how I have 'floated' the icons onto the page, because if I remove the 'float' style above the hovers work, but of course my icons now appear in a vertical list, whereas I need a horizontal one as seen here http://www.schneider-cabinets.co.uk

Problem 2 You will notice the first icon in the row is 'raised' higher than the other icons, if you drag your mouse across them in FF you will see there is something (perhaps padding) interferring with the alignment, obviously I need to be able to align the icons perfectly. Any suggestions?

Problem 3 If you go to any of my secure pages, the images I have used are not working, I think I may know why this is though, I think we declare a 'secure images' folder somewhere in one of the configs? I know I am using a seperate folder for these images, so I can change that if that is the case, thanks for any help.

08 Jun 2006, 21:44

#2

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

Hi Paul

A few things leap out at me.

Firstly, I believe that this attempt to define an onload function is syntactically flawed> <body id="indexBody" onload="window.onload=function(){

Nifty("ul#nav a","small transparent top"); } ;">I believe that because the Firefox validator doesn't seem to want to match the quotes that I have coluored, and then throws 5 warnings about this this body tag, which different browsers may well interpet differently. However, this is not an area in which I'm expert, so hopefully somebody else will be able to advise better on what would be correct syntax.

Secondly, you have declared a div with ID of text_under in each category link. However, an ID can only occur once on each page, otherwise you may again get unpredicatable results from browser to browser. I'd recommend changing these to a class of text_under. They'll work in a very similar way, but multiple instances of classes are allowed and expected.

Thirdly tag pairs must be nested. However, you appear to open two divs, and close none inside your category links. I suspect that the second is intended to close the first, not open a second. Once again different browsers may react differently and unpredictably to this error.

I recommend clearing out these three issues and then seeing what your page looks like.

Good luck

08 Jun 2006, 22:48

#3

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

Hi Kuroi, you sure know your styles! OK firstly the javascript shouldn't have been there, it was another method I was trying, but decided to go with my current option forgetting to remove the script. I have done so now.

Yes you are exactly correct, I should have used a SPAN, and now I have it seems to have cured the hover issue in IE. It has brought up a different error now, in that the text is above the image, but at least its the same in both browsers, so I would like to fix that.

The first image still appearst to be higher on the horizontal plane than the others, not sure about that. In fact if you were to click on the sign in menu in IE you see what is happening here, as my images are not displayed but their place holders are, and as a result one can see what is happening, not sure yet of the solution but it seems I have some consistancy in error now.

I don't fully understand your third suggestion, sorry. If possible could you expand further, thanks.

Thanks again.

kuroi:

Hi Paul

A few things leap out at me.

Firstly, I believe that this attempt to define an onload function is syntactically flawedI believe that because the Firefox validator doesn't seem to want to match the quotes that I have coluored, and then throws 5 warnings about this this body tag, which different browsers may well interpet differently. However, this is not an area in which I'm expert, so hopefully somebody else will be able to advise better on what would be correct syntax.

Secondly, you have declared a div with ID of text_under in each category link. However, an ID can only occur once on each page, otherwise you may again get unpredicatable results from browser to browser. I'd recommend changing these to a class of text_under. They'll work in a very similar way, but multiple instances of classes are allowed and expected.

Thirdly tag pairs must be nested. However, you appear to open two divs, and close none inside your category links. I suspect that the second is intended to close the first, not open a second. Once again different browsers may react differently and unpredictably to this error.

I recommend clearing out these three issues and then seeing what your page looks like.

Good luck

09 Jun 2006, 00:31

#4

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

Firstly an answer to your questions> Pauls:

I don't fully understand your third suggestion, If possible could you expand further, thanks. You were generating HTML that read something like> <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=1"><div id="text_underneath"><img class="text_underneath" src="../includes/templates/schneiderstyle/images/Flexline.gif" />Flexline<div></a> </li>As well as pointing out that this was leading to the ID text_underneath being used several times on the same page (not allowed), i was coming to the conclusion that the opening <div> highlighted in red above should have been a closing </div>.

You may not like this but if I were doing what your attempting to do, I'd just simplify the whole thing dramatically. In particular, since the names of each category are built into the graphics, I'd drop the text altogether and then strip my php back so that it produces the following XHTML>

<div id="navCatTabsWrapper"> <div id="navCatTabs"> <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=1"><img src="Schneider_files/Flexline.gif" /></a> <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=2"><img src="Schneider_files/Graceline.gif" /></a> <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=3"><img src="Schneider_files/Peakline.gif" /></a> <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=4"><img src="Schneider_files/Prideline.gif" /></a><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=9"><img src="Schneider_files/Proline.gif" /></a> <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=5"><img src="Schneider_files/Quadraline.gif" /></a><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=6"><img src="Schneider_files/Ronline.gif" /></a> <a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=7"><img src="Schneider_files/Splashline.gif" /></a> </div> </div> Then I would need only this CSS to style it> #navCatTabs a { float:left; width:92px; }
#navCatTabs img { border:none; }Whatever you do, you will need to do some work on the images themselves as even with perfect alignment the inconsistenies in size and borders mean that your layout would look odd. For example QUADRALINE is the widest, but also has extra white space built into the lefthand side of the image, so whatever you do it will end up pushed off to the right. Similarly, in its current form, GRACELINE will always end up being pushed down the page. Personally I'd make all the images the same size and then centre the actual content in the middle of the image. Then with all images having the same dimensions, aligning them gets a lot easier.

Although your first image was appearing higher than the rest, in fact it was that the others were lower than the first image. OK that sounds like a daft thing to say, but it is more correct as the difference was due to the first images being floated freely to the left, while subsequent images had to clear the <li> tage for the previous category, which pushed them down by the depth of this tag.

09 Jun 2006, 13:53

#5

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

Hi thanks for taking the time to reply,

kuroi:

Firstly an answer to your questions You were generating HTML that read something likeAs well as pointing out that this was leading to the ID text_underneath being used several times on the same page (not allowed), i was coming to the conclusion that the opening <div> highlighted in red above should have been a closing </div>.

I understand this part now, thanks for clarifying.

kuroi:

You may not like this but if I were doing what your attempting to do, I'd just simplify the whole thing dramatically. In particular, since the names of each category are built into the graphics, I'd drop the text altogether and then strip my php back so that it produces the following XHTMLThen I would need only this CSS to style itWhatever you do, you will need to do some work on the images themselves as even with perfect alignment the inconsistenies in size and borders mean that your layout would look odd. For example QUADRALINE is the widest, but also has extra white space built into the lefthand side of the image, so whatever you do it will end up pushed off to the right. Similarly, in its current form, GRACELINE will always end up being pushed down the page. Personally I'd make all the images the same size and then centre the actual content in the middle of the image. Then with all images having the same dimensions, aligning them gets a lot easier.

Correct, I wouldn't like it :) I had considered removing the text but felt it offered a better look, and a more menu type look to the navigation system. Regarding the images, I had no intention of leaving them in that state, they were quickly hacked in PS so that I could make haste on the functionality of the menu system - I didn't want to spend a lot of time on the gfx and then find I couldn't do what I was trying to do. However as you point out below this has nothing to do with the odd layout of the images.

kuroi:

Although your first image was appearing higher than the rest, in fact it was that the others were lower than the first image. OK that sounds like a daft thing to say, but it is more correct as the difference was due to the first images being floated freely to the left, while subsequent images had to clear the <li> tage for the previous category, which pushed them down by the depth of this tag.

I will find a solution for clearing the <li> tags for all the images as a matter of urgency :)

One last note, I am actually considering scrapping this whole idea and instead simply building a style sheet rollover menu instead, however I do still like the idea of this menu being generated based on the categories added (and an appropriate image being created) though. For the addition of only one line of code to the PHP files concerned I thought it might be an elegant way of having a menu under the main header image that maybe other people could have used also, once I had it polished and working fully. For now I am still working on it, but that might change :)

Once again, thanks for your input.

09 Jun 2006, 14:51

#6

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

Pauls:

I am actually considering scrapping this whole ideaIt would be a shame to scrap this attractive layout because the CSS gets tough, so here's a simplified but fully working example of exactly what you are trying to do to act as an example for the CSS you need.

09 Jun 2006, 17:21

#7

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

OK creating the list inline using a style sheet isn't really the problem, but thanks for creating the list.

The problem appears to lie within the php line that creates this row dynamically, that is one can add style, but potentially only a single class for example.

However this generated code is also affected by a style 'category-top' by this variable ``` $new_style = 'category-top';


OK I am going to paste the PHP to show you what I have done within the page **includes/modules/MYTEMPLATE/categories_tabs.php** ... I believe this is where the problem actually is.  The difficulties I am having are perhaps the reason this is not included with ZC as an option, and this is also why I am considering dropping this because there may be no realistic way it can be done where I am trying to do it.  I will paste the code so you and others can see what I am trying to do.

$category_image = '<img class="text_under" src="../includes/templates/schneiderstyle/images/' . $categories_tab->fields['categories_name'] . '.gif" />'; $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' .(int)$categories_tab->fields['categories_id']) . '">' . $category_image . $categories_tab_current . '</a> '; $categories_tab->MoveNext();

09 Jun 2006, 19:09

#8

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

Pauls:

OK creating the list inline using a style sheet isn't really the problem, but thanks for creating the list.Actually, I think that this is 50% of the problem. You're trying to achieve this with inline <li>s, but they need to be floated blocks.

Pauls:

The problem appears to lie within the php line that creates this row dynamically, that is one can add style, but potentially only a single class.You can add as many classes as you like, just leave a space between each e.g.> $new_style = 'category-top back';will result in an element with the classes category-top and back (which is a handy little class buried in the stylesheet that floats blocks left. However, the number of classes is a complete red herring. In the example that I produced I didn't use any classes at all, instead applying all the styling to tags. In practise you would need to preceed each tag with #navCatTabs to localise its effects, but you don't need any new classes, or even the ones you are already generating.

Pauls:

This generated code is also affected by a style 'category-top' by this variable ``` $new_style = 'category-top';


> **Pauls:**
>
> OK I am going to paste the PHP to show you what I have done within the page **includes/modules/MYTEMPLATE/categories_tabs.php** ... I believe this is where the problem actually is.  The difficulties I am having are perhaps the reason this is not included with ZC as an option, and this is also why I am considering dropping this because there may be no realistic way it can be done where I am trying to do it.  I will paste the code so you and others can see what I am trying to do.```
$category_image = '<img class="text_under" src="../includes/templates/schneiderstyle/images/' . $categories_tab->fields['categories_name'] . '.gif" />'; 
$links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' .(int)$categories_tab->fields['categories_id']) . '">' . $category_image . $categories_tab_current . '</a> ';
$categories_tab->MoveNext();
```Your code seems to me to be pretty well there needing only a <br /> as shown below to force the text underneath the image (the other 50% of the solution), and this is only for IE's benefit. FF would do it anyway if you give the <li> block an appropriate width.> $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' .(int)$categories_tab->fields['categories_id']) . '">' . $category_image . '<br />' . $categories_tab_current . '</a> ';
> $categories_tab->MoveNext()My final observation would be that it is better avoid hardcoding path names, so your establishment of the image tag would be better done using the zen_image function as follows.> $category_name = $categories_tab->fields['categories_name'];
> $category_image = zen_image($template->get_template_dir($category_name . '.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $category_name . '.gif', $category_name);This function checks your current template and builds the path to it. It also includes the important alt text.

09 Jun 2006, 21:12

#9

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

Well, what a great knowledge you have Kuroi, thank you so much for your time and help, it works perfectly now. Your knowledge of the built in zen cart function to be used instead of hard coding the images path also cured the 'secure' page problem I mentioned earlier, because of course the images are now found in the declared path in the config file, brilliant!

I am now going to attempt to make the following changes

Move the images closer to the main logo and slightly away from the breadcrumb menu
Using the style, create a rollover state for the menu buttons without the use of javascript
Possibly remove the text under the image - now the ALT tag is there this might be better?

I don't know whether other people would want this when finished what do you think?

Thanks for keeping me focused, and determined :thumbsup:

http://www.schneider-cabinets.co.uk/

09 Jun 2006, 23:25

#10

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

I'm glad you stuck with it, and give yourself credit, you found the right places to make your chanegs and got pretty close to a solution, even without my help.

I'm pleased about the 'secure' page problem resolving itself. I have to confess that I hadn't even noticed your description of that problem, as it occurred before my "fix these three things and then let's look again" comment. So I guess we have to chalk this one up to the good karma that comes from doing things properly.

Would other people be interested? Well I stuck with this and hassled you a bit to keep going because I liked what you were trying to do, namely break out of the normal centre column plus boxes either side layout that typifies more Zen Carts than it should, so I guess other people may be interested. Not sure quite how you deliver it to them though, other than to finish your design at the same standard as you have started it, and then invite comments in the review section of the forum.

Keep up the good work.

15 Jun 2006, 21:54

#11

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

Hello again Kuroi, well I am about to give this another shot, that is to make the rollovers happen on the buttons, I am struggling to propose a solution in my head to this right now, perhaps you can help?

First up then here is the list generated by the PHP file

<!--bof-optional categories tabs navigation display--> <div id="navCatTabsWrapper"> <div id="navCatTabs"> <ul>
  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=1"><img src="includes/templates/schneiderstyle/images/Flexline.gif" alt="Flexline" title=" Flexline " height="50" width="82"><br></a> </li>
  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=2"><img src="includes/templates/schneiderstyle/images/Graceline.gif" alt="Graceline" title=" Graceline " height="50" width="82"><br></a> </li>

  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=3"><img src="includes/templates/schneiderstyle/images/Peakline.gif" alt="Peakline" title=" Peakline " height="50" width="82"><br></a> </li>
  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=4"><img src="includes/templates/schneiderstyle/images/Prideline.gif" alt="Prideline" title=" Prideline " height="50" width="82"><br></a> </li>
  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=9"><img src="includes/templates/schneiderstyle/images/Proline.gif" alt="Proline" title=" Proline " height="50" width="82"><br></a> </li>
  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=5"><img src="includes/templates/schneiderstyle/images/Quadraline.gif" alt="Quadraline" title=" Quadraline " height="50" width="82"><br></a> </li>
  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=6"><img src="includes/templates/schneiderstyle/images/Ronline.gif" alt="Ronline" title=" Ronline " height="50" width="82"><br></a> </li>
  <li class="categoryIcon"><a class="category-top" href="http://www.schneider-cabinets.co.uk/index.php?main_page=index&cPath=7"><img src="includes/templates/schneiderstyle/images/Splashline.gif" alt="Splashline" title=" Splashline " height="50" width="82"><br></a> </li>

</ul>
</div>
</div>
<!--eof-optional categories tabs navigation display-->

Fairly straightforward list, now the 'over' state of the icons I want to use are named Splashline_over.gif, Ronline_over.gif etc, the problem is I think I need to create a 'style' that could be added to each of the above li's or <a> tags, that style should do the rollover (mouseover) and change the image for the 'over' one and back again.

The problem as I see it is creating a single style will only work with one image, therefore there would have to be a style per li. However this does not appear possible to do because the code above is generated dynamically per page via PHP. If this was one page hard coded by hand then a style per icon might be possible.

Do you see an obvious solution to this?

http://www.schneider-cabinets.co.uk/

15 Jun 2006, 23:39

#12

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

Yes. It's not difficult, but not straightforward either.

The fact that the links are dynamically generated is no obstacle at all. You already point each to a different image after all.

You immediate question revolves around whether to do this with javascript or CSS. At the moment your images are in forground and therefore not available for switching by CSS. You could however, use javascript to swap them based on a mouseover state. This is simply what people used to do before CSS offered an alternative.

If you want to use CSS you would have to make the links blocks with defined size and height and change the images to be their backgrounds. As you rightly said you would need to add another class (or more appropriately an ID as each would be unique) to each link. You can then change the image by having one background image for the link and visited states and another for the hover state.

16 Jun 2006, 13:58

#13

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

Ok thanks for the clarity of thinking. I had already considered that JavaScript would perhaps be the easier option here, and I may well go that route.

Initially though, I was considering trying to make this all style sheet based, so I will give some thought to your suggested method, and consider which option to use, either Javaspcript or CSS - I will investigate both methods and see which offers me the best result. I will let you know how I get on (or otherwise!), thanks.

16 Jun 2006, 16:47

#14

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

OK I kinda have a working version ... it's very nearly there. I am able to rollover the images using stylesheet methods only.

However, you will notice that I had to revert back to hardcoding the image source (blank.gif) within the PHP file includes/mystyle/categories_tabs.php like so ``` $category_image = '<img src="../images/blank.gif">';


The rollover works great in FF, but in IE the rollover is not so elegant ... perhaps a different approach to the style rollover might help? I think using the blank image to assist the rollover might not be the best ... 

[Click](http://www.schneider-cabinets.co.uk)

16 Jun 2006, 17:16

#15

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

The following code would give you your blank.gif whilst retaining different alt text for each link.> $category_name = $categories_tab->fields['categories_name'];

$category_image = zen_image($template->get_template_dir('blank.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'blank.gif', $category_name);Am I right in thinkning that you blank.gif is a transaprent gif inserted just to give you something to which you can attach yoiur alt text?

The problem with IE - is that the flicker when you first pass over the image? If so, this is most likely because until that point IE hasn't needed the rollover image and so hasn't pulled it down from your web host, hence the slight delay manifested as a flicker. There is an advanced CSS technique that would get around this. You can see it in action here and there's a link to a tutorial.

16 Jun 2006, 19:00

#16

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

Taking a look at that tutorial now, thanks for the link.

Am I right in thinkning that you blank.gif is a transaprent gif inserted just to give you something to which you can attach yoiur alt text?

Yes but not only the ALT text, this also holds the ANCHOR tag and thus of course the hyperlink. The other 2 images are used to change backgrounds based on the mouse movement. Becaue the blank.gif is transparent, then the first image shows through until the hover pseudo code happens, then the other image is swapped giving the rollover impression.

Right off to check that link see if I can fix the 'flicker'

PS The PHP code worked flawlessly, thanks very much!

Oh looking at that link suggests that I need to set the li background to an image .... I will need to do that via the PHP script I think ... will go see.

16 Jun 2006, 19:11

#17

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

Pauls:

Yes but not only the ALT text, [the image] also holds the ANCHOR tag and thus of course the hyperlink.Actually its the other way around. The anchor contains the link and the image. I suspect that you're using the image to give the anchor its physical dimensions, but this could be equally, if not better done, by sticking an in there and using CSS width and height.

That still wouldn't get around the question of how to cope when the visitor's browser doesn't support images however. I feel that there must be a way, but none is leaping out at me. This is going to bug me!

16 Jun 2006, 20:59

#18

pauls

Zen Follower

Join Date:: Feb 2006
Location:: UK
Posts:: 300
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

Yes you are correct.

OK have spent the last hour or two trying various methods of fixing this stupid IE bug, but I don't appear to be moving in the right direction, brick wall springs to mind!

The solution offered via the link you supplied is to add the following to each li

#menu li.list1 {background:transparent url(../images/gainsborough_s.jpg);}

I cannot see a way to do this as my li are generated via php like this

$links_list[] = '<a id="' . $category_name . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' .(int)$categories_tab->fields['categories_id']) . '">' . $category_image . '<br />' .'</a> ';

I had a look at preloading the images too, this involves placing the images used inside div tags and setting the visibility to none, then placing each div in each of your html pages, again I couldn't see a way to place these tags into the HTML .... here is a link that I was looking at. Click

16 Jun 2006, 20:59

#19

ben_golant

New Zenner

Join Date:: May 2006
Posts:: 38
Plugin Contributions:: 0

Re: Float causes hover not to work in Internet Explorer

And from the sticky:

The so-called Peekaboo Bug is well known in CSS circles and this minor edit to your stylesheet solves it:

h1, h2, h3, h4, h5, h6, p { position: relative; }

There are other tweaks as well but this solved my issue.

For those that want to see it in action and read more:

http://www.evolt.org/article/MSIE6_b...cers/17/23899/

16 Jun 2006, 21:34

#20

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 9

Re: Float causes hover not to work in Internet Explorer

Your enthusiasm is appreciated, but Paul's initial problem (long since ressolved) bore no resemblance to the IE Peekaboo bug (for which the normal reference is http://http://www.positioniseverything.net/explorer/peekaboo.html or to the IE float bug for which you have provided a reference. All help is appreciated, but reading the threads first helps to avoid making confusing posts.