Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Hmmm, it looks a bit like you've inadvertently linked together two slightly unrelated observations, making it a bit more difficult to diagnose the actual problem.</p> <p><strong>Separating the Symptoms</strong></p> <p>Based on your screenshot, it does appear that your header is coming up with some visual glitches. Additionally, a horizontal scrollbar appears - but rest assured that this is not due to any property of your header. In fact, it is due to your wrapper div below the header, which has a width of 1130px. So when you zoom in that much, it can't all show on the screen, and thus creates the scrollbar.</p> <hr> <p><strong>The True Issue</strong></p> <p>Returning to the problem with your header though, the reason why the colour is disappearing is because your header div has a width of 100%. If, when you took that screenshot, you were scrolled all the way to the left, you would have seen no problem with the header's background colour, because it would have covered 100% of the browser's width. (If you're wondering where this width of 100% came from, it's due to the h1 element inside the header; an h1 generally has a default width of 100%, a style you wouldn't be able to see even with an element inspector like Firebug open.)</p> <p>Note that the site you provided does not display this issue due to a few things: first, its header doesn't have a background colour, so you wouldn't see any kind of issue in that respect (if it did have one though, you'd immediately see that the div doesn't actually span the whole screen as yours does; it is only a little wider than the text within, and has a fixed width. The title is centred not through only usage of the h1 element's width of 100% and <code>text-align:center</code>, but is also due to the <code>margin:0 auto</code> applied to the header div. But now, how to fix your issue?</p> <hr> <p><strong>A Solution</strong></p> <p>With the current structure of your page, the easiest solution would be to give your header div a defined width. Well, not a width per se, but rather a <code>min-width</code>, one which is identical to the width of your wrapper div. If you give it the style of <code>min-width:1130px</code>, you should see your problem solved.</p> <p>I hope this was helpful! (Sorry if it was a little long to read, though.)</p>
    singulars
    1. This table or related slice is empty.
    1. POPage breaks on zooming in - HTML / CSS / browser issue
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USSerlite
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POPage breaks on zooming in - HTML / CSS / browser issue
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COJust saw your answer - it does make a lot of sense, thank you! Really helpful and thorough.
      singulars
      1. PO
      1. USabbottjam
 

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