- 20 April 2006
- 22.682
- 1.316
Moin.
Ich kämpfe gerade mal wieder mit Billy's Browsern. Eigentlich wollte ich im Thread der Lösung fragen, doch die hab ich mittlerweile gefunden - jetzt ist nur noch die Frage nach dem "Warum?".
Ziel war es, eine Kachel-ähnliche Ansicht wie im Windows Explorer ab XP zu schaffen (links ein Bild, rechts Text)
Hier mein Testcode:
Im Firefox natürlich kein Problem, aber die IEs 6 und 7 spinnen natürlich wieder rum und rutschen den rechten Teil ein Stück nach unten. IE8 ist außen vor, der arbeitet korrekt.
Da IEs<8 keine Hilfsmittel mitbringen, um Layoutfehler zu debuggen, hab ich dann Rahmen eingesetzt, um mir das anzusehen, wo der Abstand herkommt.
Plötzlich war alles korrekt! 
Das war das ursprüngliche Problem. Mit Rahmen geht es, aber ohne Rahmen geht es nicht. Auch so Tricks à la "border: 0px solid red" funktionierten nicht.
Hier nochmal zum Anschauen:
Lösung: Dem <li>-Tag eine Breite geben; dann funktioniert es auch ohne Rahmen in IE6,7.
Die Frage: Wieso?
Ich kämpfe gerade mal wieder mit Billy's Browsern. Eigentlich wollte ich im Thread der Lösung fragen, doch die hab ich mittlerweile gefunden - jetzt ist nur noch die Frage nach dem "Warum?".
Ziel war es, eine Kachel-ähnliche Ansicht wie im Windows Explorer ab XP zu schaffen (links ein Bild, rechts Text)
Hier mein Testcode:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Test</title>
<style type="text/css">
a img {
border: none;
}
ul li {
list-style: none;
width: 300px;
}
ul li div.a {
float: left;
width: 70px;
}
ul li div.b {
width: 150px;
margin-left: 80px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<h2>u ghiuh iuh iuh iu</h2>
<div>
<!-- test -->
<ul>
<li>
<div class="a">
<a href="#"><img src="../?=PHPE9568F34-D428-11d2-A769-00AA001ACF42" style="width: 60px; height: 40px;" alt="foo" /></a>
</div>
<div class="b">
<p>jio joi io io jj iosdfj iosdafj iosafj iosdfj iosdfj iosdfj iosdfj iosdfj iosdfhaiosdafh isudfh sudagf sdaofh isudafoh sdafu hsdof sudafh iosudfh iosudfh iosudafh iudsafh isudh fuisdh fiuhsda fiuio</p>
</div>
<div style="clear: left;"></div>
</li>
<li>
<div class="a">
<a href="#"><img src="../?=PHPE9568F34-D428-11d2-A769-00AA001ACF42" style="width: 60px; height: 40px;" alt="foo" /></a>
</div>
<div class="b">
<p>jio joi io io jj iosdfj iosdafj iosafj iosdfj iosdfj iosdfj iosdfj iosdfj iosdfhaiosdafh isudfh sudagf sdaofh isudafoh sdafu hsdof sudafh iosudfh iosudfh iosudafh iudsafh isudh fuisdh fiuhsda fiuio</p>
</div>
<div style="clear: left;"></div>
</li>
<li>
<div class="a">
<a href="#"><img src="../?=PHPE9568F34-D428-11d2-A769-00AA001ACF42" style="width: 60px; height: 40px;" alt="foo" /></a>
</div>
<div class="b">
<p>jio joi io io jj iosdfj iosdafj iosafj iosdfj iosdfj iosdfj iosdfj iosdfj iosdfhaiosdafh isudfh sudagf sdaofh isudafoh sdafu hsdof sudafh iosudfh iosudfh iosudafh iudsafh isudh fuisdh fiuhsda fiuio</p>
</div>
<div style="clear: left;"></div>
</li>
</ul>
<!-- /test -->
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>Da IEs<8 keine Hilfsmittel mitbringen, um Layoutfehler zu debuggen, hab ich dann Rahmen eingesetzt, um mir das anzusehen, wo der Abstand herkommt.
HTML:
<style type="text/css">
a img {
border: none;
}
ul li {
list-style: none;
border: 1px solid yellow; /* NEW*/
}
ul li div.a {
border: 1px solid red; /* NEW*/
float: left;
width: 70px;
}
ul li div.b {
border: 1px solid green; /* NEW*/
width: 150px;
margin-left: 80px;
}
</style>
Das war das ursprüngliche Problem. Mit Rahmen geht es, aber ohne Rahmen geht es nicht. Auch so Tricks à la "border: 0px solid red" funktionierten nicht.
Hier nochmal zum Anschauen:
Lösung: Dem <li>-Tag eine Breite geben; dann funktioniert es auch ohne Rahmen in IE6,7.
HTML:
<style type="text/css">
a img {
border: none;
}
ul li {
list-style: none;
width: 300px; /* THAT'S IT */
}
ul li div.a {
float: left;
width: 70px;
}
ul li div.b {
width: 150px;
margin-left: 80px;
}
</style>
transparent wird zwar angenommen, Verhalten is dann aber wieder wie bei ganz ohne Rahmen.
)