Css hacks for IE5x, funker ikke i IE6x

[magikern]

Etter en god del testing fram og tilbake har jeg funnet ut at "cross-browser pixel-perfection" er Veldig vanskelig,

 

problemet kommer nemlig i IE, w3c standarden sier at padding og border skal legges utenpå boksen, men IE legger dette inni, nå har det seg sånn at det til IE5x finnes flere hacks/workarounds og den beste av de ser sånn ut:

 

#myDIV
   border:10px solid black;
width:200px;
voice-family: "\"}\""; /*her blir #mydiv stengt for IE5x*/
voice-family: inherit; /*her blir hack'en skjult for alle andre browsere som da fortsetter under*/
width:180px;
}
html>body #myDIV {
width:180px;
}

 

men her kommer problemet mitt for IE6x har rettet opp den lille feilen som i IE5x gjorde den hack'en mulig, det de derimot ikke har gjort er å lære seg w3c standarden riktig, så da kommer man på en måte bare ett steg bakover ved css delen i IE6, nå lurer jeg på om noen har sett en hack/workaround for dette som faktisk fungerer i IE6x...

 

 

absolutt samtlige andre browsere jeg har vært borti (som ikke er urgamle) forstår w3cstandarden riktig (ihvertfall på dette punktet), men jeg driver nå med en side hvor det er mange IE brukere og skulle da gjerne fått årnet dette, sånn som jeg gjør det nå fungerer alt i alle browsere, men jeg får litt ugunstig luft i alle browsere unntatt IE...

[no_remorse]

#myDIV
   border:10px solid black;
width:200px;
voice-family: "\"}\""; /*her blir #mydiv stengt for IE5x*/
voice-family: inherit; /*her blir hack'en skjult for alle andre browsere som da fortsetter under*/
width:180px;
}
html>body #myDIV {
width:180px;
}

 

...jeg er en n00b i css ser jeg

Endret 16. januar 2004 av no_remorse

[haugsand]

Jeg har selv ikke brydd meg om å teste noen hacks, men er heller mer bevisst på bruken av width, margin og padding. Det er ikke noe verre enn å unngå og bruke padding på elementer med fast bredde.

[FuLu]

Jupp, enig med satyrium Beste er å la være å bruke det på elementer som har fast bredde.

 

Hmm, kom til å tenke på, problemet gjelder jo alltid bredden, høyden er jo ikke kritisk, så her kan man jo bruke padding og border osv. Hvis du f.eks har denne koden:

<div id="container">
<div id="menu"></div>
<div id="content"></div>
</div>

 

#menu og #content har ikke satt noe width, mens #container har satt width. Og du vil ha border i #container. Da kan du ha border oppe og nede, så bruker du bakgrunnsbilde som er like bred som #container, som du repetere nedover. Dette bilde har da en pixel på hver side som man kan se på som en slags border. Da må du bare passe på at #menu og #content har litt padding på hver sin side så tekst/data ikke tegner seg over borderen i bakgrunnen

 

PS: Liker ikke å bruke hacks, synes man helst skal unngå det.

Endret 17. januar 2004 av FuLu

[nucleuz]

Ta ein kikk på denne sida: http://www.washington.edu/webinfo/snippets/css/boxmodel.html

Har støtt på dette før og løysinga for meg var det følgande sitatet fra sida:

IE6/Windows and IE5/Mac will follow the standards if you have a compliant doctype at the start of your document. If you do not, those two browsers will act as older IE/Windows versions do and incorrectly interpret the width of a block. All of these examples assume a proper doctype (XHTML/1.0 Strict in these particular pages).

 

If you are using XHTML, you'll want to not use an <?xml?> prolog in your document, since that causes IE6/Win to revert to the incorrect box model.

Spesielt det siste med å ikkje deklarere <?xml?> er viktig vist du brukar XHTML

[magikern]

Ta ein kikk på denne sida: http://www.washington.edu/webinfo/snippets/css/boxmodel.html

Har støtt på dette før og løysinga for meg var det følgande sitatet fra sida:

IE6/Windows and IE5/Mac will follow the standards if you have a compliant doctype at the start of your document. If you do not, those two browsers will act as older IE/Windows versions do and incorrectly interpret the width of a block. All of these examples assume a proper doctype (XHTML/1.0 Strict in these particular pages).

 

If you are using XHTML, you'll want to not use an <?xml?> prolog in your document, since that causes IE6/Win to revert to the incorrect box model.

Spesielt det siste med å ikkje deklarere <?xml?> er viktig vist du brukar XHTML

bruker alltid riktige doctype's men akkurat det med <?xml der hadde jeg ikke hørt før, det må testes...

[Arve Systad]

http://home.tiscali.no/ompatut/operavsie.gif

 

Berre måtte slenge den inn her også

[haugsand]

http://home.tiscali.no/ompatut/operavsie.gif

 

Berre måtte slenge den inn her også

Det blir litt feil å bare nevne Opera, siden det finnes mange gode nettlesere.

[Arve Systad]

joa, men orka ikkje lage mange ikon med mange jordkloder på

[cnav]

Ta ein kikk på denne sida: http://www.washington.edu/webinfo/snippets/css/boxmodel.html

Har støtt på dette før og løysinga for meg var det følgande sitatet fra sida:

 

QUOTE 

 

IE6/Windows and IE5/Mac will follow the standards if you have a compliant doctype at the start of your document. If you do not, those two browsers will act as older IE/Windows versions do and incorrectly interpret the width of a block. All of these examples assume a proper doctype (XHTML/1.0 Strict in these particular pages).

 

If you are using XHTML, you'll want to not use an <?xml?> prolog in your document, since that causes IE6/Win to revert to the incorrect box model.

 

Spesielt det siste med å ikkje deklarere <?xml?> er viktig vist du brukar XHTML

 

 

Det løste en del problemer for meg.....

 

Takk nucleuz!

[magikern]

http://home.tiscali.no/ompatut/operavsie.gif

 

Berre måtte slenge den inn her også

blei bokmerke på den

 

uansett så er det ca noe som dette jeg prøver å få til:

 

<div id="left-box">
<div id="top-section">
	<div id="top-row-1">
		<div id="top-row-1-col-1">
			50% av bredden
		</div>
		<div id="top-row-1-col-2">
			50% av bredden
		</div>
	</div>
	<div id="top-row-2">
		<div id="top-row-2-col-1">
			100% av bredden
		</div>
	</div>
</div>

<div id="mid-section">
	<div id="mid-col-1">
		20% av bredden
	</div>
	<div id="mid-col-2">
		60% av bredden
	</div>
	<div id="mid-col-3">
		20% av bredden
	</div>
</div>

<div id="bottom-section">
	<div id="bottom-col-1">
		100% av bredden
	</div>
</div>
</div>
<div id="right-box">120*600 bilde på høyre side</div>

 

1px black border, mellom left-box og right-box

1px black border, mellom top-section og mid-section

1px black border, mellom mid-section og bottom-section

1px black border, mellom mid-col-1 og mid-col-2

1px black border, mellom mid-col-2 og mid-col-3

 

 

går ut ifra at hele saken dekker 1004px bredde (evt litt mindre)

left-box skal være 880px...

[nucleuz]

Ta ein kikk på denne sida: http://www.washington.edu/webinfo/snippets/css/boxmodel.html

Har støtt på dette før og løysinga for meg var det følgande sitatet fra sida:

IE6/Windows and IE5/Mac will follow the standards if you have a compliant doctype at the start of your document. If you do not, those two browsers will act as older IE/Windows versions do and incorrectly interpret the width of a block. All of these examples assume a proper doctype (XHTML/1.0 Strict in these particular pages).

 

If you are using XHTML, you'll want to not use an <?xml?> prolog in your document, since that causes IE6/Win to revert to the incorrect box model.

Spesielt det siste med å ikkje deklarere <?xml?> er viktig vist du brukar XHTML

bruker alltid riktige doctype's men akkurat det med <?xml der hadde jeg ikke hørt før, det må testes...

Ja, det tok meg mangen timar med debug før eg fann ut at det var dette som gjorde det, laga ein eLærings paltform som skulle validere XHTML 1.0 strict, men vi hadde store layout problem - ta vekk <?xml deklareringa og IE går tilbake til den *normale* måten med å tolke layouten på......

[hackinnen^]

www.alistapart.com har mange artikler som dekker dette.

 

Og når du har med "hacken" så bør du vel kreditere han som "fant opp" den, ikke redigere det bort.

[magikern]

www.alistapart.com har mange artikler som dekker dette.

 

Og når du har med "hacken" så bør du vel kreditere han som "fant opp" den, ikke redigere det bort.

ja titter innom der hele tiden, hacken skrev jeg utifra http://glish.com/css/hacks.asp

 

sant nok det med kreditering, men nå er ikke denne sia i nærheten av ferdig og forøvrig gikk jeg bort fra det igjen, men ja burde vel skrevet at det er Tantek Celik som står bak den hack'en...

[hackinnen^]

Jeg mener da selvfølgelig i kommenteringen i CSS-fila(men det regner jeg med at du skjønte).

 

Uansett.

 

 

Så til den greie med Opera vs. IE vs. *

 

IE er en helt OK browser. Det at den ikke støtter CSS helt 100% korrekt(box bug mm.) må dere bare lære dere å komme rundt, for dere vet hvor mange som bruker IE.

 

Men, fint å se at folk bruker CSS riktig.

[FuLu]

Hmm, interessant, virker fortsatt ikke i IE5.x da men nå vet man hvertfall at det virker i IE6 helt perfekt. Selv sentrering av en DIV med margin: 0 auto; fungerer i IE6 her Takker for tipset.

 

Skal man støtte IE5.x så må man fortsatt være obs på boxed model bug og at margin: 0 auto; ikke fungerer (og sikkert mange andre ting), kanskje det finnes liknende måter å gå rundt her og, men tviler.

 

PS: jeg brukte ikke xhtml strict, men transitional, fungerte for det, kanskje ie5/mac krever at det er strict?

Endret 18. januar 2004 av FuLu

[haugsand]

Hmm, interessant, virker fortsatt ikke i IE5.x da men nå vet man hvertfall at det virker i IE6 helt perfekt. Selv sentrering av en DIV med margin: 0 auto; fungerer i IE6 her Takker for tipset.

Har alltid fått det til å virke i IE på mine sider, hva var det som gjorde biffen for dere andre?

[FuLu]

Har alltid fått det til å virke i IE på mine sider, hva var det som gjorde biffen for dere andre?

Av en eller annen grunn så har jeg brukt <?xml... øverst i html fila, bare fordi jeg brukte XHTML DTD'en, aldri brukt det når jeg har hatt HTML DTD... Husker faktisk ikke hvorfor jeg har brukt det, eller ei hvor jeg har lest at jeg måtte bruke det, kanskje lest det på w3c sin side.

[haugsand]

Ah. IE går utrolig nok i quirk-mode når DTD ikke står aller øverst i dokumentet.