/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
CSS i IE/NS
Fra : Thomas Voller

Dato : 22-09-02 13:15
Hej NG.


Jeg sidder og leger lidt med CSS, mest for legens skyld. Jeg er stødt ind i
et problem. Jeg har følgende kode:

#tekst {
background-color: #cccccc;
background-image: none;
position: absolute;
visibility: visible;
width: 528px;
left: 200px;
top: 0px;
z-index: 2;
padding: 20px;
border-top-width: 0px;
border-right-width: 2px;
border-bottom-width: 0px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
}

Problemet er, at border og padding bliver opfattet meget forskelligt i NS og
IE. NS gør det, at den lægger rammen og padding uden på boksen, så boksen
bliver bredere end width er angivet til. Dvs. at boksen i NS bliver 2*2px +
2*20px + 528px = 572px bred.

IE gør det, at den lægger rammen og padding ind i boksen, så den width
(528px) jeg har angivet holdes.

Kan man gøre noget ved det problem?

Mvh. Thomas.




 
 
Stig Nygaard (22-09-2002)
Kommentar
Fra : Stig Nygaard

Dato : 22-09-02 14:10
Hej Thomas


Thomas Voller wrote:
> Problemet er, at border og padding bliver opfattet meget forskelligt i NS og
> IE. NS gør det, at den lægger rammen og padding uden på boksen, så boksen
> bliver bredere end width er angivet til. Dvs. at boksen i NS bliver 2*2px +
> 2*20px + 528px = 572px bred.
>
> IE gør det, at den lægger rammen og padding ind i boksen, så den width
> (528px) jeg har angivet holdes.
>
> Kan man gøre noget ved det problem?

Ja, hvis du putter en !doctype på som sætter IE6 i "standard compliant
mode" så vil den opføre sig ligesom Netscape.


--
Mvh. Stig
stig[at]rockland[dot]dk
http://www.rockland.dk/ + http://bandlist.dk/
* Bedre (D)HTML ?! --> http://www.rockland.dk/stig/upghtml.html *


Stig Nygaard (22-09-2002)
Kommentar
Fra : Stig Nygaard

Dato : 22-09-02 16:12
Hej!


Stig Nygaard wrote:
> Ja, hvis du putter en !doctype på som sætter IE6 i "standard compliant
> mode" så vil den opføre sig ligesom Netscape.

Der er faktisk en mulighed mere:
http://www.xs4all.nl/~ppk/css2tests/box.html


--
Mvh. Stig
stig[at]rockland[dot]dk
http://www.rockland.dk/ + http://bandlist.dk/
* Bedre (D)HTML ?! --> http://www.rockland.dk/stig/upghtml.html *


Rune Glerup (22-09-2002)
Kommentar
Fra : Rune Glerup

Dato : 22-09-02 14:27
Thomas Voller skrev:

> Problemet er, at border og padding bliver opfattet meget forskelligt i NS og
> IE. NS gør det, at den lægger rammen og padding uden på boksen, så boksen
> bliver bredere end width er angivet til. Dvs. at boksen i NS bliver 2*2px +
> 2*20px + 528px = 572px bred.
>
> IE gør det, at den lægger rammen og padding ind i boksen, så den width
> (528px) jeg har angivet holdes.

Det er en gammel bug i IE der kun optræder den denne er i quirks mode. I
quirks mode efterligner IE6 de gamle bugs fra IE5.x og du får derfor et
forkert resultat i IE.

Den rigtige CSS–opførsel er den du ser i Netscape.

> Kan man gøre noget ved det problem?

Som jeg skrev i <news:MPG.17f1d50d11b3bdeb9897a2@sunsite.dk> så skal du
sørger for at IE gå i standards-compliant mode for at få glæde af dens
meget gode CSS–understøttelse.

Du får Explorer til at gå i standards–compliant mode ved at gøre
følgende ting:

* undlade XML–prologen <?xml version="1.0" encoding="iso-8859-1"?> hvis
der er tale om et XHTML–dokument. Explorer kan ikke forstå prologen og
den går derfor i quirks mode selvom du har angivet en rigtig !DOCTYPE

* angive en !DOCYPE–erklæring inkl. URL til DTD, fx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

--
/Rune
w|http://kaboom.dk/
Har du ikke adgang til SSI? Prøv
<http://kaboom.dk/works/wwwhitepapers/preuploadincluding/>

Thomas Voller (22-09-2002)
Kommentar
Fra : Thomas Voller

Dato : 22-09-02 15:24
> * undlade XML-prologen <?xml version="1.0" encoding="iso-8859-1"?> hvis
> der er tale om et XHTML-dokument. Explorer kan ikke forstå prologen og
> den går derfor i quirks mode selvom du har angivet en rigtig !DOCTYPE

Ja, jo... Det der bare undrer mig, er at w3c.org selv skriver XHTML
dokumenter med ovenstående prolog:
http://www.w3.org/TR/xhtml11/conformance.html

Men jeg kan jo godt se det virker, som du siger. Jeg har bare vænnet mig til
w3c.org er guder...

Takker.


Mvh. Thomas.



Rune Glerup (22-09-2002)
Kommentar
Fra : Rune Glerup

Dato : 22-09-02 16:17
Thomas Voller skrev:

Jeg skrev
> > * undlade XML-prologen <?xml version="1.0" encoding="iso-8859-1"?> hvis
> > der er tale om et XHTML-dokument. Explorer kan ikke forstå prologen og
> > den går derfor i quirks mode selvom du har angivet en rigtig !DOCTYPE
>
> Ja, jo... Det der bare undrer mig, er at w3c.org selv skriver XHTML
> dokumenter med ovenstående prolog:
> http://www.w3.org/TR/xhtml11/conformance.html

Sagen er den at prologen er valgfri i XML–dokumenter. Hvis du angiver
den vil de brugere du har som anvender IE6 (hvilket højst sandsynligt
vil sige omkring 40-50% af dine brugere) vil få et forkert resultat.

Et andet problem for dig er så at yderligere 40-50% af dine brugere
bruger pt. bruger IE5.x selvom dennes markedsandel er støt faldende vil
der alligevel være IE5.x brugere i gennem de næste 6-10 mdr.

Jeg ville vælge at bruge vælge at bruge Tantek Çeliks Box Model Hack
<http://www.tantek.com/CSS/Examples/boxmodelhack.html>:

#tekst {
   /* CSS som forstås af både IE5.x og IE6 */
}

#tekst {
   font-size : 528px; /* IE5’s forkerte bredde */
   voice-family: "\"}\""; /* IE5 stopper her pga. en bug */
   voice-family: inherit; /* voice-family reset’es */
   font-size : 484px; /* Rigtig bredde til IE6 og Netscape */
}

html>body #tekst {
   font-size : small; /* Rigtig bredde til Opera 5 */
}

> Men jeg kan jo godt se det virker, som du siger. Jeg har bare vænnet mig til
> w3c.org er guder...

w3C udgiver standarder og ligger faktisk ret langt fra den virkelighed
man oplever når man laver webdesign. Her drejer det sig om at sørge for
at lave det resultat der bliver bedst muligt for flest mulige ... også
selvom det betyder at man bliver nødt til at gå på kompromis og ofre sin
lækre kode og tage et par praktiske hacks i brug. Brugerne er jo
ligeglad med pæn kode, de vil have funktionalitet.

Som webdesigner er det vigtigt at man sætter sig ind i hvilke
work–arounds der kan bruges uden at siderne bliver ubrugelige på
bestemte systemer og så ellers teste i IE5.x, IE6 og Mozilla og meget
gerne også i Opera.

--
/Rune
w|http://kaboom.dk/
Har du ikke adgang til SSI? Prøv
<http://kaboom.dk/works/wwwhitepapers/preuploadincluding/>
Søg
Reklame
Statistik
Spørgsmål : 177511
Tips : 31968
Nyheder : 719565
Indlæg : 6408590
Brugere : 218887
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.