•  19-09-2019
  •  | 
  •  

Question

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:

* index.html *

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> 
   <!--[if IE]>
  <style type="text/css">
   body {
    text-align: center;
    /* Remove padding: */
    padding: 0;
   }
   #container {
    /* Mind the box model in IE.. */
    height: 100%;
   }
  </style>
  <![endif]-->
</head>  
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
     <div class="header">  
         <h1>Logo</h1>  
     </div>
     <div class="nav widget-header ">
            <!-- main nav -->
            <a href=""><div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div></a>
            <a href=""><div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div></a>
    </div >
    <div class="content">
        <!--content area-->
        <p>content</p>
    </div>
    <div class="footer">
        <!-- footer -->
        <p>&copy; Copyright</p>
     </div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>

* stylesheet.css *

/* 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;
}

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 ).

I'll be very grateful if anyone can help me with this.

Was it helpful?

Solution 3

Though I appreciate his effort, meder's answer was helpful, but incomplete since i want to have a percentage-based design. Dave's answer is more like guidelines. The best solution to my problem is something similar to this: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Now my problem is solved, thank you for your help.

OTHER TIPS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#wrapper { background:red; }
html,body{height:100%;}
#wrapper{min-height:100%;}
</style>
<!--[if IE 6]><style>
#wrapper { height:100%; }
</style><![endif]-->
</head>
<body>
<div id=wrapper>
  <p>Hello from JS Bin</p>

  <p id="hello"></p>
  </div>
</body>
</html>

It isn't clear which version of Explorer you're using (apart from 6), but min-height is read as height by some versions...

However - this is the professional (and easiest way) way to build HTML/CSS:

  1. validate your HTML (important, as invalid HTML can confuse browsers in unpredictable ways!)

  2. get it working and looking how you like in FF;

  3. add conditional comments for IE6 and (if necessary) IE7 and 8.

In IE 6 remember that padding etc. is not added to a box, so will decrease any width or height. Also, some elements without certain CSS properties, e.g. no specific width or height (or auto), do not trigger 'haslayout' in IE.

That may not have solved the problem directly, but I hope it helps pin things down!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top