✔ document type

Status
Nicht offen für weitere Antworten.
T

the_black_hawk

Erfahrenes Mitglied
Hi,

ich habe ein aufwändiges divLayout erstellt, Problem ist, dass ich als Anfangstag nur <html> zu stehen hab, nun sagt mit der W3C validator, dass meine Seite nen einziges Fehlerbündel ist.

Also hab ich meinen Dokumenttype definiert
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

nun hat sich mein Navigationsmenü allerdings völlig verschoben und ist breiter geworden.

das Menü ist ungefähr so aufgebaut:

HTML: 
<div id="navi">
		<ul id="navlist">
		<li id="active"><a href="#" >Link1</a></li>
		</ul>
</div>

hab ich vieleicht nur den falschen documenttype gewählt?:confused:
 
Hi,

deiner Beschreibung zufolge tritt die Verbreiterung und Verschiebung des Menüs anscheinend im IE auf, der ohne Doctype-Deklaration im Quirksmodus läuft, und daher das CSS-Boxmodell falsch interpretiert. Mit dem von dir gesetzten Dokumenttyp hingegen läuft der IE im Standardsmode und hält sich an die Regeln für das Boxmodell.

Wie lautet denn das zugehörige Stylesheet für das Listenmenü?

Vermutlich müssen hier border- und/oder padding-Deklarationen von der Breitenangabe subtrahiert werden, um die gewünschte Breite zu erzielen.
 
Hallo der komplette cssCode sieht wie folgt aus:

HTML: 
<style>
/* NAVIGATION*/

#navi
{

width: 200px;
margin: 0 auto;
padding: 2em 0;
font-family: arial;
font-size: 12px;
text-align: center;
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 170px;
}
ul#navlist li
{
display: block;
margin: 0;
padding: 0;


ul#navlist li a
{
display: block;
width: 170px;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background-image: url('navbg.gif');
width:expression(document.body.clientWidth < 194? "194px": "auto" );
width:expression(document.body.clientWidth > 194? "194px": "auto" );
}

ul#navlist li#active a
{
display: block;
width: 170px;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
text-decoration: none;
background: #fff;
color: #2d73dc;
font-weight: bold;
cursor: crosshair;
width:expression(document.body.clientWidth < 194? "194px": "auto" );
width:expression(document.body.clientWidth > 194? "194px": "auto" );
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #2d73dc;
background-image: url('navbg_out.gif');
border-color: #ffe #aaab9c #ccc #fff;

}
</style>

weil der IE nicht zum ersten mal Probleme bereitet, musste ich hier mit width.expressions arbeiten
 
Na, da ist doch auf mein Näschen Verlass, dass hier die border- und padding-Deklarationen von der width-Eigenschaft subtrahiert werden müssen, um die gewünschte Boxdimension zu erzielen.

Dummerweise lassen sich relative Werte, wie em, schlecht von absoluten, wie px, abziehen, Stichwort: "Äpfel und Birnen". :)

Von daher wirst du die Innenabstände ebenfalls in der Einheit px angeben müssen, um sie gemeinsam mit der border-Eigenschaft "sauber" von der Breitenangabe abziehen zu können, um letzlich auf das gewünschte Maß von "170px" zu kommen.

Hast du denn mal zum Vergleich das CSS-Layout in einem nicht-IE-Browser, wie Firefox und Opera, überprüft, denn diese halten sich trotz fehlendem Dokumenttyp an das Boxmodell und dürften das Menü von vornherein zu breit darstellen.
 
Maik hat gesagt.:
Hast du denn mal zum Vergleich das CSS-Layout in einem nicht-IE-Browser, wie Firefox und Opera, überprüft, denn diese halten sich trotz fehlendem Dokumenttyp an das Boxmodell und dürften das Menü von vornherein zu breit darstellen.
Zum Vergrößern anklicken....

ich arbeite an meinen Projekten immer mit dem aktuellsten Firefox und dem IE5
Firefox reagiert ähnlich wie IE5, sieht zwar dann etwas anders kaputt aus, aber sieht halt kaput aus*gg

aber jetzt wo du Opera ansprichst, hier ist es so, dass es auch ohne doctype nicht so aussieht wie es soll, wird zu schmal dargestellt
 
Vermutlich liegt es an der fehlenden schliessenden }-Klammer im Selektor ul#navlist li, dass das Menü in den Browsern "kaputt" aussieht:

Code: 
ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}
Ansonsten kann ich im Opera-Browser keine Unterschiede in der Menübreite feststellen, wenn ich den o.g. Dokumenttyp deklariere oder weglasse.
 
@the_black_hawk

Schau doch mal hier nach http://www.cssplay.co.uk/. Dort wird demonstriert wies gemacht wird, daß es in allen Browsern wie gewünscht aussieht. Dort sind viele Beispiele dargestellt. Du darfst diese sogar auf Deiner Page benutzen, wenn Du dort sichtbar einen Link plazierst, der auf obige Adresse verweist.
Ich habe dort auch mein Navigationsmenü gefunden und es funktioniert auf jedem Browser korrekt.
 
So, ich hab jetzt mal aufgrund deiner Angaben ein Testdokument erstellt und das Stylesheet in allen mir zur Verfügung stehenden Browsern erfolgreich getestet.

Meine Testumgebung: Win2k, Firefox 2.0.0.6, IE 5.01, 5.5, 6, Mozilla 1.7.12, Netscape 7.0, Opera 9, SeaMonkey 1.0.5

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_the_black_hawk</title>

<style type="text/css">
<!--
/* NAVIGATION*/

#navi
{
width: 200px;
margin: 0 auto;
padding: 2em 0;
font-family: arial;
font-size: 12px;
text-align: center;
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 170px;
}

ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a:link, ul#navlist li a:visited
{
display: block;
padding: 0.5em 0 0.5em 24px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
width: 170px; /* Deklaration fuer IE 5.x */
voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
voice-family:inherit;
width:146px; /* Korrektur fuer andere Browser */
}i{}

ul#navlist li#active a
{
display: block;
padding: 0.5em 0 0.5em 24px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
text-decoration: none;
color: #2d73dc;
font-weight: bold;
cursor: crosshair;
width: 170px; /* Deklaration fuer IE 5.x */
voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
voice-family:inherit;
width:146px; /* Korrektur fuer andere Browser */
}i{}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #2d73dc;
background-image: url('navbg_out.gif');
border-color: #ffe #aaab9c #ccc #fff;
}
-->
</style>

</head>
<body>

<div id="navi">
     <ul id="navlist">
         <li id="active"><a href="#">Link1</a></li>
         <li><a href="#">Link2</a></li>
     </ul>
</div>

</body>
</html>
 
naja etwas schönes runter laden ist einfach, aber mit den eigenen Händen eine atemberaubende Website zu erstellen ist schon was anderes

Ich habs jetzt so hinbekommen, dass es schonmal in alle nicht-IE Browser funktioniert

der IE zieht das ganze allerdings in die Breite...
 
Wenn du Änderungen am CSS-Code vorgenommen hast, solltest du auch die überarbeitete Fassung hier reinstellen, denn die tutorials.de-Glaskugel hat sich erstmal in den heißverdienten Sommerurlaub verabschiedet. :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück