Tre kolonner, FF tøyser m den midterste? [LØST]

[kroekkete]

Hei,

 

er det noen som ser hva jeg gjør galt her? I Opera og IE plasserer den miderste kolonnen seg som ønsket, mens i Firefox virker det som den gis en ekstra margin på et par hundre pixler. Hvis jeg ikke gir <div id="midten"> en min-width vises den i tillegg med en bredde på 0 pixler... Det er helt sikkert noe jeg gjør galt, men hva?

 

Siden ser dere her, og CSS-filen ligger her.

Dette er forresten innholdet i CSS-filen:

*	{
margin: 0;
padding: 0;}

#beholder	{	
width: 800px;	
margin: 10px auto;	
margin-top: 6px;	
background-color: white;}

#bilde	{
float: left;
overflow: hidden;	
width: 800px;
height: 160px;	
background: white url(red-topp4.jpg) no-repeat;}


#innhold	{
margin: 0 auto;
float: left;	
overflow: hidden;
width: 800px;
background: white url(red-innhold4.jpg) }

#venstrepanel	{	
overflow: hidden;
border: 1px solid black;
float: left;  
width: 147px;
margin-left: 10px;}

#midten	{
overflow: hidden;
min-width: 300px;
border: 1px solid green;	
margin-left: 180px;
margin-right: 245px;}

#hoyrepanel	{
border: 1px solid blue;	
overflow: hidden;
float: right;  
width: 207px;
margin-right:10px;}	

#fot	{
clear: both;
background: white url(red-fot4.jpg) no-repeat;
height: 90px;}

På forhånd takk for hjelpen!

 

Mvh Primaxx

 

EDIT: Jeg forsøkte å bytte ut margin-left: 180px; og margin-right: 245px; i <div id="midten"> med margin: 10px auto; og da forsto jeg litt mer. I Fire fox legger <div id="midten"> seg da pent i midten, mens den strekker seg over hele siden i Opera og IE.

Med andre ord: I FF tas det ikke hensyn til de flytende elementene rundt <div id="midten">. Hvordan skal jeg få den til å gjøre det?

Endret 12. februar 2005 av primaxx

[Haraldson]

Du kunne jo begynne med å plassere de tre divene i riktig rekkefølge i HTML-en..? Det er ikke logisk at høyre-diven kommer før midten for eksempel.

[kroekkete]

Hadde det opprinnelig, men da viste ikke høyre-diven seg før etter at midt-diven var ferdig med innholdet sitt.

Grunnen til at jeg valgte venstre-høyre-midten var rett og slett at de hadde gjort det hos Maxdesign.

 

EDIT:

Så lenge div'ene er flytende må de jo nødvendigvis komme før midt-diven, som ikke flyter...

Endret 12. februar 2005 av primaxx

[ketilkn]

#venstrepanel	{
position: absolute;
       top: 180px;
   

overflow: hidden;
border: 1px solid black;
 
width: 147px;
margin-left: 10px;

}

#midten	{
overflow: hidden;
min-width: 300px;
border: 1px solid green;	
margin-left: 180px;
margin-right: 245px;}

#hoyrepanel	{
       position: absolute;
border: 1px solid blue;	
overflow: hidden;
       margin-left: 565px;
        margin-right: 10px;
width: 207px;
}	

 

Her bruker jeg absolute i stedet. Jeg tror det er litt mer robust enn float. Blant annet har IE en bug med float og clear som kan få tekst til å forsvinne. Jeg får ikke testet dette med IE og kan bare håpe det ikke ser helt håløst ut der.

 

Det er ofte lurt å bruke Firefox når du utvikler med CSS. det er enklere å tilpasse CSS for IE når man har designet i Firefox enn motsatt. Fine tillegg til Firefox som gjør design lettere er "Web Developer" (uunværlig) "EditCSS" og ColorZilla.

[ketilkn]

Jeg kikket ikke på HTML-koden før jeg lagde mitt bidrag. Jeg støtter Berg som mener at divene bør komme i et annet rekkefølge. Men det er jo tydelig man i denne float tutorial har fått det til å fungere. Det så nokså bra ut også.

 

Her er en annen med 3 spalter: http://glish.com/css/7.asp

Endret 12. februar 2005 av ketilkn

[kroekkete]

Jeg skulle så gjerne fått det til med flytende kolonner til venstre og høyre...

 

Det som er annerledes enn det de har hos Maxdesign er at jeg har en ekstra div, nemlig <div id="innhold">. Denne har jeg for å få til at bakgrunnsblidet strekker seg med innholdet. Kan problemet mitt ligge her?

(I 1. innlegget mitt står det

float: left;

i <div id="innhold">. Nå er det endret til

clear: none;

)

Endret 12. februar 2005 av primaxx

[ketilkn]

#midten {
overflow: hidden;
min-width: 300px;
border: 1px solid green; 
margin-left: auto;
margin-right: auto;}

 

Ser ut til å gjøre susen i Firefox. Jeg har ikke sett effekten av dette i Safari (Den originale varianten fungerer der). Det vil si at det er marginen som roter det til for designet ditt. Men det har du kanskje allerede skjønt?

[kroekkete]

#midten {
overflow: hidden;
min-width: 300px;
border: 1px solid green; 
margin-left: auto;
margin-right: auto;}

 

Ser ut til å gjøre susen i Firefox. Jeg har ikke sett effekten av dette i Safari (Den originale varianten fungerer der). Det vil si at det er marginen som roter det til for designet ditt. Men det har du kanskje allerede skjønt?

Takk!

 

Da ser det bra ut i FF. -Men i Opera og IE brer midten seg utover hele siden så snart det er tomt for innhold i de flytende venstre- og høyre-divene.

 

Det som er problemet nå er at både Opera og IE oppfører seg likt. Jeg kan klare å lage css som Opera og FF skjønner, men ikke IE. Jeg klarer derimot ikke å lage CSS som FF skjønner, men ikke Opera og IE...

[kroekkete]

Da var det på plass. Takk for hjelpen! :-)

 

Dette var det jeg måtte gjøre:

position: fixed

i <div id="midten"> så løste alt seg!

Ketilkn, takk for at du satte meg på sporet!

 

Her er hele oppsettet:

* {
margin: 0;
padding: 0;}

#beholder { 
width: 800px; 
margin: 10px auto; 
margin-top: 6px; 
background-color: white;}

#bilde {
overflow: hidden; 
width: 800px;
height: 160px; 
background: white url(red-topp4.jpg) no-repeat;}


#venstrepanel { 
overflow: hidden;
border: 1px solid black;
float: left;  
width: 147px;
margin-left: 10px;}

#midten {
position: fixed
overflow: hidden;
border: 1px solid green; 
margin-left: 180px;
margin-right: 240px;
clear: none;}

#hoyrepanel {
border: 1px solid blue; 
overflow: hidden;
float: right;  
width: 207px;
margin-right:10px;} 

#innhold {
clear: both;
overflow: hidden;
width: 800px;
background: white url(red-innhold4.jpg) }

#fot {
clear: both;
background: white url(red-fot4.jpg) no-repeat;
height: 80px;}

Fremdeles er rekkefølgen i html-koden venstre-høyre-midten.

 

 

Mvh Primaxx

[ketilkn]

Fint at du legger inn den endelig løsningen i tråden. Jeg kan forøvrig rapportere om at siden ser fornuftig ut også i Safari under Mac os x. Safari fungerer ofte likt med Mozilla Gecko.

 

Når det gjelder Internet Explorer i samme operativsystem er det ca en 200 piksel høy margin på toppen av kolonnen i midten. Siden er ellers helt inntakt så all tekst er synlig. Man kan anta at det ikke er så mange som bruker Mac IE lengre.

Endret 12. februar 2005 av ketilkn

[kroekkete]

Takk for tilbakemeldingen.

 

Jeg så via en lenke (W3Schools) ???????? hadde lagt ut tidligere i dag at i februar 2005 var det 2,9% av verdens nettbrukere som brukte Mac.

Så som du sier, hvor mange av de bruker IE? -Og ikke minst; hvor mange av de igjen besøker siden min...?

(Selv om jeg strengt tatt også egentlig burde ta høyde for dem, ikke minst med tanke på fremtidige sider jeg kommer til å lage som kanskje blir besøkt oftere enn min egen.)

[halvardm]

Men på linken så ser du at Mac brukerene stiger.

Og da stiger vel IE bruken og. Forhåpentligvis ikke..

[Bolson]

Selv om du fant løsningen, kan jeg henvise til denne artikkelen på A List Apart. Er også en av de beste sidene for å finne tips til virkelig å utnytte CSS.