Div Container passen sich nicht dem Text an (FF)

Status
Nicht offen für weitere Antworten.
D

didi1984

Grünschnabel
Hallo Leute!
Folgendes Problem:
wenn man diese Seite im Firefox öffnet sieht man, dass sich die Div container nicht entsprechend dem text verlängern!
dies ist nur im FF so, im IE funktionert alles einwandfrei!

Hab an diesen CSS problem schon einiges herumexperimentiert, aber eher hats mir das die beiden container gesprengt als angepasst, naja hier könnt ihr das problem mal angucken:

http://www.vivia.at/t3/index.php?id=97 (mit Firefox öffnen)

Da ich etwas unter Zeitdruck stehe, bin ich über jeden Tipp, Vorschlag, Lösung sehr dankbar!
Ich verbleibe mit freundlichen Grüßen!

hier der auszug aus meinem CSS:


*{
margin: 0px;
padding: 0px;

}

#container{
margin: 0px auto;
padding: 0px;
text-align: center;
width: 760 px;
margin-left: 20%;

}

#top{
width: 760px;
background-image: url(bg_navi.jpg);
background-repeat: no-repeat;
text-align: right;
padding-top: 13px;
padding-bottom:13px;
text-transform: uppercase;


}

#logo{
background-image: url(logo2.jpg);
background-repeat: no-repeat;
width: 760px;
height: 126px;
}

#banner{
background-image: url(blume2.jpg);
background-repeat: no-repeat;
width: 760px;
height: 126px;

}

#navi{
background-image: url(bg_navi.jpg);
background-repeat: no-repeat;
width: 760px;
text-align: left;
padding-top: 13px;
padding-bottom: 13px;
text-transform: uppercase;
}



#subnavi{
background-image: url(bg_navi.jpg);
background-repeat: no-repeat;
width: 760px;
text-align: left;
padding-top: 13px;
padding-bottom: 13px;
text-transform: uppercase;

}


#haupt{
width: 760px;
height: 480px;
background-color: White;
}



#inhalt{
float: left;
width: 480px;
height: 480px;
text-align: left;
padding-left: 15px;
padding-right: 15px;
}


---------------------------------------------------------------------------
#haupt #rechts{
float: right;
width: 220px;
height:100%;
text-align: left;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
background-color: #595959;
}

hier vermute ich den Fehler: height: 100%, funktionert nur für IE!
------------------------------------------------------------------------------------------

#footer{
background-image: url(bg_navi.jpg);
width: 760px;
height: 30px;
text-align: left;
padding-top: 7px;
color: White;
clear: both;


}

body
{
font-family: verdana, arial, sans-serif;
margin: 0px;
font-size: 11px;
color: #70695A;

}

...usw
 
Hi,

ausschlaggebend sind zum einen die festen Höhenangaben für die DIVs #haupt und #inhalt, die nur vom IE als "Mindesthöhe" interpretiert werden, sowie zum anderen das "nicht-clearen" der Floatumgebung - siehe hierzu auch http://positioniseverything.net/easyclearing.html.

Code: 
#haupt{
        width: 760px;
        min-height:480px;
        height:auto !important;
        height: 480px;
        background-color: White;
}

#inhalt{
        float: left;
        width: 480px;
        min-height:480px;
        height:auto !important;
        height: 480px;
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
}


.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Code: 
<div id="haupt" class="clearfix"> ... </div>
 
Hallo Maik!
Vielen Dank für deine schnelle Antwort.
Das mit dem clearfix ist echt ne tolle Sache und leuchtet auch ein,
ich habs gleich mal ausprobiert, aber im FF hat sich leider nichts verändert, alles noch beim Alten, das gibts doch nicht :confused:
ich werde es später nochmal versuchen und ein bisschen rumprobieren!

vielen dank nochmals
 
Hast du auch die angesprochene fixe Höhenangabe der beiden DIVs #haupt und #inhalt, wie von mir gezeigt, in eine Mindesthöhe umgewandelt?
 
Hallo Maik!
So sorry, hab jetzt endlich wieder zeit das problem anzugehen :)

Ich schreibe übrigens das css in word pad, wieso wird die angabe "min-height" rot unterlegt, kann es sein dass es deswegen auch nicht funktioniert?

haupt{
width: 760px;
min-height:480px;
height:auto;
height: 480px;
background-color: White;
}

#inhalt{
float: left;
width: 480px;
min-height:480px;
height:auto;
height: 480px;
text-align: left;
padding-left: 15px;
padding-right: 15px;
}


ich muss ja alles angeben ("height" für IE und "min-height" und height:auto; für FF) verstehe ich das richtig ?

mit freundlichen grüßen
daniela
 
Ja http://www.css4you.de sagt, dass min-height in fast allen Browsern ausser IE funktioniert!

und was ich noch eben anmerken wollte, oben bei den Links: Home, Angebot, Praxis etc solltest du vllt. einen Abstand nach links machen, eventuell durch ein Leerzeichen!
 
Zuletzt bearbeitet von einem Moderator:
Hi,

bitte schau dir meinen gezeigten CSS-Code nochmal genau an, denn du hast jeweils in der ersten height:auto-Deklaration die !important-Regel vergessen, was zur Folge hat, dass FF & Co. die zweite height:480px-Deklaration lesen und interpretieren, und somit die Boxen #haupt und #inhalt weiterhin eine feste Höhe von 480px besitzen, und der Inhalt sie am unteren Elementrand überlappt.

Warum "Wordpad" die min-height-Eigenschaft rot markiert, kann ich dir auch nicht sagen, da ich dieses Textverarbeitungsprogramm nicht nutze, es erinnert mich aber in "MS Word" an die Rechtschreibprüfung.

@php4ever: Der aktuelle IE7 unterstützt nun auch die min-height-Eigenschaft.
 
@ Maik + php4ever
vielen dank für eure antworten!

@Maik
oh ja stimmt, ich habe die important-Regel weggelassen, mein Fehler...sorry.
Und jetzt hat sich sogar etwas verändert!
Nun vergrößern sich der container #haupt, so dass der #footer am ende des textes beginnt!

Das Einzig was noch nicht in Ordnung ist, dass sich die Hintergrundfarbe (für #inhalt weiß und #rechts grau) nicht in die Länge mitgeht, es bleibt bei 480px stehen!

hoffentlich kannst du mir hier nochmal weiterhelfen!

mfg dani
 
In diesem Fall empfiehlt es sich, die Fauxcolumns-Technik auf das DIV #haupt anzuwenden:

Code: 
#haupt{
        width: 760px;
        min-height:480px;
        height:auto !important;
        height: 480px;
        background: white url(bgImage_rechts.png) right repeat-y;
}


#haupt #rechts{
        float: right;
        width: 220px;
        /*height:100%;*/ /* entfällt */
        text-align: left;
        padding-top: 0px;
        padding-left: 15px;
        padding-right: 15px;
        /*background-color: #595959;*/ /* entfällt */
}
Das komplette Beispiel incl. der Grafik "bgImage_rechts.png" hänge ich hier als ZIP-Datei an.
 

Anhänge

  • demo_didi1984.zip
    4 KB · Aufrufe: 15
Hy Maik!
Vielen vielen Dank für deine Hilfe und das zip-file!

Leider hab ich wegen meiner Arbeit erst in den nächsten Tagen Zeit daran rumzubasteln, local am PC hats schon mal funktioniert!
Hoffentlich macht mir dann das TYPO3 keinen Strich durch die Rechnung :)
Ich melde mich demnächst wieder hier!

Nochmals herzlichen Dank für die Hilfe!
mfg dani
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück