div-positionierung(ie|ff und float:left;) und -höhe(ie)



  • Hi boardies,

    habe das Problem, dass der IE die divs nicht nebeneinander positioniert, obwohl "float: left;" in der css-Beschreibung für eines der beiden angegeben ist.
    Weiterhin scheint er die "height"-Angabe in manchen div-Blöcken zu ignorieren (hier: "gap" und "crossover")
    Zusätzlich ergibt sich im Fifo ein Problem mit dem "data-content"-Block. Ich setzte den Innenabstand per "padding: 24px;" und versuche damit zu erzielen, dass alles was später in den Content-Teil geschrieben wird, eben einen Abstand von 24px zum Rand hat. Aber der Fifo rechnet den Innenabstand zur normalen Breite und Höhe dazu. Normal oder Denkfehler von mir?

    Zum Schluss noch der Code.

    template.html

    <!DOCTYPE html
    	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>HTML-Template</title>
    <link rel="stylesheet" type="text/css" href="styles.css"></link>
    </head>
    <body>
    
    <div id="head-block">
    
    	<!-- Banner -->
    	<div id="banner">###BANNER###</div>
    
    	<!-- Mainnavigation -->
    	<div id="mnavi">###MAIN_NAVI###</div>
    
    	<!-- 1px Spacer -->
    	<div id="gap"></div>
    
    	<!-- Subnavigation and Content -->
    	<div id="snavi-content-block">
    		<div id="snavi">###SUB_NAVI###</div>
    		<div id="data-content">###CONTENT###</div>
    	</div>
    
    	<!-- Crossover -->
    	<div id="crossover"></div>
    
    	<!-- Footnote -->
    	<div id="footnote">###FOOTNOTE###</div>
    
    </div>
    
    </html>
    

    styles.css

    body {
    	text-align: center;
    	font-size: 11px;
    }
    
    /* <!-- head-elements --> */
    
    #head-block {
    	margin: 0 auto;
    	border: 0px;
    	padding: 0px;
    	width:771px;
    	background-color:#ffffff;
    }
    
    /* <!-- banner-elements --> */
    
    #banner {
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	width: 771px;
    	height: 92px;
    	background-color: #636363;
    	vertical-align: top;
    	text-align: left;	
    }
    
    /* <!-- mainnavigation-elements --> */
    
    #mnavi {
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	width: 771px;
    	height: 16px;
    	background-color: #636363;
    	text-align: center;	
    }
    
    /* <!-- spacer-elements --> */
    
    #gap {
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	width: 771px;
    	height: 1px;
    	background-color: #ffffff;
    	background-image:url(greydot.gif);
    	background-repeat: no-repeat;
    	background-position: right;
    }
    
    /* <!-- subnavigation- and content-elements --> */
    
    #snavi-content-block {
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	width: 771px;
    	min-height: 440px;
    	background-color: #636363;
    }
    
    #snavi {
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	width: 140px;
    	min-height: 440px;
    	background-color: #ffffff;
    	vertical-align: top;
    	text-align: left;
    	float: left;
    }
    
    #data-content {
    	margin-left: 140px;
    	border: 0px;
    	padding: 24px;
    	width: 630px;
    	min-height: 440px;
    	background-color: #ffffff;
    	vertical-align: top;
    	text-align: left;
    }
    
    /* <!-- crossover-elements --> */
    
    #crossover {
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	width: 771px;
    	height: 1px;
    	background-color: #636363;
    	background-image:url(crossover.gif);
    	background-repeat: no-repeat;
    	background-position: right;
    }
    
    /* <!-- footnote-elements --> */
    
    #footnote {
    	margin: 0px;
    	border: 0px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 140px;
    	width: 771px;
    	height: 24px;
    	font-size: 10px;
    	vertical-align: top;
    	text-align: center;
    }
    

    Spyro



  • Spyro schrieb:

    habe das Problem, dass der IE die divs nicht nebeneinander positioniert, obwohl "float: left;" in der css-Beschreibung für eines der beiden angegeben ist.

    Du musst wohl noch position: ralative; setzen...

    Spyro schrieb:

    Weiterhin scheint er die "height"-Angabe in manchen div-Blöcken zu ignorieren (hier: "gap" und "crossover")

    Kann es sein, dass du zwischen dem Start- und End-DIV-Tag Leerzeichen hast?

    Spyro schrieb:

    Zusätzlich ergibt sich im Fifo ein Problem mit dem "data-content"-Block. Ich setzte den Innenabstand per "padding: 24px;" und versuche damit zu erzielen, dass alles was später in den Content-Teil geschrieben wird, eben einen Abstand von 24px zum Rand hat. Aber der Fifo rechnet den Innenabstand zur normalen Breite und Höhe dazu. Normal oder Denkfehler von mir?

    http://de.selfhtml.org/css/formate/box_modell.htm



  • Liegt am DOCTYPE:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    


  • @ flenders
    "position: relative;" hab ich auch schon versucht, bringt mir aber keine Besserung 😞
    Leerzeichen sind keine da.
    Das Box-Modell "dachte" ich zu kennen, aber ich scheine es falsch interpretiert zu haben ^^ Zumindest bringt mich das weiter. Hier eine Dankeschön 🙂

    @Neku
    Muss ich hier wirklich in XHTML 1.1 überspringen, damit alles korrekt angezeigt wird? Mir persönlich macht das nicht sehr viel aus, eher im Gegenteil, ich wäre froh, wenn mein Code in XHTML besser funktioniert. Nur hab ich in letzter Zeit ziemliche Probleme mit XHTML und Browserkompatibilität gehabt, die mich dazu zwangen auf HTML 4.0 umzusteigen. Meinem persönlichen Streben liegt es aber nahe, in der Strict-Version von XHTML 1.0 zu coden. Macht es einen Unterschied, ob ich hier XHTML 1.1 oder XHTML 1.0 Strict benutzte, oder gibts in XHTML 1.1 auch ne Strict-Version, falls das W3-onsortium nicht so schlau war und XHTML 1.1 (was denke ich der Nachfolger von 1.0 ist) gleich als "nur Strict" rausgegeben hat?

    Spyro



  • XHTML 1.1 gibt es nur in einer Form, die man aber nicht mit 1.0 Strict gleichsetzen darf!

    XHTML 1.1 verringert zudem die Kompatibilität eher, als dass es sie erhöht. Die größte Kompatibilität erreichst du durch XHTML 1.0 Transitional. Gib es ansonsten gleich auf, denn mit 1.1 wirst du keine größere Web-Präsenz mit ansprechendem Layout erstellen können, die in den gängigsten Browser funktioniert. Sei es da das unterschiedliche Handling von padding und margin, die nicht-unterstützung von min-height und max-height oder schlicht und ergreifend das name-id-Disaster.

    Kurzum: Mit 1.1 nimmst du extreme Restriktionen in Kauf und musst letztendlich mehr Workarounds schreiben, als du die vorstellen kannst. So erlebe zumindest ich dass 😞



  • Reyx schrieb:

    XHTML 1.1 gibt es nur in einer Form, die man aber nicht mit 1.0 Strict gleichsetzen darf!

    XHTML 1.1 verringert zudem die Kompatibilität eher, als dass es sie erhöht. Die größte Kompatibilität erreichst du durch XHTML 1.0 Transitional. Gib es ansonsten gleich auf, denn mit 1.1 wirst du keine größere Web-Präsenz mit ansprechendem Layout erstellen können, die in den gängigsten Browser funktioniert. Sei es da das unterschiedliche Handling von padding und margin, die nicht-unterstützung von min-height und max-height oder schlicht und ergreifend das name-id-Disaster.

    Kurzum: Mit 1.1 nimmst du extreme Restriktionen in Kauf und musst letztendlich mehr Workarounds schreiben, als du die vorstellen kannst. So erlebe zumindest ich dass 😞

    Also ich arbeite seit Monaten mit XHTML 1.1 und habe wesentlich weniger Probleme als mit HTML 4.

    Schau dir mal die ganzen Styles auf http://www.csszengarden.com an. Immer der gleiche XHTML 1.0 Strict-Code, nur die CSS-Datei wird jeweils getauscht (sogar größtenteils IE6-kompatibel).

    Der Unterschied zwischen XHTML 1.0 Strict und XHTML 1.1 ist bei der normalen Anwendung nicht sonderlich groß, siehe http://www.w3.org/MarkUp/#xhtml11.

    Vor allem der IE6 hat seine Probleme mit CSS2 und auch ein wenig mit XHTML, aber das wird sich ja mit dem IE7 ändern. Ich teste meine Seiten bei der Erstellung mit dem Internet Explorer 7 und dem Firefox. Bei größeren Projekten teste ich eben noch weiter Browser. Den IE6 ignoriere ich inzwischen, da meine komplexeren Projekte ohnehin nicht vor dem Release des IE7 fertig werden.

    Beispiel: http://xml-validator.icefinch.net
    IE6: Katastrophe
    IE7, FF: korrekte Darstellung, kleinere Bugs im IE7

    Wenn ich jetzt anfange alles für den IE6 kompatibel zu machen, kann ich auch gleich aufhören, in irgendeiner Form validen Code zu verwenden.

    Zum Thema:
    Es wird nichts bringen, wenn du HTML4 statt XHTML verwendest. Das große Problem des IE6 ist nicht HTML sondern CSS(2).



  • Wenn ich mal aus meiner Sicht eure beiden Beiträge zusammenfassen darf.
    Ich würde jetzt vorerst auf XHTML 1.0 Trans umspringen, weil ich damit gegenüber den Strict-Varianten bessere Erfahrungen gemacht habe. Da ich aber eher dazu tendiere "stricten" bzw. validen Code zu produzieren und somit auch eher die Strict-Varianten vorziehe, würde ich XHTML 1.0 Trans jetzt übergangsweise benutzten. Wenn der Internet-Exploiter in der Version 7 draußen ist und die anderen Browser dann, denke ich, versuchen werden nachzuziehen, werde ich auf jeden Fall die Version 1.1 von XHTML mit Freuden in meinem Code bevorzugen 🙂

    Edit: Ach ja. Damit die Doctype-Deklaration auch valide ist schreibt folgendes 🙂

    <?xml version="1.1" encoding="iso-8859-1"?>
    <!DOCTYPE html
    	PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    ...
    

    Edit2: Ich hab den Code jetzt in der XHTML 1.1-Variante problemlos im Firefox zum laufen gebracht 🙂 Jetzt ist noch der Exploiter drann.

    Spyro


Log in to reply