I have been unable to determine the cause of this problem, so I can not display a test case, instead I have narrowed down my code to a page that still contains the fault without too much extra.
Here is the link:
http://www.richard-walsh.limewebs.com/Disk-Edits/index.html
The problem is that the content div (id=content), is not centering in Chrome and Safari.
It is positioned to the right.
The content div is surrounded by a div called bottom, whose width:100%; and height:auto;.
#bottom{
width:100%;
height:auto;
padding:0px;
margin:0px;
}
#content{
width:862.4px;
height:402px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
background-color:#030303;
background-image:url(images/main.png);
-moz-border-radius:15px;
border-radius:15px;
border-style:solid;
border-color:#181818;
border-width:4px;
margin-top:60px;
-moz-box-shadow: 1px 1px 20px 4px black;
-webkit-box-shadow: 1px 1px 20px 4px black;
box-shadow: 1px 1px 20px 4px black;
overflow:hidden;
}
I have found that if I remove overflow:hidden from the content css then it centers correctly. But I need this (for parts not shown in the link)
I have also found that it works if I remove the menu entirely. So I think that there must be something in the menu css that has caused this. It works fine in Firefox(4).
I'm running Chrome 11.0.696.68 and Safari 5.0.5
Oh! I have just noticed that this only happens when Chrome is maximised, when it is in 'window mode' (for lack of a better name) it centers perfectly, even if the window is stretched to the full size of the screen.
I have also noticed that if you remove #copyright, then #content is rendered on the left, and if both #copyright and #choice is removed then the content div renders in the centre, and if you only remove #choice it still renders on the right.
If you remove #menu_all then it centers correctly.
Any help would be much appreciated,
Thanks
添加显示:块,看看是否可行。
The solution:
The div above the content div (#copyright) did not have a height value declared. Declaring a height value (of 35px) fixed the problem I was having in chrome/safari.
height:auto; did not work.
This does not explain why when the content div was placed directly below the copyright div it worked. But still. It was a workable solution. So if you're have a similar problem then check that the div above has a height declared.
<div id="content" class="post"></div>
Is not in #middle, it's in #bottom. If you move this up the layout appears to work correctly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.