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

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Padding og bredde problem
Fra : Lars Hoffmann


Dato : 17-02-04 11:38

Hej
Jeg kan ikke lige gennemskue hvad det er jeg gør galt på min side, men
sammenlign lige disse to screenshots:

http://ejemplos.kreadonia.com/kreaie55.jpg
http://ejemplos.kreadonia.com/kreaie60.jpg

Som i kan se i det første (IE 5.5) er bredden på teksten i højre side ikke
korrekt, hvorimod IE 6,0. viser siden korrekt.

XHTML: http://www.kreadonia.com
CSS: http://www.kreadonia.com/css/default.css
(http://www.kreadonia.com/css/index.css hentes også, men da problemet
eksisterer uafhængigt af sidstnævnte tvivler jeg på at problemet er i denne)

teksten i højre side er inde i en div med klassen "rightFixed"

Både side og CSS validerer how W3.org

Nogen der kan give mig et hint?

Med venlig hilsen
Lars Hoffmann




 
 
Lars Olesen (17-02-2004)
Kommentar
Fra : Lars Olesen


Dato : 17-02-04 11:44

Lars Hoffmann wrote:

> XHTML: http://www.kreadonia.com
> CSS: http://www.kreadonia.com/css/default.css

Jeg ved ikke om det kan have noget med det at gøre, men det er en god
ide at bruge XHTML 1.0 i stedet for 1.1:

http://www.alistapart.com/articles/doctype/

Det har et eller andet med at gøre, at 1.1 skal serveres med
content-type xml, men det får IE 6.0 til at gå i quirks-mode.

--
Lars Olesen
Konkurrence på <http://www.fodboldenslegestue.dk>
Kan det gøres bedre? Navigation og brugervenlighed!

Jens Gyldenkærne Cla~ (17-02-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-02-04 12:01

Lars Olesen skrev:

> Jeg ved ikke om det kan have noget med det at gøre,

Det har det ikke.

> men det er en god ide at bruge XHTML 1.0 i stedet for 1.1:

Helt enig.


> Det har et eller andet med at gøre, at 1.1 skal serveres med
> content-type xml, men det får IE 6.0 til at gå i quirks-mode.

Nej, du får blandet to ting sammen.

IE (alle versioner) kan slet ikke forstå content-type
application/xhtml+xml, og sider sendt på den måde. Prøv fx at åbne
linket her med IE: OL: <http://www.w3.org/TR/2002/NOTE-xhtml-media-
types-20020801/xhtml-media-types.xhtml> #

XHTML 1.1 bør ikke sendes som text/html - der er den normale mime-
type for traditionelle html-filer. XHTML 1.0 har en
kompatibilitetsmode specielt beregnet til at fungere med
eksisterende browsere. Den tillader at man sender xhtml-dokumenter
som text/html - men den mode gælder altså ikke for XHTML 1.1.

Problemet med IE6 og quirks mode kommer af at IE kun benytter
første linje når den skal vælge hvilken mode den skal vise et
dokument i. Hvis første linje er en xml-erklæring (fx <?xml
version="1.0" encoding="UTF-8"?>) så vil IE gå i quirks mode,
uanset hvilken doctype-erklæring der følger efter. Derfor bør man
undlade xml-erklæringen og erstatte den med en anden
tegnsætangivelse (fx med <meta http-equiv="content-type" ...>).

Hvis der - som her - her forskel på hvordan IE6 og tidligere IE'er
viser en side, er det dog som regel fordi IE6 kommer i
standardmode, mens ældre browsere altid vil benytte quirks mode (de
har ikke andre muligheder). En ren IE-løsning er at få IE6 til at
gå i quirks mode - men så får man problemer med at få andre
browsere til at vise siden som IE. Hvis man gerne vil skrive
standardkode, bør man sørge for at lave dokumenter der vises i
standardmode i alle de browsere der understøtter det, og så patche
visningen til resten. For windows-IE'er før version 6 kan det gøres
effektivt og enkelt med conditional comments.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Jens Gyldenkærne Cla~ (17-02-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-02-04 12:03

Jens Gyldenkærne Clausen skrev:

> Prøv fx at åbne linket her med IE:

Hm - der gik ged i linkformateringen. Her kommer en klikbar
udgave:

<http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/xhtml-media-types.xhtml>
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Jens Gyldenkærne Cla~ (17-02-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-02-04 11:47

Lars Hoffmann skrev:

> Som i kan se i det første (IE 5.5) er bredden på teksten i
> højre side ikke korrekt, hvorimod IE 6,0. viser siden korrekt.

Tillykke - du har nu opdaget effekten af Doctype Switching. Du
bruger fornuftigt nok en standardsættende doctypeerklæring (selv om
du efter min mening burde bruge XHTML 1.0 Strict i stedet for XHTML
1.1). Det får IE6 til at gå i standardmode og dermed rette sig
efter css-specifikationerne mht. boksmodellen. IE5.5 og tidligere
har imidlertid ikke mulighed for at gå i standardmode - her findes
kun det der i IE6 kaldes Quirks Mode, hvor bredden af sideelementer
beregnes forkert.

Løsningen er at give IE5.x særbehandling - fx med conditional
comments.

Her er et par links om doctype switching:

<http://www.hut.fi/u/hsivonen/doctype.html>
<http://www.html.dk/artikler/00036/>
<http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp>

Her er en side om conditional comments:

<http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp>

Hvis du søger tilbage i gruppen, kan du finde mange indlæg om
doctype switching og en del om conditional comments.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lars Hoffmann (17-02-2004)
Kommentar
Fra : Lars Hoffmann


Dato : 17-02-04 12:32

"Jens Gyldenkærne Clausen" <jens@gyros.invalid> escribió

> Tillykke - du har nu opdaget effekten af Doctype Switching.
Tak

> Du
> bruger fornuftigt nok en standardsættende doctypeerklæring (selv om
> du efter min mening burde bruge XHTML 1.0 Strict i stedet for XHTML
> 1.1).

Ok, jeg vil ændre den til 1.0

> Det får IE6 til at gå i standardmode og dermed rette sig
> efter css-specifikationerne mht. boksmodellen. IE5.5 og tidligere
> har imidlertid ikke mulighed for at gå i standardmode - her findes
> kun det der i IE6 kaldes Quirks Mode, hvor bredden af sideelementer
> beregnes forkert.

Skal det forstår således at i IE (og ifølge standard CSS såpecifikationer)
er en boks bredde = width + padding, hvorimod den i IE5 og tidligere kun er
lig med width? Det samme sker vel med height?


> Løsningen er at give IE5.x særbehandling - fx med conditional
> comments.

ok, det er da træls med alle de hacks der skal til for at få gamle browsere
med.



>
<http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp>
>
> Hvis du søger tilbage i gruppen, kan du finde mange indlæg om
> doctype switching og en del om conditional comments.

læse læse læse..

hvis jeg således skriver:

<!--[if lt IE 6]
<link REL="stylesheet" TYPE="text/css" HREF="NonStandardCSS.css" />
[endif]-->

vil ovenstpende blive forstået af IE5 og 5.5, men blive ignoreret af IE6+,
mozilla, konqueor, opera og andre?

Hvad så med IE4 der jo ikke forstår conditonal comments? Måske det kan
kombineres me noget @import a la:


<link href="css/GamleBrowsere.css" rel="stylesheet" type="text/css"> <!--
NN4.X, IE4.x -->
<!--[if gte IE 6]-->
<style type="text/css">@import "css/standar.css";</style> <!-- IE6+,
mozilla, opera, etc -->
<!--[endif]-->
<!--[if lt IE 6]
<link REL="stylesheet" TYPE="text/css" HREF="NonStandardCSS.css" /> <!--
IE5.5, IE5 -->
[endif]-->

Ser det fornuftigt ud?

Med venlig hilsen og tk for hjælpen
Lars Hoffmann



Jens Gyldenkærne Cla~ (17-02-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-02-04 21:54

Lars Hoffmann skrev:

> Skal det forstår således at i IE (og ifølge standard CSS
> såpecifikationer) er en boks bredde = width + padding,

Hvis du udskifter "IE" med "IE6 i standardmode" og lægger border
til breddeberegningen, så er den hjemme.

Ifølge css-definitionerne skal padding og border ikke medregnes i
bredden (width) af en boks. Angiver man fx width: 200px; padding:
10px; border-width: 5px; får man totalt en boks der er 230px bred -
og den indre bredde (den plads der er til rådighed for indhold -
tekst eller billeder - i boksen) er 200px.

Internet Explorer i quirksmode vil omvendt tolke width: 200px som
et ønske om at få en boks der totalt er 200px bred, og derfor lægge
border og padding "ind" i boksen. Det giver en totalbredde på 200px
og en indre bredde på 170px.

På MS' egen side om doctype switching er der en tegning der viser
de to forskellige modeller over for hinanden - den er god at blive
klog på:
<http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp>


> Det samme sker vel med height?

Ja - det gælder både for bredde og højde.


[snip IE-conditional]

> vil ovenstpende blive forstået af IE5 og 5.5, men blive
> ignoreret af IE6+, mozilla, konqueor, opera og andre?

Præcis. Alle andre browsere end IE vil opfatte det som en normal
html-kommentar og blot ignorere koden.


> Hvad så med IE4 der jo ikke forstår conditonal comments?

Jeg bekymrer mig mere om Mac-IE'er - hvor conditionals heller ikke
virker. IE4 er en meget bedaget browser - den ville jeg ikke tage
mange hensyn til.

Se evt. Martin Hintzmanns side om at skjule css for udvalgte
browsere:
<http://users.cybercity.dk/%7Edsl58854/articles/skjulecss/skjulecss.html>


> <!--[if gte IE 6]-->
> <style type="text/css">@import "css/standar.css";</style> <!--
> IE6+, mozilla, opera, etc -->
> <!--[endif]-->

I blokken herover skal du _ikke_ benytte conditionals - så er det
kun IE6 der ser den. Fjern conditional'en her, men behold den til
ældre browsere. Det betyder at ældre browsere får et ekstra css-
ark, men det gør næppe nogen stor forskel i downloadtiden. Det er
også lettere at arbejde med et fællesark til standardbrowserne og
så nøjes med at have "reparationskode" i de ark der gives til ældre
browsere. I tilfældet med boksmodellen er det måske nok at angive
nye værdier til bredde og højde - så kan resten tages fra
standardfilen.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lars Hoffmann (18-02-2004)
Kommentar
Fra : Lars Hoffmann


Dato : 18-02-04 10:10

"Jens Gyldenkærne Clausen" <jens@gyros.invalid> escribió

> Ifølge css-definitionerne skal padding og border ikke medregnes i
> bredden (width) af en boks. Angiver man fx width: 200px; padding:
> 10px; border-width: 5px; får man totalt en boks der er 230px bred -
> og den indre bredde (den plads der er til rådighed for indhold -
> tekst eller billeder - i boksen) er 200px.

OK, så har jeg forstået det rigtig.


> > <!--[if gte IE 6]-->
> > <style type="text/css">@import "css/standar.css";</style> <!--
> > IE6+, mozilla, opera, etc -->
> > <!--[endif]-->
>
> I blokken herover skal du _ikke_ benytte conditionals - så er det
> kun IE6 der ser den.

Det er jeg ikke enig i. Læg mærke til at jeg afslutter kommentaren efter
første linie, således at alle de browsere der ikke forstår conditionals
læser næste linie, men SVJV bliver @import ignoreret af IE4, netscape4, og
de andre browsere der er i den generation. dvs at ovenstående CSS ark vil
blive tilføjet til IE6, Mozilla, Opera, Konqueor og alle de andre browsere
der forstår @mport.

> Fjern conditional'en her, men behold den til
> ældre browsere. Det betyder at ældre browsere får et ekstra css-
> ark, men det gør næppe nogen stor forskel i downloadtiden.

Problemet er at pre IE5 er der ikke nogen browser der forstå conditionals,
men ok, jeg har fanget meningen, der skal vel bare leges lidt frem og
tilbage med dette.

Med venlig hilsen
Lars Hoffmann



Jens Gyldenkærne Cla~ (18-02-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-02-04 11:59

Lars Hoffmann skrev:

>>> <!--[if gte IE 6]-->
>>> <style type="text/css">@import "css/standar.css";</style>
>>> <!-- IE6+, mozilla, opera, etc -->
>>> <!--[endif]-->

>> I blokken herover skal du _ikke_ benytte conditionals - så er
>> det kun IE6 der ser den.

> Det er jeg ikke enig i. Læg mærke til at jeg afslutter
> kommentaren efter første linie,

Det havde jeg overset - men det betyder blot at conditional'en
ikke opfattes korrekt.

<!--[if gte IE 6]--> virker ikke som kommentar i IE - teksten
bliver vist som den står herover. Jeg tror ikke at du kan lave
conditionals hvor indholdet bliver læst af browsere der ikke
forstår conditionals.


> således at alle de browsere der ikke forstår conditionals
> læser næste linie,

Alle browsere - både dem der forstår conditionals og dem der
ikke forstår dem - vil læse linje 2 i blokken herover. Det
gælder også de IE-versioner du gerne vil slippe for (IE5.x).


> men SVJV bliver @import ignoreret af IE4, netscape4,

IE4 forstår nogle typer af import (men ikke den du har brugt) -
Netscape 4 ignorerer enhver import-linje.

Se oversigten her:
OL:
<http://users.cybercity.dk/%7Edsl58854/articles/skjulecss/skjulec
ss.html> #


> Problemet er at pre IE5 er der ikke nogen browser der forstå
> conditionals,

Ja - hvis man vil tage særhensyn til disse browsere, må man
benytte javascript eller css-hacks. Se ovenstående oversigt for
ideer til css-hacks.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lars Hoffmann (19-02-2004)
Kommentar
Fra : Lars Hoffmann


Dato : 19-02-04 10:49

"Jens Gyldenkærne Clausen" <jens@gyros.invalid> escribió

> Det havde jeg overset - men det betyder blot at conditional'en
> ikke opfattes korrekt.

Nu har jeg så fået den conditional til at virke korrekt og siden vises
perfekt i IE 5.5.

tak for det.

Til min gru ser jeg dog at siden i IE5.0 ikke klarer prøven særlig godt. Når
siden loader ser den i første omgang fin ud, men min mouseover effekt i
menuen får hele siden til at rykke nedad. har IE5.0 problemer med atributen
display:block; i CSS?
Med venlig hilsen
Lars Hoffmann



Jens Gyldenkærne Cla~ (19-02-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-02-04 16:29

Lars Hoffmann skrev:

> Nu har jeg så fået den conditional til at virke korrekt og
> siden vises perfekt i IE 5.5.

Tillykke.


> Til min gru ser jeg dog at siden i IE5.0 ikke klarer prøven
> særlig godt.

Har du nogen ide om hvor mange IE5-brugere der er på sitet? (jeg
har det ikke selv). Overvej hvor meget tid du bruger på meget gamle
browsere.


> Når siden loader ser den i første omgang fin ud,
> men min mouseover effekt i menuen får hele siden til at rykke
> nedad.

Fungerer siden uden mouseover? I så fald kan du vel bare slå den
fra i IE5 med endnu en conditional.

> har IE5.0 problemer med atributen display:block; i CSS?


Aner det ikke. Men så vidt jeg ved er der ret store spring mellem
5.0 og 5.5 mht. css-understøttelsen. Det samme gælder for så vidt
også mellem 5.5 og 6.0, men her er springet vist primært (kun?)
synligt når man sætter IE6 i standardmode.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lars Hoffmann (19-02-2004)
Kommentar
Fra : Lars Hoffmann


Dato : 19-02-04 17:05

"Jens Gyldenkærne Clausen" <jens@gyros.invalid> escribió

> Har du nogen ide om hvor mange IE5-brugere der er på sitet? (jeg
> har det ikke selv). Overvej hvor meget tid du bruger på meget gamle
> browsere.

Jeg ved ikke hvor mange IE5.0 besøgende der er, men siden virker _næsten_ i
IE5.0 og derfor tror jeg ikke der skal alt for meget til at få den til at
klappe helt.

> Fungerer siden uden mouseover? I så fald kan du vel bare slå den
> fra i IE5 med endnu en conditional.

Naturligvis fungerer det uden javascript, ellers ville personer som Bertel
Lund Hansen jo ikke kunne se min side . Det er ikke kun ved det
javascript siden stejler i IE 5.0, så jeg tror løsningen er at installere
5.0 på en gammel maskine jeg har derhjemme og lege lidt frem og tilbage med
problematikken.

Anyway, endnu en gang tak for din hjælp.
Med venlig hilsen
Lars Hoffmann



Søg
Reklame
Statistik
Spørgsmål : 177559
Tips : 31968
Nyheder : 719565
Indlæg : 6408938
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste