nicht angemeldet
<div> mit border, Darstellung in IE und Firefox unterschiedlich
AugeHallo,
ich habe eine Box (ohne Inhalt) als Gestaltungselement in eine Webseite eingefügt.
Code:
div.info
{
visibility: visible;
position: absolute;
top: 483px;
left: 0;
width: 458px;
height: 177px;
border: 5px solid #FAD614;
background-color:#ffffff;
}
Problem: jetzt stellt der Firefox die Seite korrekt dar, im IE ist die Box jeweils in Länge und Breite 10px zu klein???
Siehe: http://www.armin-schmitt.com/web07/index.php?nr=141
Was kann ich tun?
Danke und Gruß
Till
-
Hallo Till
Problem: jetzt stellt der Firefox die Seite korrekt dar, im IE ist die Box jeweils in Länge und Breite 10px zu klein???
Dein Problem besteht in der Unterschiedlichen Interpretation des Boxmodells zwischen der IE und der Gecko Engine.
Man kann dieses Problem zwar nicht beheben, jedoch versuchen es zu umgehen.
Versuch es mal so:
1. Ein DivContainer mit den Größenangaben, border und Position
2. Ein weiterer DivContainer, innerhalb des ersten mit dem Text und der entsprechenden Formatierung.-
Versuch es mal so:
- Ein DivContainer mit den Größenangaben, border und Position
- Ein weiterer DivContainer, innerhalb des ersten mit dem Text und der entsprechenden Formatierung.
... so habe ich es auch gemacht! Der der gelbe Rahmen ist:
div.info
{
visibility: visible;
position: absolute;
top: 483px;
left: 0;
width: 458px;
height: 177px;
border: 5px solid #FAD614;
background-color:#ffffff;
}... der Inhalt:
div.infospace
{
visibility: visible;
position: absolute;
top: 505px;
left: 15;
width: 438px;
height: 165px;
color: #000000;
font-size: 11px;
font-family: Verdana,Geneva,Swiss,SunSans-Regular;
line-height: 14px;
}Also gibt es keine einfache Lösung?
-
Hi,
so ich hab jetzt mal rumgespielt und habe folgendes festgestellt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenannt</title>
<style>
div.info
{
visibility: visible;
position: absolute;
top: 483px;
left: 0;
width: 458px;
height: 177px;
border: 5px solid #FAD614;
background-color:#ffffff;
padding:0px;
margin:0px;
}... der Inhalt:
div.infospace
{
visibility: visible;
position: absolute;
top: 505px;
left: 15;
width: 438px;
height: 165px;
color: #000000;
font-size: 11px;
font-family: Verdana,Geneva,Swiss,SunSans-Regular;
line-height: 14px;
padding:0px;
margin:0px;
}
</style>
</head><body>
<div class="info">
<div class="infospace">sdfsdfsdfds</div>
</div></body>
</html>Wenn ich das auf diese Weise mache, sind die Größe im IE und im FF gleich.
Das bedeutet, dass dein Problem an einer anderen Stelle im CSS liegen muss.Tipp:
Nimm den Quelltext auseinander bis du die Stelle entdeckts die an deinem Problem Schuld ist. Solltest du sie finden und trotzdem nicht weiterkommen kannst du dich ja nochmal melden und die eigentliche Problemstelle nennen. Dann findet sich bestimmt eine Lösung-
... ich habe jetzt in das leere div ein transparentes gif eingefügt:
<div class="info"><img src="imgs/blind.gif" border="0" alt=' ' width="458" height="177"></div>... jetzt passt es auch im IE! :-)
Danke soweit und schönes WE!
-
-
-
hi,
vielleicht probier mal mit: margin:0;padding:0
LG Inita
-
vielleicht probier mal mit: margin:0;padding:0
... hat leider nichts bewirkt!
-
-
Hallo Till!
Brr. Was ich hier bisher habe lesen muessen, laesst mich frieren. Dadurch, dass Du keinen standardkonformen Doctype verwendest, ist der IE im Quirksmode und interpretiert das Boxmodell anders. Nimm einen Standardkonformen Doctype: Hier beschrieben und alles wird gut. Dann stellt naemlich der IE das Boxmodell gleich dar. Nur fuer den < IE5.5 musst Du mittels einer Browserweiche (Stichwort Conditional Comments) eventuell Anpassungen durchfuehren.
Schönen Gruß
Afra
-
Jawohl Till :)
Brr. Was ich hier bisher habe lesen muessen, laesst mich frieren. Dadurch, dass Du keinen standardkonformen Doctype verwendest, ist der IE im Quirksmode und interpretiert das Boxmodell anders. Nimm einen Standardkonformen Doctype:
Hab ich garnicht gesehen. Richtig, dein Doctype könnte ja auch XHTML Strict sein :) Dann klappts auch mit den ....
-
Hallo
Brr. Was ich hier bisher habe lesen muessen, laesst mich frieren. Dadurch, dass Du keinen standardkonformen Doctype verwendest, ist der IE im Quirksmode und interpretiert das Boxmodell anders. Nimm einen Standardkonformen Doctype:
Hab ich garnicht gesehen. Richtig, dein Doctype könnte ja auch XHTML Strict sein :) Dann klappts auch mit den ....
Der muss weder vom Typ Strict noch für XHTML sein. Er darf es durchaus sein, muss es aber nicht. Es geht um die Nennung der DTD (die URL im DOCTYPE-Tag). Damit zwingst du auch den MSIE 6, das korrekte Boxmodel (in der Breite sind margin-left/margin-right, border-left/-right und padding-left/-right eingerechnet) anzuwenden.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
<dingdong /><dingdong /><toc /><toc /><toc /><shout>Florence!</shout>
Veranstaltungsdatenbank Vdb 0.1
-
-
-
Hallo Till
Problem: jetzt stellt der Firefox die Seite korrekt dar, im IE ist die Box jeweils in Länge und Breite 10px zu klein???
Siehe: http://www.armin-schmitt.com/web07/index.php?nr=141Was kann ich tun?
Du könntest dafür sorgen, dass IE ab 6 den Quirksmodus verlässt und den standardkonformen Modus verwendest. Lies dir mal Das Box-Modell als Grundlage CSS-basierter Layouts und dort besonders "Beachten Sie:" durch
Das hilft dir allerdings nicht, wenn es auch in 5er IEs vernünftig angezeigt werden soll. Dabei könnte dir eine Browserweiche helfen.
Noch ein paar Anmerkungen:
Dein tolles Gestaltungselement sorgt dafür, dass ich eine Scrollbalken habe. Wenn mehr Text auf der Seite wäre oder wenn ich die Schrift vergrößere, habe ich gleich zwei.Schau dir die Seite mal mit vergrößerter Schrift an und auch mal ohne Styles.
Ist es wirklich so toll, dass dann erstmal die Dekografiken vor dem Inhalt stehen. (Dekografiken sollten überhaupt nicht im HTML auftauchen sondern als Hintergrund in vorhandene Elemente eingebunden sein.Vielleicht könntest du die HTML-Struktur noch einmal generell überdenken.
Die Grafiken mit der Schrift wirken fast unentzifferbar unscharf. Mir tun die Augen weh, wenn ich versuche sie zu lesen. (Die Alt-Attribute sind auch leer und ein Title-Attribut könnte den Text wenigstens beim überfahren mit der Maus leserlich anzeigen.)
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!