✔ DOCTYPE Problem

Status
Nicht offen für weitere Antworten.
A

andreasst

Mitglied
Meine neue Website, ist bereits ziemlich weit im fertig werden, allerdings gibt der W3 validator noch jede Menge Fehler aus. Allerdings variiert das sehr stark danach, welchen DOCTYPE ich einstelle. Welchen DOCTYPE sollte ich verwenden?
Das wichtigste ist allerdings, dass bei einer Standard Deklaration zB HTML 4 oder XHTML 1
das Table Attribut Height=100% nicht korrekt funktioniert, zumindest im FF

http://www.stephanides.eu
die Hauptseite ist
http://www.stephanides.eu/main.php
 
Das table-Element besitzt auch kein height-Attribut. Das müsstest du dann mit CSS machen.
 
Hi,

andresst hat gesagt.:
Das wichtigste ist allerdings, dass bei einer Standard Deklaration zB HTML 4 oder XHTML 1
das Table Attribut Height=100% nicht korrekt funktioniert, zumindest im FF
Zum Vergrößern anklicken....

mit dieser CSS-Regel wird die Tabellenhöhe auf 100% im Browserfenster gestreckt, wenn die Browser im Standards-Mode laufen:

Code: 
html,body {
height:100%;
}
 
Also das hab ich jetzt mal gemacht. Funktioniert aber nur bei einer Doctype deklaration ohne Verweis auf die W3 definition. Auch wenn ich das Layout im CSS drinnen hab. Welchen DOCTYPE soll ich am besten verwenden? Ein weiteres Problem ist das vertical-align innerhalb der des td Tags. Habe ich natürlich auch im CSS gemacht. Möglicherweise ist das Problem das ein div tag direkt im td Tag ist?

soll ich xhtml, html 4, ... verwenden?
 
Hi,

wie ich gerade sehe, hast du die empfohlene CSS-Regel nicht vollständig übernommen, denn es fehlt das html-Element in dem Selektor.

@vertical-align:top: Vermutlich hängt es damit zusammen, dass du für das DIV einen oberen Innenabstand bestimmt hast:

Code: 
<div id="menu" style="padding-left:10pt; padding-top:10pt;">
 
Das mit dem html selektor hab ich mal korregiert. Im FF funktioniert das jetzt auch. Im IE das vertical align nicht. @padding-top das #content div hat auch bleibt auch nicht oben.
 
Macht keinen Unterschied. Wie ursprünglich gesagt, funktioniert das ganze, sobald der DOCTYPE Tag fehlt. Nur schreit da der W3 validator.
 
So, ich hab jetzt mal das ursprüngliche Tabellenlayout aufgelöst und stattdessen das Seitenlayout mit CSS umgesetzt:


  • HTML-Markup (ohne JS-Code):
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Stephanides</title>

<link href="css/standard.css" rel="stylesheet" type="text/css">
<link href="css/style3.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="wrapper">
     <div id="head">
          <form>
                <select name="stylewahl" onchange="switchstyle(this.value)">
                        <option value="style3.css">Default Style</option>
                        <option value="style1.css">Style 1</option>
                        <option value="style2.css">Style 2</option>
                        <option value="style3.css">Style 3</option>
                        <option value="style4.css">Style 4</option>
                        <option value="style5.css">Style 5</option>
                </select>
          </form>
     </div>
     <div id="leftCol">
          <a href="main.php?lng=en"><img src="http://www.stephanides.eu/engflag.gif" alt="" width="30" height="19"> English</a>
          <div id="menu" style="padding-left:10pt; padding-top:10pt;">
          <ul>
              <li><a href="#" onclick="xajax_refreshmenu('1');xajax_navto('info');">Information</a></li>
              <li><a href="#" onclick="xajax_refreshmenu('5');xajax_navto('projekt_overview');">Projekte</a></li>
              <li><a href="#" onclick="xajax_refreshmenu('3');">Fotos</a></li>
              <li><a href="#" onclick="xajax_refreshmenu('2');xajax_navto('impress');">Impressum</a></li>
          </ul>
          </div>
     </div>
     <div id="rightCol">
          <div id="content">bla blubb</div>
     </div>
     <div id="footnote"><a href="mailto:andreas.stephanides@gmx.at">&copy;Andreas Stephanides</a></div>
</div>

</body>
</html>
  • CSS-Code für standard.css:
Code: 
/* CSS Document */
html,body{
height:100%;
margin:0;
padding:0;
}

#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

#head {
background:url(../steeu2.gif) no-repeat;
height:88px;
}

#head form {
float:right;
}

#leftCol {
float:left;
width:150px;
}

#menu ul
{  padding:0; margin:0; }

#menu ul li
{
        text-indent: 0pt;color:#000000; line-height:1.5em; }
#menu ul  ul li
{
 color:#0033FF; padding-left:10pt;}

#menu ul ul ul li
{ color:#00FF00; padding-left:20pt;}
li
{ list-style:none;}
a
{

color:#000000; text-decoration:none;}

a:hover
{text-decoration:none;color:#0033FF;}

#menutab
{background: rgb(255, 255, 204);}

#rightCol {
margin-left:150px;
}

#content {
padding-left:20pt;
}

#footnote {
position:absolute;
left:0;
bottom:0;
width:100%;
clear:left;
font-size:10pt;
text-align:center;
}


a img {border:none;}
Vielleicht hilft dir das weiter?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück