🔒 Locked

[web] When IE7 is messing up something... CSS problem

Started by Emmanuel Deloget Mar 28, 2009 at 3:12 PM 6 replies 2.1k views

Original Post

Mar 28, 2009 at 3:12 PM

Hello everybody. Here is a testing webpage enclosed in a zip (with all the needed files). The web page has a correct behavior under Firefox 3, Safari and Google Chrome, but two major problem arise when using IE7: * the Applications popup menu (at the bottom) doesn't open correctly. It should open on the "Applications" menu item. Edit 2: problem solved with the help of Kippesoep. * "menu 2" (at the top) is a drop down menu. Under FF3 and the other browsers, it is displayed correctly and behave as intended. Under IE7, some strange spaces are added between each option, and of course the menu doesn't work as intended. Edit 1 : This problem is now fixed, thanks to WanMaster. Both problems can be traced back to the CSS code in the enclosed index.html, but my knowledge of CSS is a bit limited. So, can someone help me to overcome one or both problems ? Thanks for your help ! [Edited by - Emmanuel Deloget on March 29, 2009 11:31:20 AM]

Sik_the_hedgehog

Mar 28, 2009 at 3:54 PM

Um, didn't check the source carefully so I can't give out much help yet, but I noticed you didn't mention testing it in Opera so I did... and yes, it shows fine there too. When opening in Explorer it of course looks bad.

Looks like you've hit one of those spots where Explorer breaks the standard or something >_> [/obvious]

BTW, I noticed that footer_menu_list specifies the bottom coordinate, but no left or right coordinate (or I skipped something >_>). I wonder if that's why it appears misaligned in Explorer.

Wan

Mar 28, 2009 at 4:14 PM

The issue with the menu can probably be fixed by using "float: left" instead of "float: none" for the list items (li, li:hover). You'll have to check in the other browsers for compatibility again though.

I can't immediately spot the problem with the application menu. I haven't got the time for it now, but perhaps I'll take a look at it tomorrow if you haven't already solved it by then.

megamoscha

Mar 28, 2009 at 5:07 PM

Don't have Internet Explorer 7 here but it looks fine with version 8.

Emmanuel Deloget

Mar 28, 2009 at 6:12 PM

Quote:
Original post by WanMaster
The issue with the menu can probably be fixed by using "float: left" instead of "float: none" for the list items (li, li:hover). You'll have to check in the other browsers for compatibility again though.

That did the trick! Thanks for your time!

Quote:
I can't immediately spot the problem with the application menu. I haven't got the time for it now, but perhaps I'll take a look at it tomorrow if you haven't already solved it by then.

Take your time. It's a private project, so I can afford to wait. Anyway, thanks a lot for your time (I already said that, didn't I?).

Kippesoep

Mar 28, 2009 at 9:13 PM

Quote:
the Applications popup menu (at the bottom) doesn't open correctly. It should open on the "Applications" menu item.

Set #footer to position:relative, add left:0 to #footer_menu_list.

To clarify...

position:relative starts a new stacking context. Without an offset specified for it, it remains in place. This stacking context wraps tightly around the div.

left:0 places the menu at the far left pixel of the current stacking context (which was defined by the rule above). This left-aligns it to the footer.

Edit: added explanation for what it actually does.

[Edited by - Kippesoep on March 28, 2009 9:13:19 PM]

Emmanuel Deloget

Mar 29, 2009 at 3:03 AM

Quote:
Original post by Kippesoep
Quote:
the Applications popup menu (at the bottom) doesn't open correctly. It should open on the "Applications" menu item.

Set #footer to position:relative, add left:0 to #footer_menu_list.

To clarify...

position:relative starts a new stacking context. Without an offset specified for it, it remains in place. This stacking context wraps tightly around the div.

left:0 places the menu at the far left pixel of the current stacking context (which was defined by the rule above). This left-aligns it to the footer.

Edit: added explanation for what it actually does.

Thanks for the explaination - now, the menu is aligned. It's still bad looking (icons and links are not aligned) but that's definitely an improvement. Rating++ for you guy!

Emmanuel Deloget

Mar 29, 2009 at 11:34 AM

Quote:
Original post by Emmanuel Deloget
Thanks for the explaination - now, the menu is aligned. It's still bad looking (icons and links are not aligned) but that's definitely an improvement. Rating++ for you guy!

I answer myself because I solved the last issue myself. This was in the html code rather than the CSS code - menu options were organized this way: <li><a href...>txt</a></li>. I changed that to <li><a href...>txt</a></li> (in fact, including the img in the link) and worked a bit with the CSS and now everything shows up correctly in all navigators.

Thanks to everyone who answered - you saved my day!

(edit - markup language corrected)

[Edited by - Emmanuel Deloget on March 29, 2009 12:34:45 PM]

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.