div høyde justeres ikke automatisk etter innhold i firefox

phax · 9. desember 2008

Finner ikke ut hva som er problemet her, sikkert en liten filleting. Har prøvd å søke uten hell. Problemet er hvertfall at i firefox så vil ikke contentwrap justere høyden etter innholdet. Mens i Opera og IE ser det normalt ut. Har da et bakgrunnsbilde i contentwrap som skal repeteres vertikalt. All tekst vises men ikke bakgrunnen.

Hva er det jeg gjør feil?

HTML

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
<head>
	<link href="styles.css" rel="stylesheet" type="text/css">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Tittel</title>
</head>

<body>	
	<div id="wrapper">
		<div id="header"></div>			
			<div id="contenttop"></div>
				<div id="contentwrap">
					<div id="leftcontent">
						<h1>Lorem ipsum dolor sit amet</h1>
consectetuer adipiscing elit. Sed porttitor. Curabitur viverra, libero sed semper condimentum, ipsum massa scelerisque nisi, gravida vestibulum leo enim sed nunc. Aliquam justo. Quisque ultrices quam eu elit. Ut vehicula blandit purus. Nunc vulputate. Quisque tincidunt elementum odio. Sed erat libero, ultrices sed, dignissim euismod, euismod non, lacus. Etiam enim neque, auctor vitae, rhoncus at, laoreet ullamcorper, augue. Curabitur quis massa. Sed auctor leo quis odio luctus molestie. Donec dignissim sodales tellus. In varius, pede eget bibendum iaculis, nisi nibh tempor orci, hendrerit imperdiet augue dui in arcu. Vestibulum bibendum tristique purus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla aliquam blandit nunc. Donec convallis est non lacus. Proin eget odio sed ligula pharetra faucibus. Curabitur lacus lacus, ullamcorper vel, pharetra non, sagittis vitae, diam. Cras at nisl id urna pretium laoreet. Duis risus. Phasellus interdum. Quisque turpis dolor, lobortis vitae, pretium quis, congue in, nunc. Donec sed tellus at erat fringilla eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean condimentum odio id lectus.

						<H2>Morbi ac nibh.</h2> 
Donec blandit, magna nec pellentesque ultrices, pede ipsum vehicula nunc, vel pellentesque lacus enim ut mauris. Etiam pretium, felis nec cursus fringilla, mi felis sagittis dolor, in tincidunt odio lectus quis leo. Suspendisse in massa. Phasellus urna. Aenean nunc. Morbi nec mauris. Donec turpis leo, varius sit amet, dignissim sit amet, tristique eget, felis. Aenean ullamcorper volutpat lacus. Etiam blandit magna ut mi.
Morbi et nisl. Integer ultrices nibh non erat. Etiam vitae mi eget arcu sollicitudin dignissim. Etiam hendrerit suscipit pede. Aenean dignissim tortor vitae ligula. Mauris laoreet orci ac neque. Quisque tellus mauris, vulputate vitae, iaculis eu, luctus nec, nulla. Sed gravida. Nunc ligula elit, fringilla quis, scelerisque vel, vestibulum et, lectus. Nullam dictum leo ac massa. Vestibulum leo justo, scelerisque sed, vestibulum et, sagittis ut, orci. Proin id sem eget augue pulvinar pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Duis tempus orci sed nunc. In neque elit, rhoncus non, auctor eget, pellentesque eu, ante. In augue lorem, vestibulum vehicula, commodo vitae, gravida nec, enim. Aliquam erat volutpat. Praesent risus. Nam sed nunc ut felis fringilla semper. Suspendisse potenti. Fusce at lectus eget purus ullamcorper gravida. Morbi velit lorem, vulputate sit amet, posuere nec, condimentum non, arcu. Proin gravida purus ut sapien. Fusce lorem mi, volutpat fermentum, dictum sagittis, adipiscing ac, purus. Suspendisse porta lacinia odio. Quisque vitae pede. Sed vitae augue at tellus imperdiet ullamcorper. Nullam pulvinar ipsum. Aenean scelerisque augue nec nunc
					</div>
					<div id="rightcontent">test</div>
				</div>
	</div>
</body>
</html>

CSS

* { 
margin: 0; 
padding: 0; 
}
body {
background: #fff url(images/bg.png) repeat-x top; 
text-align: center;
font-family: tahoma, arial, sans-serif;	
font-size: 0.7em; 
line-height : 1.7em;
color: #555; 
}
a {
color: #000;
text-decoration: underline;
}
a:hover {
color: #4d90cd;
text-decoration: underline
}

#wrapper {
background: fff;
width: 800px;  
margin: 0 auto;
text-align: left;
}
#header {
background: #fff url(images/header.png) no-repeat top;
width: 800px; 
height: 340px;	
}  
#contenttop {
background: #fff url(images/innhold-top.png) no-repeat top;
width: 800px;
height: 20px;
}
#contentwrap {
background: #fff url(images/innhold-bg.png) repeat-y top;
width: 800px;
}
#leftcontent {
width: 510px;
float: left;
color: #fff;
}
#rightcontent {
width: 290px;
float: right;
color: #fff;
}

laurell · 9. desember 2008

Du har ikke noe som definerer høyden på den diven, prøv og legg til det

Du har feks:

#contentwrap {
	background: #fff url(images/innhold-bg.png) repeat-y top;
	width: 800px;

prøv og legg til:

height: auto;

..eller noe slikt.

ThomasQ · 9. desember 2008

#contentwrap {
background: #fff url(images/innhold-bg.png) repeat-y top;
width: 800px;
position:relative;
height:auto;
}

Fungerer det?

phax · 9. desember 2008

Nei funker desverre ikke noen av delene.

IE og Opera ser slik ut, alltså slik det skal være:

Mens Firefox gir bare dette:

phax · 9. desember 2008

Kan legge til at hvis jeg legger teksten direkte inn i #contentwrap så fungerer det, men ikke når har jeg teksten i en annen div som er inni #contentwrap. Så det er vel noe der jeg må fikse..

Jooakim · 10. desember 2008

Legg inn en overflow: auto; under leftcontent. :-)

Logg inn

div høyde justeres ikke automatisk etter innhold i firefox

Anbefalte innlegg

phax

Lenke til kommentar

Videoannonse

laurell

Lenke til kommentar

ThomasQ

Lenke til kommentar

phax

Lenke til kommentar

phax

Lenke til kommentar

Jooakim

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer