Avatar of boon86
boon86
Flag for Malaysia asked on

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

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?
CSSHTMLWeb Languages and Standards

Avatar of undefined
Last Comment
Hagay Mandel

8/22/2022 - Mon
Rouchie

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

ASKER CERTIFIED SOLUTION
Hagay Mandel

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
boon86

ASKER
thanks

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

Open in new window


but border buttom submenu is gone in IE
Your help has saved me hundreds of hours of internet surfing.
fblack61
boon86

ASKER
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..
Hagay Mandel

The border isn't showing regardless of the height rule.
I' look at it later.
Thanks for the points.