Højden auto fungerer i IE 7.0, men ikke i Mozilla Firefox?

Tags:    html css

<< < 12 > >>
Godmorgen de herre..

Jeg har efter lang tid endelig ladet mig overbevise til at begynde at bygge hjemmesider op i divs frem for de gode gamle tabels, da jeg godt selv kan se fordelen heri. Dette har dog medført et par problemer, da jeg jo som sagt er ny på det punkt =)

På en ny side har jeg sat højden til content (altså hovedindholdet) til auto, således den selv definerer højden ud fra hvor meget tekst/billeder der er. Dette virker også nogenlunde efter hensigten i Internet Explorer 7.0, men dette er desværre ikke tilfældet i Mozilla Firefox.

Det ser ud som det skal her i IE7.0:
http://img88.imageshack.us/img88/8496/explorerrp1.jpg

Og sådan her ser det desværre ud i Mozilla Firefox:
http://img88.imageshack.us/img88/8305/mozillaut5.jpg

Den udvider altså ikke content som den skal, men flytter i stedet bunden helt op.

I min stylesheet har jeg blot defineret content div'sne som følgende:

#content{
width: 667px;
height: auto;
background-color:#FFFFFF;
margin-left: 21px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}

#contentmain{
width: 417px;
height: 600px;
background-image: url(images/content_main_bg.png);
margin-left: 12px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: left;
}

Hvordan løser jeg dette problem :/ ?

Hvis i skal bruge mere af koden siger i bare til. Jeg ville blot ikke spamme eksperten med hele min stylesheet + kode til hjemmesiden, hvis det ikke var nødvendigt :)



16 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma
Sorter efter stemmer Sorter efter dato
Når du har flydende elementer i et omkring liggnede div, kender det omkringliggende div ikke højden på de flydende elementer før der kommer et element under dem, der har clear:both;.

ex:

<div style="height:100%;">
<div style="float:left;">
massere af indhold
</div>
<div>

Her vil det omkransende div ikke kende sin højde.

<div style="height:100%;">
<div style="float:left;">
massere af indhold
</div>
<div style="clear:both;"></div>
<div>

Så vil det omkring liggende div kende højden på indhldet.

clearfix, løser bare opgaven uden at have usemantisk markup i sig, med usemantisk markup mener jeg at det div der clear'er er unødvendig.

Så:

<div style="height:100%;" class="clearfix">
<div style="float:left;">
massere af indhold
</div>
<div>

Vil give samme resultat, bare uden det usemantiske div.

/J



Men har du ikke et link, så kan jeg da være sikker på om det virkeligt er problemet ?

Men alt tyder på at #Content bare skal have class="clearfix"

Vh.


Du mangler lige alt css-koden, som hører til clearfix. Jeg kunne ikke finde nogen version af dette trick, som virker i alle browserne. (Fx Firefox 3.1 og IE8)

Desuden virker option (d) fra denne side noget nemmere: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/



Okay, desværre kan jeg ikke finde anden løsning, end at du giver hver side en DIV ID og så laver stylesheet'et således, at den skifter højden på CONTENT forskelligt på hver side.

Jeg ved det, den er super klodset, men for at være 100% ærlig bryder jeg mig ikke om alle dine DIVs - jeg synes, at der er for mange, og det kan være at det er det - dvs. at de roder i hinanden :)

Ellers tror jeg at det muligvis ville kunne løse dine problemer med Z-INDEX: det har før hjulpet mig i din situation, men jeg ved ikke hvordan du vil have dem lagt :) Hvis du finder løsningen, vil jeg meget gerne have den at vide (;

Beklager ikke at kunne hjælpe!



Det her skulle gerne virke

Fold kodeboks ind/udKode 


og så en "clear: both;" i #bottom



google efter en klasse der hedder:

clearfix

Brug den på #Content divet.

Og det skal ikke være auto, men height:100% !


/J



Læste også lidt om clearfix før jeg oprettede spørgsmålet, men synes ikke helt jeg fik fat i det :S

Kan du lede mig hen i hvad det er jeg ska ind og skrive i mit eksempel så?

Mht højden - hvorfor er det ikke okay at den er auto fremfor 100% ?



Men har du ikke et link, så kan jeg da være sikker på om det virkeligt er problemet ?

Men alt tyder på at #Content bare skal have class="clearfix"

Vh.



Indlæg senest redigeret d. 11.02.2009 09:49 af Bruger #5789
Hej igen...

Jeg har lige smidt siden op her:

http://www.valuable.dk/zulu/

Jeg prøvede med class="clearfix" i content, men det ændrede ikke det store hos mig desværre :/



Hej Per,

kan du ikke lige 'zippe' koderne + stylesheet og så sende et link :) så ser jeg på det (ps. der kommer selvfølgelig en forklaring på hvad jeg gør i koden :) )

EDIT: Forresten ændrede det med clearfix heller ikke noget hos mig (;



Indlæg senest redigeret d. 14.02.2009 12:05 af Bruger #14693
Jo, det kan du tro...

Jeg har pakket de vigtigste billeder, index siden og stylesheet her:

www.valuable.dk/rettelse.zip

Håber det kan lade sig gøre ;)



<< < 12 > >>
t