Hello,
I have a homepage with the following code:
...
<body>
<center>
<div id="header">
<div id="headerimg"></div>
<div id="menu_top"></div>
<div id="menu_top_img"></div>
...
and a css file with the classes as following:
#header {
background-color: #FFFFFF;
width: 860px;
border: 0px #ffffff solid;
overflow: hidden;
}
#headerimg {
background: url(images/xx.jpg)
no-repeat;
z-index: 1;
height: 120px;
width: 800px;
position: relative;
}
#menu_top {
z-index: 1;
position: relative;
}
#menu_top_img {
background: url(#*$!.jpg)
no-repeat;
z-index: 3;
width: 800px;
height: 100px;
margin-left: 0px;
margin-top: 42px;
position: absolute;
}
the problem is the difeference between viewing the website in IE or firefox.
the image in the class menu_top_img is always messed up by 30px, I think its because of the element flow in both browsers, once the image is centered in IE and too far on the left in FF, with margin-left: 0px;
If i change the margin-left to 30px the image in FF is just fine and the image in IE is 30px too far on the right.
Would be really thankful for any help, Alex
