CSS positioniertes Element zu klein im IE

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

der Internet Explorer (6 und 7) hält den rechten Rand eines von mir per CSS formatierten Blocks nicht ein, wenn wenig Inhalt vorhanden ist. Wie kann ich den unten stehenden CSS-Text für eine Positionierung möglichst einfach erweitern, so dass der Internet Explorer den zugehörigen Bereich in den angegebenen Grenzen anzeigt?

Der IE macht den Bereich ja nur so groß, wie der textliche Inhalt breit ist. Erst wenn viel Text vorhanden ist, werden die angegebenen Grenzen annähernd eingehalten - allerdings eben nur annähernd, nämlich nach rechts immer nur so weit, wie die längste Textzeile geht.

Firefox (2.0.0.11) macht’s genau so, wie ich möchte.

Und wichtig: Da sich der Bereich mit der Fenstergröße anpassen soll, möchte ich keine Width-Angabe verwenden.

Hier der CSS-Text:

#content
{position:absolute;
 left:13em;
 right:13em;
 top:120px;
}

Und mein div-Tag (wär sicher nicht nötig, aber egal):

 Wenig Inhalt

Vielen Dank für Hilfe
A.

#2

der Internet Explorer (6 und 7) hält den rechten Rand eines
von mir per CSS formatierten Blocks nicht ein, wenn wenig
Inhalt vorhanden ist. (…)
Der IE macht den Bereich ja nur so groß, wie der textliche
Inhalt breit ist. Erst wenn viel Text vorhanden ist, werden
die angegebenen Grenzen annähernd eingehalten - allerdings
eben nur annähernd, nämlich nach rechts immer nur so weit, wie
die längste Textzeile geht.

Hallo nochmal,
ich hab nun erst mal als Lösungsansatz das HTML-Dokument um ein Element erweitert, das sich im Div auf 100% breit macht (s. unten). Trotzdem wäre ich für alternative Lösungen dankbar.

Neuer div-Inhalt:

 Wenig Inhalt

zum bisherigen CSS

 #content
 {position:absolute;
 left:13em;
 right:13em;
 top:120px;
 }

Gruß
A.

#3

Hallo,

Hier der CSS-Text:

#content
{position:absolute;
left:13em;
right:13em;
top:120px;
}

Und mein div-Tag (wär sicher nicht nötig, aber
egal):

Wenig Inhalt

Kommt darauf an, was genau Du bezweckst. Das hier …

#content {
position:relative;
margin:120px 13em 0 13em;
background-color:yellow;
}

wäre eine Variante …

Grüße

CMБ

#4

Hallo Anja,

Neuer div-Inhalt:

Wenig Inhalt

zum bisherigen CSS

#content
{position:absolute;
left:13em;
right:13em;
top:120px;
}

Schau Dir doch mal YAML an. Das ist ein CSS-Framework, dass es schafft nahezu browserübergreifend gleiche Darstellung von Webseiten einzuführen. Zur genannten Thematik (bzw. dem korrespondierenden IE-Fehler) gibt es da sicher eine Lösung, an der Du dich orientieren kannst.

Gruß,
Dirk

#5

Hallo Anja,

ich hab nun erst mal als Lösungsansatz das HTML-Dokument um
ein Element erweitert, das sich im Div auf 100% breit macht
(s. unten). Trotzdem wäre ich für alternative Lösungen
dankbar.

IE 6 und 7 verhalten sich nur so, wenn du dem Dokument keinen Standard-Doctype gibst. Dann sind die meisten Browser im Quirks-Mode, d.h. sie machen alles so wie sie wollen und halten sich an keinen Standard. Die IEs (6/7) verhalten sich dann so wie ihre defekten Vorgängermodelle (IE5 und darunter).
…http://de.selfhtml.org/css/formate/box_modell.htm#bo…

Ein hineingeschachteltes SPAN-Element mit 100% Weite ist dann überflüssig und nach CSS-Standard auch Unsinn, weil Inline-Elemente wie SPAN sowieso keine über CSS zugewiesene Breite annehmen können und sollen.

Gruß Gernot

#6

IE 6 und 7 verhalten sich nur so, wenn du dem Dokument keinen
Standard-Doctype gibst. Dann sind die meisten Browser im
Quirks-Mode, d.h. sie machen alles so wie sie wollen
und halten sich an keinen Standard. Die IEs (6/7) verhalten
sich dann so wie ihre defekten Vorgängermodelle (IE5 und
darunter).

(…)

Hallo Gernot,

danke für Deine Antwort, aber das stimmt so leider nicht. Zumindest funktioniert der Tipp bei mir immer noch nicht.

Ich hatte bereits ein

in meinem HTML-Dokument stehen - in der ersten Zeile, da wo es hin soll. Nun hab ich es auch ergänzt, so dass es Deinem Vorschlag entspricht, aber der IE macht das zugerhörige DIV trotzdem nicht breit, wenn wenig (schmaler) Inhalt drin ist.

Gruß
A.

#7

Schau Dir doch mal YAML an. Das ist ein CSS-Framework, dass es
schafft nahezu browserübergreifend gleiche Darstellung von
Webseiten einzuführen.

Hallo Dirk,

vielen Dank, ich hab es mir geladen und zumindest kurz drüber geschaut. So wie es aussieht, muss ich mich noch ein wenig länger mit beschäftigen, weil da auch noch nicht alles so läuft, wie ich es ursprünglich wollte. Aber der erste Einduck ist wirklich gut!

Danke Dir
und viele Grüße
A

#8

Kommt darauf an, was genau Du bezweckst. Das hier …

#content {
position:relative;
margin:120px 13em 0 13em;
background-color:yellow;
}

wäre eine Variante …

Hallo CMБ,
ja, das funktioniert schon mal in der Breite. Jetzt fehlt nur noch, dass die exakte Positionierung von der oberen Fensterkante mit dem Firefox übereinstimmt. Der IE setzt das DIV noch deutlich tiefer.
Aber vielen Dank schon mal für diese Variante!
Gruß
A

#9

Hallo Anja,

danke für Deine Antwort, aber das stimmt so leider nicht.
Zumindest funktioniert der Tipp bei mir immer noch nicht.

Doch, zumindest für den IE7 stimmt das so, wenn dein Code wie folgt aussieht:smiley:IV-Testseite
<!–
#content {position:absolute; left:13em; right:13em; top:120px; background:stuck_out_tongue:ink; }
–>
Wenig Inhalt

Es kann aber sein, dass durch einen anderen Umstand dein IE in den Quirksmodus versetzt wird, etwa duch einen HTML-Kommentar vor der DOCTYPE-Deklaration.

Gruß Gernot

#10

„http://www.w3.org/TR/html4/loose.dtd“>

DIV-Testseite

<!–
#content {position:absolute; left:13em; right:13em;
top:120px; background:stuck_out_tongue:ink; }
–>

Wenig Inhalt

Jetzt ging es, danke!
Hab wohl beim Testen einen Fehler gemacht.
A.