Hilfe benötigt mit Doctype

StackOverflow https://stackoverflow.com/questions/1515030

  •  19-09-2019
  •  | 
  •  

Frage

Ich habe Probleme mit einer Design der Teststelle. Wenn ich meine HTML-Seite mit IE öffnen, ohne meine Doctype Linie, macht es genau so, wie ich mag es, aber nicht in FF (wegen der Art und Weise interpretiert sie Polsterung unter anderem). Wenn ich die Doctype Zeile hinzufügen, wird die Seite zu einer Höhe von etwa 230px gequetscht. Meine Absicht ist es, die Höhe auf die maximale Seitenhöhe einzustellen. Hier sind meine Dateien:

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

Was ich letztlich zu tun versuchen, ist ein Entwurf mit fester Breite und prozentbasierte Höhe, wo Kind divs sind auch Prozentbasis positioniert, um ihre Eltern (ich glaube, dass dies der richtige Weg ist, mit unterschiedlichen Bildschirmauflösungen zu tun) .

Ich werde sehr dankbar, wenn mir jemand helfen kann mit diesem.

War es hilfreich?

Lösung 3

Obwohl ich seine Bemühungen zu schätzen wissen, die Antwort von meder war hilfreich, aber nicht vollständig, da ich einen Prozentsatz basiertes Design haben will. Dave Antwort ist eher wie Richtlinien. Die beste Lösung für mein Problem ist, etwas Ähnliches wie folgt aus: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Nun mein Problem gelöst, ich danke Ihnen für Ihre Hilfe.

Andere Tipps

<!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>

Es ist nicht klar, welche Version von Explorer sind Sie (abgesehen von 6) verwendet wird, aber min-height als height von einigen Versionen ...

lesen

Allerdings - dies ist der professionelle (und einfachste Weg) Weg, um HTML zu bauen / CSS:

  1. Überprüfen Sie Ihre HTML (wichtig, da ungültige HTML können Browser in unvorhersehbarer Weise verwechseln!)

  2. erhalten sie arbeiten und auf der Suche, wie man sich wie in FF;

  3. hinzufügen bedingte Kommentare für IE6 und (falls erforderlich) IE7 und 8.

In IE 6 nicht vergessen, dass Polsterung etc. nicht hinzugefügt zu einem Kasten, verringert sich so jede Breite oder Höhe. Auch einige Elemente ohne bestimmte CSS-Eigenschaften, z.B. keine bestimmte Breite oder Höhe (oder auto), nicht Trigger 'hasLayout' in IE .

Das kann nicht das Problem direkt gelöst haben, aber ich hoffe, es hilft Stift Dinge nach unten!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top