nicht angemeldet
Horizontaler Abstand zwischen zwei <DIV>
Hallo zusammen.
Ich versuche gerade, meine Webseiten komplett auf CSS umzustellen und scheitere anscheinend schon zu beginn....
Der Internetexplorer erzeugt bei mir immer zwischen zwei DIV eine Horizontale Linie von ca 2px.
Im Mozilla und Firebird wird alles korrekt dargestellt...
Hier ist mein HTML-Code:
<!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">
<head>
<title>test</title>
<meta name="author" content="mo">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" type="text/css" href="suppanz.css">
</head>
<body>
<div id="kopfzeile1">
<img src="images/oben_01.jpg" width="160" height="60" border="0" alt=""><img src="images/oben_02.jpg" width="52" height="60" border="0" alt=""><img src="images/oben_03.jpg" width="138" height="60" border="0" alt=""><img src="images/oben_04.jpg" width="200" height="60" border="0" alt=""><img src="images/oben_05.jpg" width="211" height="60" border="0" alt="">
</div>
<div id="kopfzeile2">
<img src="images/oben_06.jpg" width="160" height="44" border="0" alt=""><img src="images/oben_07.jpg" width="52" height="44" border="0" alt=""><img src="images/oben_08.jpg" width="138" height="44" border="0" alt=""><img src="images/oben_09.jpg" width="200" height="44" border="0" alt=""><img src="images/oben_10.jpg" width="211" height="44" border="0" alt="">
</div>
<div id="navigation">
Navigation <br /><br />
Menue 1<br />
Menue 2<br />
Menue 3
</div>
<div id="inhalt">
Inhalte<br /><br />
Hier steht ganz viel sinniger und unsinniger Text.<br /> der Inhalt ist meist von großer Bedeutung für die Webseite und sollte auf keinen Fall vernachlässigt werden.
</div>
<div id="marginalie">
Weitere Infos<br />
</div>
</body>
</html>
Das stylesheet ist wie folgt:
html, body {
height: 100%;
margin: 0;
padding:0;
}
#kopfzeile1{
padding: 0;
margin: 0;
border: 0;
font-size: x-small;
color: #000;
background-image:url(images/oben_black_01.gif);
background-repeat;repeat-x;
}
#kopfzeile2{
padding: 0;
margin: 0;
border: 0;
font-size: x-small;
color: #000;
background-image:url(images/oben_black_02.gif);
background-repeat;repeat-x;
}
#navigation{
float: left;
padding: 0 0%;
margin: 0;
border: 0;
height: 90%;
font-size: small;
font-weight: bold;
color: #fff;
background: #666;
width: 20%;
voice-family: ""}"";
voice-family:inherit;
width: 16%;
}
html>body #navigation{
width: 16%;
}
#inhalt{
float: left;
padding: 0 0%;
margin: 0;
border: 0;
height: 90%;
font-size: small;
font-weight: bold;
background: #efefef;
width: 60%;
voice-family: ""}"";
voice-family:inherit;
width: 56%;
}
html>body #inhalt{
width: 56%;
}
#marginalie{
float: right;
padding: 0 0%;
margin: 0;
border: 0;
height: 90%;
font-size: small;
font-weight: bold;
color: #fff;
background: #666;
width: 20%;
voice-family: ""}"";
voice-family:inherit;
width: 16%;
}
html>body #marginalie{
width: 16%;
}
#inhalt:first-line{
font-weight:bold;
}
Vielleicht hat jemand eine Idee???
Danke im voraus
Gruß
MO
-
Hallo,
ändere erstmal das hier:
background-repeat;repeat-x; das ist nicht valide! Auch solltest du immer den HTML und CSS Validator drüber laufen lassen. Ich glaube das der IE nicht mit % Angaben umgehen kann, der nimmt viel lieber feste Angaben wie px und so.Grüße
Christoph
--
Ich bin ein spezialisz!
(Zitat von VENGA JO)
sh:) fo:) rl:° br:& ie:| mo:) va:) fl:) ss:| ls:< js:|
Die Erklärung zum Selfcode findest du hier: http://emmanuel.dammerer.at/selfcode.html
Einen Decoder für den Selfcode findest du hier: http://peter.in-berlin.de/projekte/selfcode-
ändere erstmal das hier:
background-repeat;repeat-x; das ist nicht valide!Hi
Hatte ich mich vertippt....muß heißen background-repeat:repeat-x;, oder?Gruß
MO
-
-
Hallo,
<div id="kopfzeile1">
</div>
<div id="kopfzeile2">
</div>Zeilenumbrueche im Quelltext werden von
Browsern oft wie ein Leerzeichen behandelt.Natuerlich versuchst Du mit Deinem CSS,
den Abstand wegzumachen, aber vielleicht
liegt es einfach an diesem simplen Problemchen...Probier mal folgendes:
<div id="kopfzeile1">
</div><div id="kopfzeile2">
</div>Gruesse,
Thomas
-
Zeilenumbrueche im Quelltext werden von
Browsern oft wie ein Leerzeichen behandelt.Hi
danke, aber es ändert sich rein garnichts.....
Gruß
MO
-
-
Habe inzwischen die Lösung selbst herausgefunden.
Es liegt an den Unterlängen:
Standardmäßig werden alle Elemente mit vertical-align:baseline ausgerichtet, sofern nichts anderes angegeben ist.
Nun interpretiert aber der ie6 die unterlängern über die baseline hinaus, und erzeugt so den Abstand zwischen den Grafiken. Und dies hat noch nicht einmal etwas mit der Verwendungvon <DIV> zu tun.
Auch wenn ich die Grafiken einfach mit <p> in die zeile setze, passiert dasselbe.
Meine Lösung: Einfach im Stylesheet diee Eigenschaft vertical-align des Selektors IMG auf den Wert BOTTOM setzten. Dann funktionierts auch mit dem ie6img{vertical-align:bottom;}
Das wars
Danke euch trotzdem
MO
-
hi,
Habe inzwischen die Lösung selbst herausgefunden.
Es liegt an den Unterlängen:ein altbekannte problem.
wenn du die grafiken gleich erwähnt hättest, anstatt von einem div-problem zu berichten, hätte man dir das hier wahrscheinlich auch schon früher sagen können :-)Nun interpretiert aber der ie6 die unterlängern über die baseline hinaus
*lol*
deshalb heisst die baseline baseline, eben weil die unterlängen darunter liegen ...gruss,
wahsaga
-