Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>your Q#1 has been <a href="https://stackoverflow.com/questions/5993721/vertical-centering-working-in-almost-every-browser-but-not-in-ie7/5993783#5993783">answered by @thirtydot</a>, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.</p> <p><strong>addendum to above per comments:</strong> In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the <code>position: static</code> rule from the <code>#middle[id] {}</code> rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6</p> <p>Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:</p> <h3>Hybrid table cell/positioning method : <a href="http://fiddle.jshell.net/2mwrY/" rel="nofollow noreferrer">here</a></h3> <p>That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered</p> <p><strong>HTML</strong> used is the same as the bottom of this answer.. <strong>minus</strong> the extra <code>&lt;i&gt;&lt;/i&gt;</code> element</p> <p><strong>CSS:</strong></p> <pre><code>html, body { height: 100%; margin: 0; padding: 0;} body { background-color: #fff; color: #000; } #outer { position: relative; width: 100%; height: 100%; display: table; } #middle { display: table-cell; vertical-align: middle; text-align: center; } #c { width: 385px; height: 120px; margin: 0 auto; background: url(http://engitize.net/engitize.png) no-repeat 50% 50%; } /**** for IE7 and below ****/ /* hacks but there is another method below */ #middle { *position: absolute; *top: 50%; *width: 100%; *text-align: center; } #c { *position: relative; *top: -50%; } /**** end IE7 and below rules ****/ #c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; } #footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } #footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; } #footer p {margin: 0;} </code></pre> <p>As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:</p> <blockquote> <p><a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/" rel="nofollow noreferrer">Conditional stylesheets vs CSS hacks? Answer: Neither!</a></p> </blockquote> <p>means you could replace the IE7 hacks with:</p> <pre><code>.ie6 #middle, .ie7 #middle { position: absolute; top: 50%; width: 100%; text-align: center; } .ie6 #c, .ie7 #c { position: relative; top: -50%; } </code></pre> <hr> <h3>Original alternative - "Matchstick Technique"</h3> <p>You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen</p> <p>As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using <code>text-align: center;</code> on it you have the horizontal centering too</p> <h2>here's a link to a working <a href="http://jsfiddle.net/clairesuzy/y42ap/" rel="nofollow noreferrer">example fiddle</a></h2> <p>Note: I've left your widths intact, but you can test without widths/heights by removing the height &amp; width off <code>#c</code> and also remove the CSS for the <code>#c div</code> text div - in a plain text scenario entering text into either of these divs should 'auto' centre.</p> <p>and especially note the insertion of the extra <code>&lt;i&gt;&lt;/i&gt;</code> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.</p> <p>Code used in fiddle:</p> <pre><code>html, body { height: 100%; margin: 0; padding: 0; } body { background-color: #fff; color: #000; } #outer { position: relative; width: 100%; height: 100%;} /* a matchstick spacer */ #outer i { display: inline-block; height: 100%; width: 1px; margin-left: -1px; /* to hide off page */ margin-right: -4px; /* to remove spacing between this and #middle block */ vertical-align: middle; /* will make inline block next to it center vertically */ background: #f00; /* red, not required just to see or not see it */ } #middle { display: inline-block; width: 100%; text-align: center; vertical-align: middle; } /* image 385 * 120 */ #c { display: inline-block; /* presuming image heights, but it wouldn't matter if there was width/height here or not */ width: 385px; height: 120px; background: url(http://engitize.net/engitize.png) no-repeat 50% 50%; } #middle, #c { /* IE hack for inline block on block level elements */ *display: inline; } #c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; } #footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } #footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; } a { text-decoration: none; color: #006; } a:hover { color: #00c; } p { margin: 0px; padding: 0px; } </code></pre> <p><strong>HTML:</strong></p> <pre><code>&lt;div id="outer"&gt; &lt;i&gt;&lt;/i&gt; &lt;div id="middle"&gt; &lt;div id="c"&gt;&lt;div&gt; because history is important! &lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;div&gt; &lt;p style="float:left;"&gt;&lt;strong&gt;Przemys?aw Pawe?czyk&lt;/strong&gt;'s imprint | Coming in 2012!&lt;/p&gt; &lt;p style="float:right;"&gt;&lt;a href="http://przemoc.net/"&gt;Przemoc's network&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POVertical centering working in almost every browser, but not in IE7
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USclairesuzy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POVertical centering working in almost every browser, but not in IE7
      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. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COEven if it is a bit hacky, it works, and doesn't require knowing the height. +1
      singulars
      1. PO
      1. USthirtydot
    2. CO+1, Thanks @clairesuzy. Maybe hackish, but seems interesting. I'll look closer at it later. I am not fully accepting simple answer of @thirtydot to Q1, because it works in IE6, which also does not support the CSS table properties (as I already noted in comment there). **Can you explain why it works in IE6, but not in IE7?**
      singulars
      1. PO
      1. USprzemoc
    3. CO@przemoc : yep.. IE7 can read your `middle[id]` (and `outer[id]` for that matter) rules and the static position which is only supposed to be for non-IE browsers is being picked up.. I think your version can be made to work properly if the two versions were properly separated out into a `lte IE 7` conditional comment as IE8 + should use the table properties.. do you want conditionals or a fixed hack version.. what's your preference
      singulars
      1. PO
      1. USclairesuzy
 

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