Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Internet Explorer css menu fix

Posted by: sapote Mar 15 2011, 01:37 AM

Hi, this is my website: http://revistahala.com/
In chrome, firefox and safari, the menubar works fine, but in IE the menubar is all messed up.
Anyone knows how to fix it?

CODE

.menu nav li{float:left}
.clearfix{display:inline;}

.mainmenu{background:url(.../img/sprite-common-repeat-x.gif) repeat-x scroll 0 4px;height:43px}
.mainmenu li{background:url(.../img/main-menu-separator.gif) no-repeat scroll 0 11px;margin:4px 0 30px;padding:13px 13px 14px 14px;position:relative;z-index:1}
.mainmenu li:first-child{background:none;padding-left:14px}
.mainmenu li.selected{background:url(.../img/sprite-common-repeat-x.gif) repeat-x scroll 0 -39px;margin-top:0;padding-bottom:13px;padding-top:16px}
.mainmenu a{background:url(.../img/mosaico.png);display:block;height:15px;overflow:hidden;text-indent:-9999px}
.mainmenu .selected a{height:16px}

Thanks in advance.

Posted by: Frederiek Mar 15 2011, 02:56 AM

I don't have IE, but you are using some HTML5 elements, such as <header> and <nav>, that IE doesn't understand.
You'll need some script to enable HTML5 elements in IE. Search for "html5 in ie" or "html5 in ie without javascript".

Posted by: sapote Mar 15 2011, 03:28 AM

QUOTE(Frederiek @ Mar 15 2011, 02:56 AM)

Indeed. That was it. Thank you very much. Just fixed it placing the 'float:left' into .mainmenu li
for IE to understand it.

Posted by: Frederiek Mar 15 2011, 12:03 PM

Be sure to use the HTML5 DOCTYPE too, then.

Posted by: sapote Mar 22 2011, 12:26 PM

CODE

.submenu {background:#dedede;left:auto;padding:10px 0 8px;position:absolute;width:960px;}
.submenu a{color:#0A3B53;font:1.4em Arial, "Helvetica Neue",Helvetica, Verdana, sans-serif}
.submenu a{border-left:1px solid #aaa;padding:0 15px}
.submenu li{display:inline;overflow:hidden;}
.submenu li:first-child a{border:0;}

Hi there, I need some help again. This is the submenu code for this website: http://buddhasamigo.com/
It works fine in ff, safari and chrome, but as usual, there's a problem with ie7. The content gets below the submenu, any idea how to fix this?