troubleshooting Question

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

Avatar of boon86
boon86Flag for Malaysia asked on
Web Languages and StandardsCSSHTML
6 Comments1 Solution561 ViewsLast Modified:
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>
images.zip

any idea to fix?
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 6 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros