fel bredd på tabell i firefox?

[Badtant]

hejsan!

 

jag har en sidan med två kolumner (två st td i en tabell). problemet är att det inte blir rätt bredd på dem i firefox medans det funkar fint i explorer och opera.

 

exempelsida:

http://www.phoenix.a.se/test/swe_kontakt.php

 

css:

http://www.phoenix.a.se/test/style.css

 

det är alltså de två kolumnerna med classen "column" som spökar.

 

.column {

width: 305px;

margin: 0px;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

padding-bottom: 20px;

}

 

någon som vet varför det blir fel i firefox?

 

[Anjuna Moon]

Detta är en av anledningarna till att man inte skall använda tabeller för layout. Egentligen borde jag inte ge dig svaret så du blir tvungen att koda sidan enligt W3C-standarder =) men jag är snäll idag:

 

Du har lagt din sidfotsbild (menu.gif) i en colspan:ad cell som hör till samma tabell som innehållet ovan. Dina två tabellceller har du angett till 305px vardera, medan bilden är bredare än 2x305 vilket sträcker ut tabellen och sabbar allt.

 

Så, antingen gör du bilden 610px bred, eller så ändrar du bredden i .column till 325px

 

Men som sagt, du skall inte använda tabeller till layout.

 

[Badtant]

hmm, fast jag har ju satt ut padding på column så tillsammans med den så blir kolumnen 325 px. 305 + 10 + 10.

 

eller?

 

[Anjuna Moon]

Padding har inget med de yttre måtten på ett område att göra, det definierar bara de inre marginalerna.

 

[Badtant]

hmm ok. men det blev inte så mycket bättre när jag ändrade...

 

nu har jag gjort divar som jag placerar absolute istället och använder inte padding någonstans.

 

har bara fixat denna sida än så länge:

http://www.phoenix.a.se/test/swe_aktuellt.php

 

problemet är att jag vill att menyn (div id="bottom") ska positioneras utefter hur mycket innehåll det är på sidan och inte absolut. hur ska jag få detta att funka egentligen?

 

[Anjuna Moon]

problemet är att jag vill att menyn (div id="bottom") ska positioneras utefter hur mycket innehåll det är på sidan och inte absolut

Hur menar du? Hos mig är den centrerad på bredden oavsett storlek på fönstret.

 

[Badtant]

hmm, alltså. jag vill kunna fylla på med text i de två kolumnerna och att då botten-menyn då alltid ska positionera sid typ 20 pixlar under den kolumn som har mest innehåll. nu positioneras botten-menyn absolut och förljer alltså inte innehållet i kolumnerna.

 

hur gör jag får att uppnå det jag vill. antar att jag inte kan använda position: absolute på botten-menyn?

 

[Anjuna Moon]

Jag föreslår att du använder dig av relativ positionering och floating.

 

Använd följande lager

 

<div id="wrap">

...<div id="top"></div>

...<div id="content">

.......<div id="headl"></div>

.......<div id="left"></div>

.......<div id="right"></div>

...</div>

...<div id="bottom"></div>

</div>

 

och stilarna

[log]

#content {
float:left;
padding-left: 10px;
padding-right: 10px;
}
#top {
float:left;
width: 650px;
}
#headl {
float:left;
width: 650px;
margin-top: 10px;
margin-bottom: 10px;
}
#left {
float: left;
width: 305px;
}
#right {
float: right;
width: 305px;
}
#bottom {
float:left;
margin-top:20px;
}

[/log]

 

[Badtant]

sen är jag lite konfunderat över det här med om padding har med width att göra eller inte...

 

enligt denna sida har jag rätt angående standard-boxar:

http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41

 

[Anjuna Moon]

enligt denna sida har jag rätt angående standard-boxar:

Jepp, sorry, du har rätt.

 

[Badtant]

hmm. nu verkar allt funka som jag vill förutom att inte margin-bottom: 15px; på content fungerar i firefox och opera. snart blir jag tokig på det är...

 

[Anjuna Moon]

Det funkar för mig i det här exemplet (FF 1.0.7/Opera 8.0):

 

margin-bottom: 0px

http://c2.nordicplaza.com/eforum/tmp1/test1.html

 

margin-bottom: 20px

http://c2.nordicplaza.com/eforum/tmp1/test2.html

 

[Badtant]

nu har jag nog äntligen fått till det!

tack så mycket för all hjälp!