Differences with CSS positioning between IE9 and Opera, and Firefox and Opera
I have a problem with a site I am doing some maintanence on, the latest test version can be found here http://www.smithandgeorg.com.au/new/ If viewed in IE7-9 or Opera this page displays as intended, however in Firefox and Safari the menu is positioned so that it is against the left side of the screen (it's best seen rather than described).
The problem seems to stem from my use of positioning. The #content element is positioned position:relative; top:0px; left:0px so that when the #menu element (which is nested inside) is positioned position:absolute; left:0px it will be pushed right up against the left side of the #content element, as happens correctly in IE9 and Opera. However Firefox and Safari seem to ignore the fact that #content is positioned relatively and just push #menu up to the left side of the screen.
I tried to reproduce the problem in the simple page below, but everything worked as expected.
<html>
<body>
<div 开发者_运维知识库style="border:1px solid red; width:100px; height:100px; position:relative; left:0px">
<div style="border:1px solid black; width:100px; height:100px; position:absolute; top:60px; left:20px">
</div>
</div>
</body>
</html>
Any help would be greatly appreciated :)
Firefox usually ignores position:relative on table elements, but this can be fixed by adding display:block to #content:
#content {
position:relative;
top:0;
left:0;
display:block;
}
SO question/answer about position:relative
加载中,请稍侯......
精彩评论