Databases
StackOverflow2013
Postsdbo
POcss margin:auto not centering div in webkit browsers (Chrome and Safari) when maximised/full screen
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss margin:auto not centering div in webkit browsers (Chrome and Safari) when maximised/full screen
    primarykey
    data
    text
    <p>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.<br /> Here is the link:<br /> <a href="http://www.richard-walsh.limewebs.com/Disk-Edits/index.html" rel="nofollow">http://www.richard-walsh.limewebs.com/Disk-Edits/index.html</a></p> <p>The problem is that the content div (id=content), is not centering in Chrome and Safari.<br /> It is positioned to the right.</p> <p>The content div is surrounded by a div called bottom, whose width:100%; and height:auto;.</p> <pre><code>#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; } </code></pre> <p>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)</p> <p>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).</p> <p>I'm running Chrome 11.0.696.68 and Safari 5.0.5</p> <p>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.</p> <p>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.</p> <p>If you remove #menu_all then it centers correctly.</p> <p>Any help would be much appreciated,<br /> Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USIonuț Staicu
    1. USRichard
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POcss margin:auto not centering div in webkit browsers (Chrome and Safari) when maximised/full screen
      1. USRichard
      1. VTFavorite
    1. COFYI - It's not a good idea to use sub-pixel values. Browsers round to whole pixels (since the pixel is the smallest unit of measure a browser understands), and each browser rounds differently - http://ejohn.org/blog/sub-pixel-problems-in-css/
      singulars
      1. POcss margin:auto not centering div in webkit browsers (Chrome and Safari) when maximised/full screen
      1. USShauna
    2. COhmm that is fair enough. I am working off of a template that has the width specified exactly, but I guess that it would work the same if I just rounded either way.
      singulars
      1. POcss margin:auto not centering div in webkit browsers (Chrome and Safari) when maximised/full screen
      1. USRichard
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload