Gå til innhold

Hvorfor blir bakgrunnen borte i IE? (CSS)

kroekkete

Anbefalte innlegg

kroekkete

kroekkete

Skrevet
Skrevet

Hei, med kodesnuttene under blir div#alt borte når jeg viser siden i IE 6.0.

Det vil si, bare nesten; jeg ser en marg på toppen, en fet marg jeg ikke har bedt om...

 

Det funker både i Opera og Firefox...

 

Er det noen som kan forklare meg hva jeg burde gjøre?

 

index.html

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<link rel="stylesheet" type="text/css" media="all" href="http://inter.net/assets/teststyle.css" />
</HEAD>

<BODY>

<div id="alt">

<div id="logo"></div>

<div id="kropp">
   blablabla<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</BODY>
</HTML>

 

teststyle.css

div#alt                   {background-image: url(bgstripe.jpg);
                           background-repeat: repeat-y;
                           position: absolute;
                           top: 30px;
                           left:100px;
                           min-height: 550px;
                           width: 800px;
                           border-style: solid;
                           border-width: thin;
                           border-color: #fb9b69;
                           padding: 0px;
                           margin: 0px;
                           z-index: 1;}



div#logo                    {background-image: url(logo750.gif);
                           position: absolute;
                           top: 19px;
                           left:25px;
                           height: 70px;
                           width: 750px;
                           padding: 0px;
                           margin: 0px;
                           z-index: 2;}

div#kropp                   {position: absolute;
                           top: 100px;
                           left:120px;

                           width: 500px;
                           border-style: solid;
                           border-width: thin;
                           border-color: #fb9b69;
                           padding: 0px;
                           margin: 0px;
                           z-index: 2;}

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
kroekkete

kroekkete

Skrevet
  • Forfatter
Skrevet

Takk for forslag! :)

Det var visst det som var problemet, for da jeg tok bort min-height ble den lik også i Opera.

 

Det jeg vil er at div#alt skal vokse i takt med div#kropp... Hvordan skal jeg gå frem? :hmm:

 

(Jeg trodde CSS skulle være en åpenbaring, men jeg har aldri slitt så mye med utseende i nettleserene som jeg gjør nå...) :cry:

Lenke til kommentar
kroekkete

kroekkete

Skrevet
  • Forfatter
Skrevet
Hvis du ikke setter høyde på div'en vil den jo utvide seg etter hvor mye du skriver..?

 

Det var det jeg trodde også, etter at jeg slettet

min-height: 550px;

i div#alt.

 

I stedet er det eneste jeg ser av div#alt en linje øverst i skjermen. (Gjelder både Opera og IE...) :dontgetit:

Lenke til kommentar
Arve Systad

Arve Systad

Skrevet
Skrevet
En div uten innhold vil ikke vises. Derfor kan du prøve med height: 500px; overflow: visible;.

 

Padjos

med overflow: visible; vil jo teksten berre gå under elementet, og gå "forbi" området med bakgrunnsfarge og eventuelle borders.

 

en div skal strekke seg med innholdet så lenge du ikkje angir height. Det burde gjelde i ditt tilfelle, med tanke på at innholds-div'en din er _inni_ #alt. Da skal #alt strekke seg med innholdet, som jo er #kropp. Når da #kropp utvider seg, skal også #alt utvide seg.

Men som sagt, du må ikkje angi en høgde for noken av dei.

Lenke til kommentar
cfenzo

cfenzo

Skrevet
Skrevet (endret)

Jeg vil anbefale deg å ikke bruke position: absolute; slik du bruker det nå..

 

position: absolute; setter en absolutt posisjon for elementet og legger den oppå element med lavere z-index, og så så mange pixels fra kantene til det første foreldre-elementet som er posisjonert med absolute eller relative...

 

MEN.. absolute-posisjonerte elementer vil ikke "dra med seg" foreldre-elementer når de utvides, fordi de er absolute-posisjonerte og har egentlig ingenting med foreldre-elementet å gjøre.. (utenom det første foreldre-elementet som er posisjonert, som det "posisjonerer seg" ut i fra... )

 

eksempel:

<div id="body">
<div id="header"></div>
<div id="content">content here</div>
</div>

#body {
background: url(bgstripe.jpg) repeat-y;
position: absolute;
top: 30px;
left:100px;
width: 800px;
border: solid thin #fb9b69;
}
#header {
background-image: url(logo750.gif);
margin-top: 19px;
margin-left:25px;
height: 70px;
width: 750px;
}
#content {
margin-left:120px;
width: 500px;
border: solid thin #fb9b69;
}

 

^^ eksempelet her vil gjøre omtrent hva det du har nå gjør, i tillegg til at #body følger med nedover når #content gjør det...

Du har helt sikkert planer om å legge til en meny på venstre side, og kanskje en footer... Da er du nok nødt til å lese opp om float:..

Bruk google og Oppslagsverk over artikler, Artikler som er verdt å se igjennom, og spør gjerne i forumet om det er noe du lurer på.. ;)

 

Vet ikke om du skjønte hva jeg mente, men om du ikke gjør det, så kan jeg reformulere senere...

Endret av cfenzo
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...