[LØST] Snodig feil i IE eller meg =)

emilhauk · 26. august 2007

Sitter med et (for meg) snodig problem med IE. Er usikker på om det påvirker flere versjon av IE da jeg kun har testet på IE 6.

Jeg har tre div tagger (a, b, c). a og c skal være fastsatt (200px i dette eksemplet) og b skal være variabel mellom de. Har skrevet følgende kode som fungerer i FF og Opera

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Expanding center div test</title>
<style type="text/css">
 body {
 	margin: 0;
 	padding: 0;
 }
 
 #a, #b, #c {
 	position: absolute;
 	width: 100%;
 }
 
 #a {
 	top: 0;
 	height: 200px;
 	background-color: #F00;
 }
 
 #b {
 	top: 200px;
 	bottom: 200px;
 	background-color: #0F0;
 }
 
 #c {
 	bottom: 0;
 	height: 200px;
 	background-color: #00F;
 }
</style>
</head>
<body>

<div id="a"> </div>
<div id="b"> </div>
<div id="c"> </div>

</body>
</html>

Edit:

Er er link til live eksempel: expandingCenterDiv

FF og Opera fyller hele den tomme plassen, mens IE legger bare en linje som følger av

Her er et par av sidene jeg har vært på:

* Reinspire

* TheScripts

* CSSCreator

* Internet-Developement

Desverre finner jeg ikke noe som treffer min problemstilling. Jeg ønsker ikke å bruke et javascript approach i denne saken.

Håper noen av dere har vært borti og løst problemet tidligere :-)

-Emil

Endret 27. august 2007 av emilhauk

Ståle · 26. august 2007

1 div float: left;

1 div med 100% width

1 div med float: right;

emilhauk · 26. august 2007

1 div float: left;
1 div med 100% width

1 div med float: right;

Takk for svar, men dette løser problemet horisontalt, ikke vertikalt. Hvis du tester eksempel-koden som er postet i den første posten ser du hva jeg mener.

Haraldson · 26. august 2007

Hvorfor laster du ikke opp eksempelet? Tviler på at mange her gidder å lagre koden og styre på for å se på det, når du kunne ha gjort det for oss (det er du som trenger hjelp).

datech · 26. august 2007

Hei

En mulig metode er vel å lage et bilde som fylles med farge #0F0 for så endre body i CSS til:

body {
margin: 0;
padding: 0;
background: #0F0 url(bk.gif) repeat-y 0 0;
}

Tror dette fungerer for eksempelkoden din. Prøv med å lage et bilde på f.eks 2x2 px som fylles med #0F0

Forøvrig tror jeg koden din fungerer i IE 7, som den er.

emilhauk · 26. august 2007

Hvorfor laster du ikke opp eksempelet? Tviler på at mange her gidder å lagre koden og styre på for å se på det, når du kunne ha gjort det for oss (det er du som trenger hjelp).

9362611[/snapback]

Det kan jeg selvfølgelig gjøre :-)

expandingCenterDiv

Håper du ser hva jeg mener med dette.

På forhånd takk :cool:

Haraldson · 26. august 2007

#content {
 	top: 0;
 	bottom: 0;
 	padding: 200px 0;
 	background-color: #0F0;
 }

Dette er for IE6, og funker i alle fall hos meg. Har ikke testa om dette også går i andre nettlesere, men i tilfelle kan du jo bare bruke underscore-hacken eller lignende.

Edit: Ser jo at du har * html-hacken allerede, så du får bare kombinere det jeg kom fram til + det du har i den blokka og se om du får løst det

Endret 26. august 2007 av Haraldson

emilhauk · 26. august 2007

Hei

En mulig metode er vel å lage et bilde som fylles med farge #0F0 for så endre body i CSS til:
body {
margin: 0;
padding: 0;
background: #0F0 url(bk.gif) repeat-y 0 0;
}
Tror dette fungerer for eksempelkoden din. Prøv med å lage et bilde på f.eks 2x2 px som fylles med #0F0

Forøvrig tror jeg koden din fungerer i IE 7, som den er.

9363210[/snapback]

Takk for tilbakemelding!

Det er jo fint at IE kommer seg etterhvert da Koden som er skrevet oppfyller standardene for xhtml og css uten quirks mode.

Er ikke helt sikker på om du forstod hva jeg mente, for jeg ser ikke helt hvordan den endringen du foreslår kan påvirke resultatet. Det er godt mulig at det bare er meg altså, men om du hadde hatt muligheten til å ta en titt på fila jeg lastet opp for å se hva som faktisk skjer?

Haraldson · 26. august 2007

Jeg tror jeg var heldig med størrelsen på IE da jeg testa, samtidig som jeg var litt rask. Testa mer og så at det ikke fungerte 'så godt'.

emilhauk · 26. august 2007

#content {
 	top: 0;
 	bottom: 0;
 	padding: 200px 0;
 	background-color: #0F0;
 }
Dette er for IE6, og funker i alle fall hos meg. Har ikke testa om dette også går i andre nettlesere, men i tilfelle kan du jo bare bruke underscore-hacken eller lignende.

Edit: Ser jo at du har * html-hacken allerede, så du får bare kombinere det jeg kom fram til + det du har i den blokka og se om du får løst det

9364210[/snapback]

Det var aldri meningen å publisere * html hacken. Koden skal så langt det lar seg gjøre overleve uten quirks mode.

padding løser ikke problemene fordi #content skal skalere mellom #header og #footer i dette eksempelet.

emilhauk · 26. august 2007

Jeg tror jeg var heldig med størrelsen på IE da jeg testa, samtidig som jeg var litt rask. Testa mer og så at det ikke fungerte 'så godt'.

9364304[/snapback]

Det er korrekt :cool:

datech · 26. august 2007

Takk for tilbakemelding!

Det er jo fint at IE kommer seg etterhvert da Koden som er skrevet oppfyller standardene for xhtml og css uten quirks mode.

Er ikke helt sikker på om du forstod hva jeg mente, for jeg ser ikke helt hvordan den endringen du foreslår kan påvirke resultatet. Det er godt mulig at det bare er meg altså, men om du hadde hatt muligheten til å ta en titt på fila jeg lastet opp for å se hva som faktisk skjer?

9364276[/snapback]

Hei

Hvis du prøver med

body {
margin: 0;
padding: 0;
background-color: #0F0;
}

Så mener jeg at det vil fungere, da med det minus at du får en tynn grønn strek i ytterkant.

datech · 26. august 2007

Et siste forsøk ;-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Expanding center div test</title>
<style type="text/css">

body {
margin: 0;
padding: 0;
height: 100%;
}

#test {
background-color: #0F0;
height: 90%;
}
 
#header, #content, #footer {
position: absolute;
width: 100%;
}
 
#header {
top: 0;
height: 200px;
background-color: #F00;
}
 
#content {
top: 200px;
bottom: 200px;
background-color: #0F0;
}
 
#footer {
bottom: 0;
height: 200px;
background-color: #00F;
}
</style>
</head>
<body>

<div id="header"> </div>
<div id="test"><div id="content"> </div></div>
<div id="footer"> </div>


</body>
</html>

emilhauk · 26. august 2007

Takk for oppfølging, men jeg er redd vi ikke er helt i mål .

Poenget var ikke bare å få det grønt, men å få #content til å strekke seg dynamisk mellom #header og #footer i dette tilfellet.

Hvis du legger til en border rundt #content så skjønner du umiddelbart hva jeg mener

datech · 27. august 2007

Takk for oppfølging, men jeg er redd vi ikke er helt i mål .

Poenget var ikke bare å få det grønt, men å få #content til å strekke seg dynamisk mellom #header og #footer i dette tilfellet.

Hvis du legger til en border rundt #content så skjønner du umiddelbart hva jeg mener

9366798[/snapback]

Hei

Mulig noe ala dette vil fungere


body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

Samt

<!--[if lt IE 7]>
<style type="text/css">
#content {
height:expression(document.body.clientHeight-400);
}
</style>
<![endif]-->

Overnevte bør vel inkluderes i egen .css fil.

emilhauk · 27. august 2007

<!--[if lt IE 7]>
<style type="text/css">
#content {
height:expression(document.body.clientHeight-400);
}
</style>
<![endif]-->

Fant dette akkuratt på A List Apart selv

Tusen takk for oppfølging folkens!

-Emil

Haraldson · 27. august 2007

Dette scriptet fant jeg for noen dager siden selv, da jeg skulle løse max-height i IE. Fungerer som en drøm, og man kan alltids anta at brukere av IE6 også har JS aktivert. For man kaller jo i realiteten JS fra CSS-en.

emilhauk · 27. august 2007

De få det er snakk om som har js deaktivert får lide til de oppgraderer

Endret 27. august 2007 av emilhauk

Logg inn

[LØST] Snodig feil i IE eller meg =)

Anbefalte innlegg

emilhauk

Videoannonse

Ståle

emilhauk

Haraldson

datech

emilhauk

Haraldson

emilhauk

Haraldson

emilhauk

emilhauk

datech

datech

emilhauk

datech

emilhauk

Haraldson

emilhauk

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer