Float causes hover not to work in Internet Explorer

**Pauls** · 8 Jun 2006, 09:51 PM

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

Code:

#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.

**kuroi** · 8 Jun 2006, 10:44 PM

Hi Paul

A few things leap out at me.

Firstly, I believe that this attempt to define an onload function is syntactically flawed

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

**Pauls** · 8 Jun 2006, 11:48 PM

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.

Originally Posted by 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

**kuroi** · 9 Jun 2006, 01:31 AM

Firstly an answer to your questions

Originally Posted by 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.

**Pauls** · 9 Jun 2006, 02:53 PM

Hi thanks for taking the time to reply,

Originally Posted by 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.

Originally Posted by 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.

Originally Posted by 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.

**kuroi** · 9 Jun 2006, 03:51 PM

Originally Posted by Pauls

I am actually considering scrapping this whole idea

It 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.

**ben_golant** · 16 Jun 2006, 09:59 PM

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** · 16 Jun 2006, 10:34 PM

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.

**Pauls** · 17 Jun 2006, 10:47 AM

OK I have spent much too long trying to work a fix to this, interestingly
http://www.webreference.com/programm...mple_eight.htm
still doesn't work correctly in IE, there is still quite a lag before the images are drawn, it does work better, but its still not accurate. As stated previously I would need to have the list ID (or class) created for each list item with the transparent background settings as suggested in that tutorial, and a unique ID name for each 'a' tag too (that is done already though). However looking at the URL above with the appropriate settings in IE, even though better, it would still have a delayed rollover.

So, as it is, I think we have a pretty good rollover menu that works flawlessly even in IE as long as the temporary internet settings are not set to refresh every visit to the page, as a result I think I need to move on now and finish the rest of the site.

Kuroi, thank you once again for your help in this, it is fair to say that without it I would have given up with frustration days ago.

**kuroi** · 17 Jun 2006, 11:16 AM

You're welcome. It's been interesting.

Thread: Float causes hover not to work in Internet Explorer

Thread Tools

Search Thread

Display

Hybrid View

Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Re: Float causes hover not to work in Internet Explorer

Similar Threads

My web only work with IE(Internet explorer)

Why don't the product links work in Internet Explorer?

Header Image is not Showing in Internet Explorer but work great with Slim Browser

cart doesn't work in internet explorer

Posting Permissions