container-div utvider seg ikke i FF

svamp · 2. august 2004

Jeg har en side som er sentrert, og der midtre del strekker seg nedover.Sideoppsettet er slik:

-header, width 700px

-innhold-div, w 700px

--->venstre tekst-div, w 552px

--->høyre tekst-div, w 122px

-footer, w 700px

Der innhold er den som strekker seg nedover.

Venstre og høyre tekst-div har float:left og float:right.

DVS, innhold-div'en har width 700px og er der for å holde venstre og høyre tekst-div på plass slik at de ikke flyr ut og legger seg helt til venstre og høyre i vinduet. Både header, innhold og footer har position:relative og margin:0 auto;

Bakgrunnen til høyre tekst-div er grå, og bakgrunnen til venstre er hvit.

Bakgrunnen har jeg lagt på innhold-div'en, slik at den grå bakgrunnen i høyre tekst-div skal utvide seg nedover selv om høyre tekst-div er kortere enn venstre.

Dette fungerer i IE og Opera. Men ikke i FF, der innhold-div'en ikke utvider seg i det hele tatt! Dette resulterer i at det ikke blir noen bakgrunn på venstre og høyre tekst-div.

Kan noen hjelpe meg med å få innhold-div'en til å strekke seg?

Her er CSS og HTML:

CSS:

body {
background : #FFFFFF;
font-family : Tahoma, Trebuchet MS, verdana, arial, sans-serif;
font-size : 9pt;
color : #000000;
}

html, body {
margin: 0;
padding: 0;
}

h1 {
border-left : 2px solid #F1BB00;
border-right : 2px solid #F1BB00;	
background : url(header.jpg) no-repeat;
width : 700px;
height : 150px;
margin: 0 auto;
 position : relative;
}

#footer {
border-left : 2px solid #F1BB00;
border-right : 2px solid #F1BB00;
border-bottom : 2px solid #F1BB00;
background : #FFFFFF;
margin : 0 auto;
position : relative;
text-align : center;
height : 20px;
width : 700px;
font-size : 9pt;
clear : both;
}

#path {
border-top : 2px solid #F1BB00;
border-left : 2px solid #F1BB00;
border-right : 2px solid #F1BB00;
border-bottom : 2px dotted #F1BB00;
padding : 0px;
height : 15px;
width : 700px;
margin: 0 auto;
background : #E0E0E0;
 position : relative;
clear : both;
color : #EB7B02;
}

#innhold {
border-left : 2px solid #F1BB00;
border-right : 2px solid #F1BB00;
padding : 0px;
width : 700px;
margin: 0 auto;
 position : relative;
background : url("bg.jpg") repeat-y;
color : #FFFFFF;
}

#hkol {
width : 122px;
padding : 6px;
float : right;
color : #000000;
}

#hoved {
padding : 6px;
float : left;
width : 552px;
color : #000000;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Ny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>

<body>
<h1>
</h1>

<div id="path">
        sideindikator her
</div>

<div id="innhold">
 <div id="hoved">
 Hovedtekst her
 </div>

 <div id="hkol">
 Diverse her
 </div>
</div>
<div id="footer">
</div>
</body>

</html>

:cry:

Endret 2. august 2004 av svamp

Arve Systad · 2. august 2004

Etter en kjapp kikk på koden, så trur eg det er PGA position:relative; på alle elementa.. Prøv helst å lage en flytande layout - eksperimenter litt med float og clear egenskapane, og les litt om flytande oppsett. Posisjonerte layouts er veldig ofte litt trøbbel med å få til å funke skikkelig

http://www.thenoodleincident.com/tutorials...sson/boxes.html <= :woot:

harald_ · 2. august 2004

prøv med overflow:visible; på de divene det gjelder

eller har jeg missforstått nå? :s

Haraldson · 2. august 2004

Da vil alt mulig innhold som muligens ikke opprinnelig var synlig flyte ut over rammene. Uansett tror jeg ikke det er problemet her, men nettopp det arve87 påpekte

svamp · 3. august 2004

http://www.thenoodleincident.com/tutorials...sson/boxes.html <=

Ett spørsmål: Hva er voice-family og voice-inherit? Jeg har aldri hørt om det i css før.

Haraldson · 3. august 2004

Det har med hvilken stemme blinde mennesker som surfer på siden din skal høre. Jeg mener man må ha tags og sånt for dette, da...

svamp · 4. august 2004

Nå har jeg fjerna alt som heter position fra css'en, og lagt til clear: both på alt untatt de to div'ene med float:right/left.

Ingenting har endret seg., siden ser helt lik ut som den gjorde.

Kan det være en Firefox-bug jeg har med å gjøre? Har lest litt andre steder, blant annet i diskusjonen av artikkelen faux columns på alistapart, der noen viser css-løsninger med header, midtdiv m/2 kolonner som strekker seg og footer. Eksempler derfra virka heller ikke i FF.

Har merka at når jeg har tekst rett i #innhold, utvider den seg nedover. Men ikke om jeg legger teksten inn i en div inni #innhold. :thumbdown:

Tror jeg bare gir opp å få til dette i FF, hvis ingen har noen gode ideer da?

Arve87, på absentvoid.com har du en container-div (#main_wrap), som inneholder bakgrunn for menykolonne og hovedtekstkolonne. Denne ser ut til å utvide seg i FF. Eneste forskjellen fra min kode ser ut til å være at du har en bunndiv og header inne i main_wrap. Kan det at jeg ikke har det ha noe å si for meg?

Haraldson · 4. august 2004

Bunndiven kan ha mye å si, om den har egenskapen clear:both; ...

» http://www.complexspiral.com/publications/containing-floats/

svamp · 4. august 2004

:w00t:

La en div med clear:both inn i #innhold under kolonnene, nå strekker #innhold seg i FF også. Så kort vei kan det være mellom :realmad: og :fun:

Takk begge to

Logg inn

container-div utvider seg ikke i FF

Anbefalte innlegg

svamp

Lenke til kommentar

Videoannonse

Arve Systad

Lenke til kommentar

harald_

Lenke til kommentar

Haraldson

Lenke til kommentar

svamp

Lenke til kommentar

Haraldson

Lenke til kommentar

svamp

Lenke til kommentar

Haraldson

Lenke til kommentar

svamp

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Overrasket? Nei, det er FrP på gang igjen 1 2 3 4 10

Hvem er aktive 0 medlemmer