Databases
StackOverflow2013
Postsdbo
POhelp needed with doctype
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhelp needed with doctype
    primarykey
    data
    text
    <p>I'm having trouble with a test site's design. When I'm opening my html page with IE, without my doctype line, it renders just the way I like it, but not in FF (because of the way it interprets padding, among other things). When I add the doctype line, the page gets squeezed to a height of about 230px. My intention is to set the height to the maximum page height. Here are my files:</p> <p><strong>* index.html *</strong></p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /&gt; &lt;!--[if IE]&gt; &lt;style type="text/css"&gt; body { text-align: center; /* Remove padding: */ padding: 0; } #container { /* Mind the box model in IE.. */ height: 100%; } &lt;/style&gt; &lt;![endif]--&gt; &lt;/head&gt; &lt;body&gt; &lt;!--[if IE]&gt;&lt;div id="container"&gt;&lt;![endif]--&gt; &lt;div class="container"&gt; &lt;div class="header"&gt; &lt;h1&gt;Logo&lt;/h1&gt; &lt;/div&gt; &lt;div class="nav widget-header "&gt; &lt;!-- main nav --&gt; &lt;a href=""&gt;&lt;div class="nav-button state-default " &gt;&lt;img src="a.jpg" alt="a" /&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href=""&gt;&lt;div class="nav-button state-default " &gt;&lt;img src="b.jpg" alt="b" /&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href=""&gt;&lt;div class="nav-button state-default " &gt;&lt;img src="c.jpg" alt="c" /&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href=""&gt;&lt;div class="nav-button state-default " &gt;&lt;img src="d.jpg" alt="d" /&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href=""&gt;&lt;div class="nav-button state-default " &gt;&lt;img src="e.jpg" alt="e" /&gt;&lt;/div&gt;&lt;/a&gt; &lt;/div &gt; &lt;div class="content"&gt; &lt;!--content area--&gt; &lt;p&gt;content&lt;/p&gt; &lt;/div&gt; &lt;div class="footer"&gt; &lt;!-- footer --&gt; &lt;p&gt;&amp;copy; Copyright&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--[if IE]&gt;&lt;/div&gt;&lt;![endif]--&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>* stylesheet.css *</strong></p> <pre><code>/* reset */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, sbutton_cl, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } .body{ line-height: 1; text-align: center; } .widget-header { background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;; border:1px solid #333333; color:#FFFFFF; font-weight:bold; } .state-default { background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%; border:1px solid #333333; color:#FFFFFF; font-weight:bold; font-size: 1em; outline-color:-moz-use-text-color; outline-style:none; outline-width:medium; } .container { border: 1px solid #999999; margin: 0 auto; width: 800px; height: 100%; background-color:#999999; } .header { border: 1px solid #999999; height:10%; margin-top: 0; padding: 10px; } .nav{ border: 1px solid #999999; height:10%; margin-top: 2%; padding: 10px; text-align: center; vertical-align: middle; } .nav-button { float: left; height: 100%; margin-left: 3px; overflow: hidden; width: 150px; } .content{ border: 1px solid #999999; height:60%; margin-top: 4%; padding: 10px; background-color:#FFFFFF; } .footer{ border: 1px solid #999999; height:10%; margin-top: 4%; padding: 10px; text-align: center; vertical-align: middle; background-color: #FFFFFF; } </code></pre> <p>What I'm ultimately trying to do is a design with fixed width and percentage-based height, where child divs are also percentage-based positioned to their parents ( I believe this is the correct way to deal with different screen resolutions ).</p> <p>I'll be very grateful if anyone can help me with this.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USValentin Brasso
    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. This table or related slice is empty.
    1. COYou might have more luck with this on doctype
      singulars
      1. POhelp needed with doctype
      1. USstimms
    2. COOne hint, in your nav, block elements (like <div>) shouldn't be inside inline elements (like <a>). What you could do is add the CSS rule display:block; to .nav-button and apply the classes to the link, not a div inside the link.
      singulars
      1. POhelp needed with doctype
      1. USanonymous coward
 

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