✔ Box-Breite und der IE

Status
Nicht offen für weitere Antworten.
C

cosmanova

Mitglied
Hallo noch mal :)

Habe eine Box die über die gesamte Seite gehen soll. Funktioniert im Firefox und Opera auch wunderbar mit ' width: 99%;'

Nur der IE streikt da wieder. Er stellt die Box bei gleicher Angabe wesentlich kleiner dar. Gebe ich einen höheren %-Wert an, erscheint ein Scrollbalken bei minimiertem Fenster. Mit px und em ist es eben nicht anpassungsfähig.

Ist das ein bekannter IE-Bug ? Oder hat das was mit den anderen Wertangaben (siehe unten) zu tun ?

Habt ihr eine Idee ? Im Netz finde ich leider nichts genaues zu dem Problem.

Viele Grüße
Cosmi


*********************************************************
#stripline {
width:99%;
border: 2px solid black;
position:absolute;top:0px;left:7px;
padding:124px 0 2px 0;
margin:0;
background:transparent;
border-bottom:1px solid #0084A5;
}

#stripline p{
padding:4px;
margin:0;
background:#e72c50;
border-top:1px solid #0084A5;
border-bottom:1px solid #0084A5;


<div id="stripline">
....<p style="height: 1px"><img src="Bilder/pixel_rot.jpg"></p>
</div>
 
Hi,

wird das Dokument im "Standards-" oder "Quirksmode" übergeben?

Bei letzterem interpretiert der IE das Boxmodell nämlich falsch und addiert die border- und padding-Eigenschaft nicht zur Breiten/Höhenangabe einer Box hinzu.
 
Ich vermute, dass es dabei um das Problem des Außenabstandes geht. Ich hatte mal das Problem, dass der IE um jede Box automatisch einen Außenabstand von 1-2px gesetzt hat.
Ich habe damals keine Lösung gefunden, wäre also auch dankbar für Hilfe ;)

\\EDIT
Habe grade nochmal gesucht. Mein Problem tritt nur bei Float auf, siehe hier: http://www.perun.net/2004/07/09/3-pixel-abstand/
 
Zuletzt bearbeitet:
@derpfaff: Der "3px-Gap-Bug" im IE lässt sich auch auf diese Weise beheben:

Code: 
div#left {
float: left;
width: 150px;
height: 100px;
margin-right: 0 !important; /* Moderne Browser */
margin-right: -3px; /* IE */
background: yellow;
}

div#right {
float: right;
width: 150px;
height: 100px;
margin-left: 0 !important; /* Moderne Browser */
margin-left: -3px; /* IE */
background: yellow;
}

div#center {
height: 100px;
margin: 0 150px !important; /* Moderne Browser */
margin: 0 147px; /* IE */
background: red;
}
Code: 
<div id="left">...</div>
<div id="right">...</div>
<div id="center">...</div>
 
Auch wenn ich exakt 100% angebe oder 100.1% stellt der IE die Box wesentlich kleiner dar.

Es geht nicht um ein paar Pixel - das würde ich im IE noch hinehmen, es geht um 300-400px.

Mir ist gerade aufgefallen, selbst wenn ich bei beiden stripeline-Blöcken width raus nehme behält er die Breite bei, die er mit diesen Angaben hat :confused: Dabei definiere ich nur in diesen Blöcken die Boxen.

Gebe ich im 2. stripeline-Block einen Wert von z.B. 'width: 1150px;' an, vergrößert er die Box. Bei allen anderen Angaben (etwa oben im Block mit px oder % kleiner und größer) macht er nix.

Ich bin reichlich verwirrt :rolleyes:
 
Setz mal die Polsterungseigenschaften des Viewports und Dokumentkörpers auf null:

Code: 
html,body {
margin: 0;
padding: 0;
}
 
Was du probieren kannst ist, dass du den Elementen sagst, dass sie über die ganze Breite gehen sollen. Das müsste mit folgendem Code gehen:

Code: 
display: block;
 
@derpfaff: Das verwendete div- und p-Element gehört doch zur Familie der Block-Elemente, und befürfen daher nicht dieser Formatierung, damit sie die volle Breite im Anzeigebereich einnehmen.

Vielmehr dürfte es an den Polsterungseigenschaften des html- und body-Elements liegen, dass sich die Box im IE nicht bis zum rechten Fensterrand erstreckt.
 
Hallo Maik,

hab das jetzt mal eingefügt. Funktioniert aber nicht. Ich komm nicht drauf, wo der Fehler liegt :rolleyes:

Hab mal alles unwichtige rausgeschmissen. Das ist der Code, der so im Firefox einwandfrei funktioniert und sich auch anpasst:

*******************************************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>CSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type"/>
<style>


<!--
body {
margin: 0;
padding: 0;
background: #ffffff;
}

.backbox {
border: 5px solid green;
margin-left: 15px;
background: #ffffff;
padding: 0px 0px 15px 0px;
width: 950px;
height: 820px;
border-top: 15px solid #green;
border-right: 15px solid #green;
}

#stripline {
width: 99%;
border: 2px solid black;
position:absolute;top:0px;left:7px;
padding:124px 0 2px 0;
margin:0;
background:transparent;
border-bottom:1px solid #0084A5;
}

#stripline p{
padding:4px;
margin:0;
background:#e72c50;
border-top:1px solid #0084A5;
border-bottom:1px solid #0084A5;
}

</style>
</head>
<body>

<div class="backbox">

<div id="stripline">
<p style="height: 1px"><img src="Bilder/pixel_rot.jpg"></p>
</div>

</div>
</body>
</html>


Wie gesagt jeglicher Versuch was mit width in den stripeline-Blöcken zu ändern ist bei mir fehlgeschlagen.
 
@Maik: Stimmt natürlich :(
Ich habe diese Formatierung immer bei <span>-Tags genutzt, wo es auch "legal" sein müsste.

Aber sag mal: müsste ein Div-Tag nicht automatisch von einer zur anderen Seite reichen, wenn Margin und Width nicht eingebunden sind?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück