CSS: Work fine with firefox, chrome, BUT IE out of alignment

boon86
boon86 used Ask the Experts™
on
i got following code work fine with firefox and chrome, but not work with IE7,8,9
alignment out of its position:

index.html
<html>
<head>
<style>
* /* "Universal rule". Set's border, padding and margin to 0 for all CSS values*/
{
padding: 0;
margin: 0;
border: 0;
}
#mynoobmenu
{
  width:250px;
}
.Menu {
background:transparent url(images/bgOFF1.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #B30000;
height:23px;
font-size:11px;font-weight:bold;
text-align: left; /* We are using text-align: left on ul to left align our menu to the page. If you want the menu aligned centered or right just change text-align to either center or right */
margin: 5px 0 5px 10px;
padding: 10px 0 3px 0;
}
.Menu li {
margin: 0 2px 0 0;
border-bottom: none;
display: inline; /* Menu links are horizontally aligned using display: inline */
}
.Menu li a {
margin: 0 -2px 0 0;
padding: 3px 12px 3px 12px; /* Display: block won't work in this example, instead we are using padding */
color:#666;text-decoration:none;
height:23px;
background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;
text-decoration: none;
}
.Menu li a:hover {
color:#B30000;background:#fff url(images/bgON1.gif) no-repeat top right;
}
.Menu li#active {
margin: 0 3px 0 0;
padding: 3px 6px 3px 8px; /* Display: block won't work in this example, instead we are using padding */
color:#B30000;
background:#fff url(images/bgON1.gif) no-repeat top right;
}
.Menu li a:hover {
color:#B30000;
background:#fff url(images/bgON1.gif) no-repeat top right;
}
.Menu .subMenu {
float: left;
text-align: left; /* If both menus are going to be left-aligned we really don't need to use text-align: left on the sub menu, since this menu will inherit the alignment from .Menu */
width: 100%;
margin: 15px 0 5px 0;
padding: 3px 0 3px 0;

}
* html .Menu .subMenu {

margin: 2px 0 5px 0; /* IE hack */
}
.Menu .subMenu li {

padding: 3px 0 3px 0;
border: 0;
}
.Menu .subMenu li a {

border: 0;
}
.Menu .subMenu li a:hover {

}
.Menu .subMenu li#subActive {

padding: 0px 6px 3px 8px;
font-weight: bold;
color:#B30000;
border-bottom: #d4de7c;

border-style:solid;
}
</style>

</head>
<body>
<div id="mynoobmenu">
<ul class="Menu">
<li><a href="#">Maklumat Profile</a></li>
<li id="active">Senarai Kes
<ul class="subMenu">
<li id="subActive">Laporan Sosial</li>
<li><a href="#">Fail/Surat Lampiran</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Open in new window

images.zip

any idea to fix?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
First you should declare a DOCTYPE so that all browsers know how to treat your code.  Then, if you're wanting to make menus from lists and bullet points, start with the SuckerFish code - as it works really well with all browsers, then modify to suit your requirements.
Remove from.Menu li a the height:23px rule.

Author

Commented:
thanks

HagayMandel:
Remove from.Menu li a the height:23px rule.

Open in new window


but border buttom submenu is gone in IE

Author

Commented:
how to fix the border-bottom with IE? it just dont showing, unless i put: display:inline-block;
but that screw up the whole thing..
The border isn't showing regardless of the height rule.
I' look at it later.
Thanks for the points.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial