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.

**Pauls** · 9 Jun 2006, 06:21 PM

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

Code:

$new_style = 'category-top';

... I am not sure what that does actually, but it appears to affect the 'text' part of the <li>, whereas my class 'text_under' only affects the image within the <li> and not the text.

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.

Code:

$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();

**kuroi** · 9 Jun 2006, 08:09 PM

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

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

Originally Posted by Pauls

This generated code is also affected by a style 'category-top' by this variable

Code:

$new_style = 'category-top';

... I am not sure what that does actually, but it appears to affect the 'text' part of the <li>, whereas my class 'text_under' only affects the image within the <li> and not the text.

It doesn't do much at all, just add a border that is then overridden anyway. Another red herring.

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

Code:

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

**Pauls** · 9 Jun 2006, 10:12 PM

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

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

**kuroi** · 10 Jun 2006, 12:25 AM

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.

Thread: Float causes hover not to work in Internet Explorer

Thread Tools

Search Thread

Display

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