Angabe "height: inherit" wird vom IE falsch dargestellt

timethee · #1 (**permalink**) 08.09.2008, 17:48

Hallo Forum,
ich probiere gerade das Layout meiner Seite tabellenfrei zu bekommen. Das ist der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Without tables</title>
<style type="text/css">

body
{margin: 0px;}

#cover
{width: 720px; height: 500px; margin: 20px auto; background-color: #000000;}

#border_top
{position: absolute; width: 700px; height: 10px; margin-left: 10px; background-color: #0000ff;}

#border_left
{position: absolute; width: 10px; height: inherit; margin-left: 0px; background-color: #00ff00;}

#border_right
{position: absolute; width: 10px; height: inherit; margin-left: 710px; background-color: #00ff00;}

#search_main
{position: absolute; width: 360px; height: 25px; margin-top: 10px; margin-right: 350px; margin-left: 10px; background-color: #ff0000;}

#nav_top
{position: absolute; width: 360px; height: 25px; margin-top: 10px; margin-right: 10px; margin-left: 350px; background-color: #ff9900;}


</style>
</head>
<body>
         <div id="cover">
         <div id="border_top"></div>
         <div id="border_left"></div>
         <div id="border_right"></div>
         <div id="search_main"></div>
         <div id="nav_top"></div>
         </div>
</body>
</html>

"border_left" und "border_right" sollen die Höhe vom Elternelement "cover" übernehmen, sodass sie über die gesamte Höhe einen Rand bilden. Im Firefox und in Opera funktioniert das auch problemlos - nur im Internet Explorer nicht. Dort sind die Ränder ungefähr 15px lang und hören dann auf.
Weil ich schon mal solche Probleme mit dem IE hatte, habe ich meine Seite von Anfang an mit einer Tabelle entwickelt. Nur ist das natürlich nicht sonderlich akutuell.
Weiß jemand, wie man das Problem mit dem IE beheben kann?

cgdesign · #2 (**permalink**) 08.09.2008, 18:08

Der IE kennt auch kein "inherit"...

timethee · #3 (**permalink**) 08.09.2008, 18:46

Jetzt bin ich wieder schlauer: "Der IE kennt auch kein inherit..".

Hast du vielleicht auch nen Lösungsvorschlag?

fricca · #4 (**permalink**) 08.09.2008, 18:53

Du hast doch lauter feste Höhen. Dann kannst du sie doch auch mit einem konkreten Wert angeben.

Insgesamt sieht dein Konstrukt absolut suboptimal aus. Wenn du den Umstieg von Tabellen zu CSS-Layouts wagen willst, musst du ganz woanders ansetzen: beim Verständnis von Markup.
Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel
Leere Divs wie Tabellenzellen aneinanderkleben bringt dich nicht weiter (Google: "Div-Suppe", Divitis).
Vergiss zuerst deinen Layoutwunsch. Schreib deine Inhalte hin. Zeichne sie mit den passenden HTML-Elementen aus (Stichwort: Semantik). Erst wenn du das hast: Fang an, dir Gedanken zu machen, wie du mit den vorhandenen Elementen dein Layout umsetzen kannst. Absolute Positionierung wirst du nicht brauchen. Wenn du etwas nebeneinander willst: Beschäftige dich mit Float und Clear. Dabei helfen die FAQ weiter.

timethee · #5 (**permalink**) 08.09.2008, 20:25

Fricca, Du schlägst als Lösung also vor, auf so etwas wie grafischer Ränder vollkommen zu verzichten. Mit der Idee von möglichst simplen Websites mit validen Coeds kann ich mich sehr gut anfreunden.
Nur hat mir Dein Link beim konkreten Problem nicht geholfen. Mein Layout funtioniert ja auch - eben nur nicht im IE.
Kannst du nochmal sagen, warum das so suboptimal ist?

fricca · #6 (**permalink**) 08.09.2008, 21:39

Zitat:

Zitat von timethee

Fricca, Du schlägst als Lösung also vor, auf so etwas wie grafischer Ränder vollkommen zu verzichten.

Nein!
Ich sage dir, dass du einen anderen Weg gehen musst. Du musst umdenken. Dazu musst du zuerst dein Layout vergessen und deine Inhalte mit HTML auszeichnen. Und erst wenn du das hast, dann darfst du dir Gedanken machen, wie du mit dem dann vorhandenen Elementen dein Wunschlayout umsetzt. Du sollst nicht deinen Entwurf ändern sondern die Herangehensweise an die Umsetzung.
Lesestoff: A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards
"Lesson No. 1: Everything you know is wrong… sort of"
Das geht jedem Tabellendesigner so. Es hilft nur: Ganz viel lesen. Am besten ein Buch. Little Boxes sollte erhellend sein.

Zitat:

Dein Link beim konkreten Problem nicht geholfen

Wenn du den Link gelesen hast weißt du jetzt, dass dir niemand Tipps für die Umsetzung deines Layouts geben kann, wenn er deine Inhalte nicht kennt.
Du hast kein "konkretes Problem", sondern der Ansatz ist grundfalsch. Wenn du unbedingt bunte leere Boxen mit einer Höhe von 500px aneinanderkleben willst, dann schreib auch 500px als Höhe hin. Das versteht auch der IE. Mit "Layout per CSS" hat das wenig zu tun.

Zitat:

Mein Layout funtioniert ja auch

Wenn du von Tabellen weg willst und Layout mit CSS lernen willst: Nein, dein Layout funktioniert nicht. Ob sinnlose Tabellenzellen aneinandergeklebt oder sinnlose Divs - beides gleichermaßen schlecht.

darkiop · #7 (**permalink**) 08.09.2008, 22:32

Wie fricca schon sagte, die Little Boxes Bücher von Peter Müller helfen dir bei den Anfängen sehr viel weiter. Nach dem lesen wirst du anders denken und deine Aufgaben auch auf eine andere Art und Weise erledigen - besser!
Wenn du kein Geld ausgeben möchtest schau in die CSS-FAQ hier im Forum und fütter Google mit ein paar Fragen, dann kommst du auch ans Ziel

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Spry Menü bar falsch dargestellt im IE	Hilltono	CSS	2	02.12.2010 22:01
Umlaute werden falsch dargestellt	Xethon	(X)HTML	5	21.02.2010 14:51
Formular wird falsch dargestellt	mitch26	(X)HTML	1	06.03.2009 10:59
Navigation wird falsch dargestellt!	st0ffy	CSS	16	01.02.2008 11:30