✔ margin in IE / Firefox

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Moin zusammen!

Ich bastel gerade eine Site und hab einen Firefox-IE-Unterschied, den ich bislang noch nicht gesehen hab:

html:
Code: 
<body>
<div id="container">
    
    <div id="content_container">
        <div id="content_left">
            <div class="sideheadline"></div>
            <a id="active" href="#" title="Herzlich willkommen">lactans</a><br />
            <a href="#" title="Geschichte">lentus</a><br />
            <a href="#l" title="Zimmer">allatus</a><br />
            <a href="#" title="Wissenswertes">moratlis</a><br />
            <a href="#" title="Angebote">paciscor</a><br />
            <a href="#" title="Specials">Crimen</a><br />
            <a href="#" title="Konferenzr&auml;ume">Protendo</a><br />
        </div> <!-- end of content_left -->
        
        <div id="content_right">
            <div class="textcontainer">
                <h1>lactans lentus!</h1>
                <p>
                    lactans lentus allatus. In moratlis For paciscor arx Crimen se arx Reduco Protendo neo Ejulo una Paulisper hio pro canistrum pax Illae evado 
                    ibi Exorbatus qui. Qui semoveo Tubineus mancipo nam Desposco reddo intemporaliter Sufficio, cum aut pax se.<br /><br />
                    lactans lentus allatus. In moratlis For paciscor arx Crimen se arx Reduco Protendo neo Ejulo una Paulisper hio pro canistrum pax Illae evado 
                    ibi Exorbatus qui. Qui semoveo Tubineus mancipo nam Desposco reddo intemporaliter Sufficio, cum aut pax se Erro, diu Ingressus qui Honestas 
                    roto vos hos vix Distinguo humus dignor. Cui leno ex suspicor Amor quibus.<br /><br />
                    lactans lentus allatus!
                    <br /><br /><br />
                </p>
            </div> <!-- end of textcontainer -->
        </div> <!-- end of content_right -->
        
        <br style="clear:both;" />
    </div> <!-- end of content -->
    
    <div id="footer"></div>

</div>  <!-- end of container -->

</body>
css:
Code: 
/*------ container / all contents in here ------*/
#container { 
background-color:#fff;
width:750px;
margin:0px auto;
text-align:left;
}


/*------ container for content / MIDDLE ROW ------*/
#content_container {
/* background-image:url(../images/kreisanschnitt_oLi.gif); */
background-repeat:no-repeat;
background-color:#f2fbe6;
margin:20px 1px 0 0;
}


/*------ left column / SUBNAVI ------*/
#content_left {
width:140px;
margin:35px 0 0 0;
padding:5px 0px 5px 30px;
float:left;
line-height:22px;
}
.sideheadline {
background-color:#81d708;
width:100px;
height:20px;
margin:0 0 10px 0;
}


/*------ right column / CONTENT ------*/
#content_right {
width:575px;
margin:36px 0 0 0;
float:right;
}
.textcontainer {
width:479px;
margin:0 19px 0 77px;
}


/*------ footer / BOTTOM ROW ------*/
#footer {
background-color:#81d708;
width:749px;
height:20px;
margin:20px 0 0 0;
}
eigentlich geht es nur um die top-margin des #footer.
Im Firefox wird diese richtig mit 20px dargestellt. Im IE jedoch nur mit 2px..

Ich kann das mit
Code: 
margin:20px 0 0 0 !important;
margin:38px 0 0 0
beheben, aber..

- liegt in meinem Code ein Fehler vor, den der Firefox "wohlwollender" behandelt?
- gibt es eine bessere Lösung als über "!important"?

Danke für Eure Hilfe!!
 
Wenn Du diese Zeile

HTML: 
<br style="clear:both;" />
durch diese

HTML: 
<div style="clear:both; font-size:1px; margin:0; padding:0; height:0;">&nbsp;</div>
ersetzt, ist die !important-Regel überhaupt nicht erforderlich.

Desweiteren solltest Du noch das Stylesheet mit folgender Regel erweitern, da die Überschrift derzeit im Firefox weiter unten sitzt:

Code: 
.textcontainer h1 {
margin: 0;
}
 
Hallo Maik!

Vielen Dank, ich hab es ersetzt und- super!!
Kannst Du mir sagen warum da font-size auf 1px gesetzt werden muss?
Bzw. funktioniert es doch eigentlich nur mit margin:0?


Danke auch für Deine 2. Anmerkung!
Ich hab übersichtlichkeitshalber nur einen Teil des Stylesheets und des html-Codes reingestellt, daher war auch keine h1 drinne..
Dennoch Vielen Dank
 
Die "geringe" Schriftgröße ist für die Gecko-Browser gedacht, damit sie das übergeordnete Element, in dem sich die floatenden Boxen befinden, sauber schliessen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück