IE zeigt Text nur bei font-size:100% oder längeren String an
hs
- css
Hallo,
hab' folgendes Problem und finde dazu hier im Forum keine passende Lösung:
Im "hellen magenta" Feld neben dem roten Kasten steht Text. FF zeigt diesen korrekt an. Der IE6 jedoch nicht. Erst wenn ich den Text auf 100% setze oder die Textlänge verdoppele - wird dieser im IE ebenfalls angezeigt oder man markiert den Text mit der linken Maustaste oder klickt dort "blind" auf den Link ... dann wird der Text/Link ebenfalls sichtbar. <grummel>
Ich finde den Fehler nicht. Kann mir hier jemand dazu helfen?
Der Source ist auf's nötige zusammengekürzt und die div soweit eingefärbt:
##############
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="de">
<head>
<title>Test</title>
<style type="text/css">
.boxbody {
color: #385079;
font-size: 70%;
background:#0000FF;
}
.box_product {
min-height:170px;
height:170px;
width:210px;
background:#FF00FF;
}
DIV.body {
background:#FFAAFF;
}
.prodimg {
float:right;
width:100px;
height:100px;
background:#FF0000;
}
.clear{
clear:both;
height:1px;
line-height:1%;
font-size:0px;
margin-bottom:-1px;
}
.prodlist_products_name {
color: #754D45;
}
.box_fr a, .box_fl a {
display:block;
}
</style>
</head>
<body>
<div class="boxbody">
<div class="box_product">
<div class="body" style="text-align:left;">
<div style="background:#FF00FF;">
<div class="prodimg"> </div>
<div > </div>
</div>
<a class="prodlist_products_name" href="#">qwopier poqwie poqwi epqowie poqwi epoi qwepoiqwe</a>
<div class="clear"> </div>
<div style="vertical-align:middle; text-align:right; background:#FFFF00;">
</div>
</div>
</div>
</div>
</body>
</html>
##############
Herzlichen Dank.
hs,
selbst R2D2 könnte sich anhand deines merkwürdigen Codes nur schwer vorstellen, was du eigentlich erreichen willst. Wahrscheinlich tun es auch drei divs anstatt 30. Bild? Link?
Was ich dir sagen kann:
DIV.body {
background:#FFAAFF;
}
css Angaben klein schreiben und Klassen besser nicht body nennen.
Floats
.prodimg {
float:right;
width:100px;
height:100px;
background:#FF0000;
}
hebt man innerhalb desselben Containers wieder auf, in dem sie generiert werden. Das hier:
<div class="clear"> </div>
bewirkt gar nichts. Jedenfalls nicht in Bezug auf div.prodimg.
Bitte
Antipitch
Hi,
Im "hellen magenta" Feld neben dem roten Kasten steht Text. FF zeigt diesen korrekt an. Der IE6 jedoch nicht. Erst wenn ich den Text auf 100% setze oder die Textlänge verdoppele - wird dieser im IE ebenfalls angezeigt oder man markiert den Text mit der linken Maustaste oder klickt dort "blind" auf den Link ... dann wird der Text/Link ebenfalls sichtbar.
Koennte Peekaboo oder Guillotine sein.
MfG ChrisB
Hallo ChrisB und Antipitch,
Dank euch beiden für eure Antwort, der Tipp zu Peekaboo ist die Lösung gewesen.
Folgende Änderung mit "position: relative;" hat das Problem gelöst:
.prodlist_products_name {
color: #754D45;
position: relative;
}
PS:
Das hiesige DIV-Gerippe sowie die CSS-Formatierungen sind so nicht komplett wiedergegeben. Es ist auf ein Minimum zusammengestrichen und sieht daher schon sehr nichtnutze aus, es handelt sich aber um eine formatierte mehrspaltige Contentwiedergabe und jedes DIV hat meiner Meinung nach im Layout seine volle Aufgabe.
Gruß hs
Hi hs,
interessant insofern als Pekaboo im IE7 angeblich nicht mehr existiert.
http://www.positioniseverything.net/explorer/peekaboo.html:
"Note: This long standing bug has been suppressed in IE7 (released in late 2006), so the Peekaboo Bug is finally on the way out. IE6 will still exist however, and as long as it does we'll need to fix it."
Ich hatte allerdings auch schon Konstruktionen, in denen ein relativ unmotiviertes position:relative den IE7 zur Räson gebracht hat. What the hack...
Gruß
Antipitch