Just nu i M3-nätverket
Jump to content

fel bredd på tabell i firefox?


Badtant

Recommended Posts

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?

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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]

 

Link to comment
Share on other sites

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...

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...