Float causes hover not to work in Internet Explorer

[Pauls]

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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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/

[kuroi]

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.

[Pauls]

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.

[Pauls]

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">';

this was because the fantastic zen function you pointed me to originally was pulling in different images and not a single image, and my PHP skills are being shown up here!. Because I only need to draw the one image for the CSS I figure this would be an acceptible approach. The only problem with this is I now have lost the alternative text from behind the image.

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

[kuroi]

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.

[Pauls]

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.

[kuroi]

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 &nbsp; 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!

[Pauls]

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

[ben_golant]

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/

[kuroi]

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.