Footer blir klemt oppunder header i Firefox

[NisseMannH4X]

Topic sier vel det meste, footer kommer altså rett under header i Firefox, men i Opera og Internet Explorer virker det som det skal, noen som vet hvorfor?

 

LINK

 

CSS - footer:

#footer {
background:        url(grafikk/footer.gif);
width: 762px;
height: 73px;
margin-bottom: 10px;
}

 

HTML - hele:

<div id="wrap">
<h1>H4X0R</h1>
<div id="meny">
<div id="linker"><?php include("meny.htm"); ?></div>
</div>
<div id="innhold">
<div id="hoyre">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id eros. Proin non massa. Aenean vitae elit. Morbi ullamcorper wisi at urna. Cras at metus. Integer interdum, erat in pellentesque vehicula, metus velit sollicitudin ante, congue cursus justo sem a elit. Donec placerat, augue lobortis convallis dapibus, nunc risus pharetra tortor, id iaculis ipsum lacus a dui. Phasellus justo mauris, volutpat non, pretium quis, molestie at, eros. Vestibulum nisl velit, aliquet quis, semper quis, adipiscing non, eros. Integer tortor augue, bibendum non, semper vel, ornare et, ante. Duis sit amet urna. Sed ullamcorper tortor quis leo.</p>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id eros. Proin non massa. Aenean vitae elit. Morbi ullamcorper wisi at urna. Cras at metus. Integer interdum, erat in pellentesque vehicula, metus velit sollicitudin ante, congue cursus justo sem a elit. Donec placerat, augue lobortis convallis dapibus, nunc risus pharetra tortor, id iaculis ipsum lacus a dui. Phasellus justo mauris, volutpat non, pretium quis, molestie at, eros. Vestibulum nisl velit, aliquet quis, semper quis, adipiscing non, eros. Integer tortor augue, bibendum non, semper vel, ornare et, ante. Duis sit amet urna. Sed ullamcorper tortor quis leo.</p>
<h2>Lorem Ipsum</h2>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id eros. Proin non massa. Aenean vitae elit. Morbi ullamcorper wisi at urna. Cras at metus. Integer interdum, erat in pellentesque vehicula, metus velit sollicitudin ante, congue cursus justo sem a elit. Donec placerat, augue lobortis convallis dapibus, nunc risus pharetra tortor, id iaculis ipsum lacus a dui. Phasellus justo mauris, volutpat non, pretium quis, molestie at, eros. Vestibulum nisl velit, aliquet quis, semper quis, adipiscing non, eros. Integer tortor augue, bibendum non, semper vel, ornare et, ante. Duis sit amet urna. Sed ullamcorper tortor quis leo.</p>
</div>
<div id="venstre">
<div id="babe"><p class="babe"><?php include("babe.php"); ?></p></div>
<div id="ukens"><p class="babe"><?php include("ukens.php"); ?></p></div>
</div>
</div>
<div id="footer"></div>
</div>

[mohuhau]

Legg til clear: both; på #footer.

[NisseMannH4X]

Ok, det funka fint det, men nå vises ikke bakgrunnsbildet i #innhold, hmms?

[Mira]

Legg ut hele den relevante delen av CSS filen din, så er det lettere å hjelpe deg.

Et lite tips også, bruk noen linjeskift i html-filen din, gjør det litt mre oversiktlig:)

[NisseMannH4X]

Linje skift skal bli! Her er den relevante delen av css'n:

 

#innhold {
background:        url(grafikk/wrap.gif);
width: 762px;
}

#hoyre {
margin: 0 auto;
width: 500px;
float: right;
margin: 1em 0.6em 0 0;
color: #002354;
clear: right;
}

#venstre {
margin: 0 0 0 1em;
width: 262px;
clear: left;
}

#footer {
background:        url(grafikk/footer.gif);
width: 762px;
height: 73px;
margin-bottom: 10px;
clear: both;
}

#babe {
margin: 0 auto;
background:     url(grafikk/babe.gif);
width: 198px;
height: 178px;
float:left;
margin: 1.7em 0 0 0;
}

.babe { margin: 1em; }

#ukens {
margin: 0 auto;
background:     url(grafikk/ukens.gif);
width: 198px;
height: 178px;
float:left;
margin: 1em 0 0 0;
}

.ukens { margin: 1em; }

[Mira]

Tviler på at det er det som gjør det, men hvorfor har du så langt mellomrom mellom "Background:" og "url"?

[Mira]

Og du får da bakgrunnsbilde nå.

Hvis dette er bakgrunnsbildet ditt:

 

 

Er i hvertfall det du har satt i css-filen din

[NisseMannH4X]

tror den oprommet kommer automatisk, men det har ikke noe å si uansett. ja det er riktig bakgrunnsbilde, det skal da danne bordere nedover på sidene sånn som det er overalt untatt i Firefox

[mohuhau]

Flytt #footer inn i #innhold

[NisseMannH4X]

Nå ble det helt riktig, men når alt er som det skal er det jo typisk at IE må begynne å tulle, nå blir ukens babe og ukens bilde boksene skøvet langt nedoverm også blir footer delvis gjentatt, hms?

[NisseMannH4X]

Alt virker nå, men footer blir delvis repetert i ie, høyden er iallefall angitt riktig i css, hmms?

Endret 28. februar 2005 av NisseMannH4X

[mohuhau]

Enkleste måten å fikse dette på er sikkert å endre #footer til

#footer {
background: url(grafikk/footer.gif) #fff no-repeat;
width: 762px;
height: 73px;
padding-bottom: 10px;
clear: both;
}

Altså bytte ut margin-bottom med padding-bottom, og legge til at bakgrunnsfargen skal være hvit og at bakgrunnsbildet ikke skal repeteres.

Endret 28. februar 2005 av mohuhau