bort med kant & autoutvidelse av wrap div

[Ma]

Har foreløpig 2 CSS problem i Firefox som jeg er sikker på at dere kan hjelpe meg med.

 

1) det kommer en kant øverst, over headeren, som ikke finnes der i IE. Hvordan kan jeg få headeren til å begynne helt i toppen?

 

2) Som dere kanskje ser av det vedlagte bildet, blir ikke wrap div'en større når det er mye innhold i content. I IE utvider wrap'en seg i takt med størrelsen på de andre div'ene. Hvordan kan det løses i Firefox?

 

 

Så en ting til slutt: Er det bra delt opp slik jeg har det, eller finnes det bedre løsninger? 7 divs: header, footer, rightcontent, (leftcontent og centercontent) omrammet av contleftcenter og en wrap som rammer alle.

 

<style type="text/css">

* {
 margin:0;
 padding:0;
 }


body {
 margin:0px 0px 0px 0px;
 padding:0px;
 background-color: #009977;
 text-align: center; 
     margin: 0 auto; 

 }


#wrap {
 background-color : #FFFFFF;
 height: 90%;
   	width: 80%;
 margin:0 auto;
 }


#contleftcenter {
 float:left;
 width:80%;
 }


#contentleft {
 float:left;
 background:#b900ff;
 width:25.09%;
 }


#contentcenter {
 float:right;
 background: #00FF66;
 width:74.9%;
 }


#contentright {
 float:right;
 width:20%;
 background:#3366FF;
 }


#contentheader {
 background:#b90000;
 height:150px;
 width:100%;  }
 

#contentfooter {
 position: relative;
 background:#FFCC00;
 height: 50px;
 }

</style>

[qualbeen]

har ikke svar på problemet ditt, men kan jo komme et tips:

body {
margin:0px 0px 0px 0px;
padding:0px;
background-color: #009977;
text-align: center; 
    margin: 0 auto; 

}

kan forenkles til

body {
margin:0 auto;
padding:0;
background-color: #009977;
text-align: center;
}

[Ma]

Takk for tipset! Greit med enklere kode.

 

Noen som vet hvordan løse problemene i Firefox?

 

En ting til: I Opera står ikke contentcenter helt inntil contenleft, og contentright står ikke helt inntil contentcenter, det er mellomrom mellom div'ene. Må jeg godta at noe av teksten blir borte i Firefox og IE for at det skal bli fint i Opera, eller kan det løses ved å bruke annen kode?

[Heilage]

overflow: auto;

 

dette vil gi fram en scroll. Viktig at du også definerer høyden på wrapperen.

 

Du kan sette verdiene hidden, scroll, visible og auto. Velg selv.

[Ma]

overflow: auto;

 

dette vil gi fram en scroll. Viktig at du også definerer høyden på wrapperen.

 

Takk, overflow løste litt av problemet. Men da kommer det jo scroll i Firefox hvis siden inneholder mye. Kan leve med at det kommer scroll hvis det plutselig blir lange ord o.l, men kjedelig med scroll på div'en hvis det er mye innhold nedover.

 

Hvordan definere jeg høyden på wrapen? height: 100%; hjelper ikke - da går content over wrappen. Med height: auto; forsvinner wrappen helt i Firefox

[Heilage]

overflow: auto;

 

dette vil gi fram en scroll. Viktig at du også definerer høyden på wrapperen.

 

Takk, overflow løste litt av problemet. Men da kommer det jo scroll i Firefox hvis siden inneholder mye. Kan leve med at det kommer scroll hvis det plutselig blir lange ord o.l, men kjedelig med scroll på div'en hvis det er mye innhold nedover.

 

Hvordan definere jeg høyden på wrapen? height: 100%; hjelper ikke - da går content over wrappen. Med height: auto; forsvinner wrappen helt i Firefox

5585171[/snapback]

 

Desverre må du sett nøyaktig antall pixler når du skal ha korrekt kode. %-verdier er for ustabile.

[Ma]

Takk for svar! Ja, å bruke pixel istedenfor % gav litt mer styring på plasseringen, og jeg har nå fått til en brukbar layout. Men ulempen er jo at siden ikke er like stor hos alle....

 

Jeg satt bakgrunnsbilde i body så kolonnene på siden skulle bli like lange. Men dette bildet går helt ned til kanten i IE, også når det ikke er så mye innholdet, og det ser litt rart ut når jeg har footeren i bunnen av midtre div. Hvis jeg setter footer div'en til å stå under alle 3 div'ene, funker ikke dette i mozilla.. Hvordan få footeren til å flyte nederst i alle browsere?

[Heilage]

Takk for svar! Ja, å bruke pixel istedenfor % gav litt mer styring på plasseringen, og jeg har nå fått til en brukbar layout. Men ulempen er jo at siden ikke er like stor hos alle....

 

Jeg satt bakgrunnsbilde i body så kolonnene på siden skulle bli like lange. Men dette bildet går helt ned til kanten i IE, også når det ikke er så mye innholdet, og det ser litt rart ut når jeg har footeren i bunnen av midtre div. Hvis jeg setter footer div'en til å stå under alle 3 div'ene, funker ikke dette i mozilla.. Hvordan få footeren til å flyte nederst i alle browsere?

5600915[/snapback]

 

Når du bruker faste størrelser, er alt riktig i forhold til hverandre, uansett hva slags oppløsning etc surferen bruker. Dette er alltid positivt.

 

Det skal funke i Mozilla å ha en footer under de andre DIVene, men husk at du må definere en høyde annen enn :auto; for at den skal vises.

Endret 13. februar 2006 av Marley

[Ma]

Fikk det til! Takk for all hjelp!