IE Firefox CSS - Menu div is moving to the left

[damipera]

hi guys,

i've got a menu bar and css code below.

<div id="masthead">
<div id="globalNav">
<div id="globalLink"> <a href="tedaf.aspx" id="gl1" class="glink">Home</a> | <a href="1.aspx" id="gl2" class="glink"> Link1 </a> | <a href="sff.aspx" id="gl3" class="glink"> Link2 </a> | <a href="5te.aspx" id="gl4" class="glink"> Link3 </a> | <a href="sdes.aspx" id="gl5" class="glink"> Link4 </a> | <a href="rrrr.aspx" id="gl6" class="glink"> Link5 </a> | <a href="ttttt.asp" id="gl7" class="glink">Link6</a> </div>
</div>
</div>


#masthead{
position: absolute;
left: 32%;
margin-left: -250px;
}

but the menu bar above is moving to the left when the browser is resized but looks ok and in proper place when the browser is maximized. i use the css above.


now i modify the css to this:
#masthead{
position: absolute;
top: 0px;
margin-left: 60px;
}

when viewed in IE and forefox, the menu is not moving anymore but when viewed in forefox the position is not in proper place. in IE it looks ok.

any ideas guys?

thnx

 

[Vragabond]

With absolute positioning and defining positions via left/right/top/bottom you will always have issues like that. Simply stick to natural document flow and use floats for elements that need to appear on the same page. Code like that will be much easier to handle.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]