---

Hej HTML/CSS-eksperter.



Jeg har en privat hjemmeside: http://www.voller.dk/.
Jeg har et besynderligt problem når siden vises i Internet Explorer 6 +
muligvis andre versioner af IE. Der er både en vertikal og en horisontal
tilknyttet min yderste CSS-boks, der som container for alle de andre
CSS-bokse på siden.

I Mozilla, Opera og Netscape er der ingen problem med unødvendige
scrollbars.

Et grafik-eksempel fra nederste, højre hjørne af siden i IE:
http://www.voller.dk/UsenetItems/ScrollbarInIE.gif

Stylesheet'et er her:
http://voller.dk/SiteStyles/GenerelStyles.css

Hvorfor optræder de scrollbars i IE og hvordan slipper jeg af med dem?



Mvh. Thomas.

---

Thomas Voller wrote:
>
> Jeg har en privat hjemmeside: http://www.voller.dk/.
> Jeg har et besynderligt problem når siden vises i Internet Explorer 6 +
> muligvis andre versioner af IE. Der er både en vertikal og en horisontal
> tilknyttet min yderste CSS-boks, der som container for alle de andre
> CSS-bokse på siden.
>

Hej Thomas

Punkt 1.
Skift DOCTYPE til XHTML1.0 Strict.

Punkt 2.
Validere din side.

Punkt 3.
Nulstil margin og padding på body og form elementerne.

Hintzmann c",)

---

Martin Hintzmann Andersen wrote:
>
> Hej Thomas
>
> Punkt 1.
> Skift DOCTYPE til XHTML1.0 Strict.
>
> Punkt 2.
> Validere din side.
>
> Punkt 3.
> Nulstil margin og padding på body og form elementerne.
>
> Hintzmann c",)

Og ikke mindst fjern overflow auto på #MainBox

Hintzmann c",)

---

"Martin Hintzmann Andersen" <user@domain.invalid>...
> Punkt 1.
> Skift DOCTYPE til XHTML1.0 Strict.

Hvorfor? XHTML 1.1 virker da fint nok. ContentType er sat til text/html.
Det skal lige siges jeg har prøvet med XHTML 1.0 Strict. Det gør ingen
forskel.



> Punkt 2.
> Validere din side.

Er valideret. Validerer både som XHTML 1.1 og som XHTML 1.0 Strict.
CSS er valid CCS 2.0 uden fejl eller advarsler.



> Punkt 3.
> Nulstil margin og padding på body og form elementerne.

Padding/margin på body bruger jeg som en del af designet, så den vil jeg
ikke så gerne ændre på. Desuden er problemet jo, at der kommer scrollbars
inde i #MainBox. Derfor virker det højst usansynligt for mig, at
padding/margin på body skulle have noget med sagen at gøre. En test
afslørede dog heller ingen forskel. Det samme gælder padding/margin på
form-elementet.

Næh, jeg tror problemet ligger ved overflow: auto; på #MainBox (som du også
selv er inde på i dit andet svar). Hvis jeg fjerner overflow: auto; fra
#MainBox, så virker siden uden problemer i Opera og IE. Til gengæld virker
siden så ikke i Mozilla/Netscape. Eller det vil sige: Siden virker, men den
lysgrå/lysegrønne baggrund bag menuen og selve teksten bliver ikke vist. For
at opsummere:

1: Med overflow: auto; på #MainBox, får jeg scrollbars i IE.
2: Uden overflow: auto; på #MainBox får jeg ingen baggrund i
Mozilla/Netscape.

Pest eller kolera? :)




Tak for hjælpen indtil videre,
Thomas.

---

Thomas Voller wrote:
>
> Hvorfor? XHTML 1.1 virker da fint nok. ContentType er sat til text/html.
> Det skal lige siges jeg har prøvet med XHTML 1.0 Strict. Det gør ingen
> forskel.
>

Det virker måske fint nok men du strider imode reglerne.

WaSP har spurgt W3C og i følge dem bør man sende XHTML1.1 med
content-typen "application/xhtml+xml", hvilket desværre ikke er
understøttet i Internet Explorer.
http://www.webstandards.org/learn/askw3c/sep2003.html

Heldigvis har XHTML1.0 en bagudkompatibel HTML metode, hvor man godt må
sende siden med den almindelig content-type "text/html", som forståes af
alle browsere.
http://www.w3.org/TR/xhtml1/#guidelines

W3C forslår så at man kan lave content-negotiation til de browsere som
forstår "application/xhtml+xml".
http://www.w3.org/2003/01/xhtml-mimetype/content-negotiation

Men hvorfor i det hele taget bruge XHTML1.1, når det eneste nye siden
XHTML1.0 strict er RUBY.
http://www.w3.org/TR/xhtml11/changes.html#a_changes
RUBY bruges til at markere øst asiatiske tegn, hvilket jeg tvivler på at
du benytter.

Så for en almindelig dansk hjemmeside anbefaler jeg ikke at man benytter
XHTML1.1, men holder sig til den HTML komaptible XHTML1.0 strict.


>
> Er valideret. Validerer både som XHTML 1.1 og som XHTML 1.0 Strict.
> CSS er valid CCS 2.0 uden fejl eller advarsler.
>

Da jeg validerede din XHTML-side så havde du nogle få fejl. Noget med
<br / i>
Men det har du fået rettet

>
> Padding/margin på body bruger jeg som en del af designet, så den vil jeg
> ikke så gerne ændre på. Desuden er problemet jo, at der kommer scrollbars
> inde i #MainBox. Derfor virker det højst usansynligt for mig, at
> padding/margin på body skulle have noget med sagen at gøre. En test
> afslørede dog heller ingen forskel. Det samme gælder padding/margin på
> form-elementet.

Generelt set er det altid godt at nulstille margin/padding på body og
form elementerne, og så sæt dem til det man ønsker bagefter.

>
> Næh, jeg tror problemet ligger ved overflow: auto; på #MainBox (som du også
> selv er inde på i dit andet svar). Hvis jeg fjerner overflow: auto; fra
> #MainBox, så virker siden uden problemer i Opera og IE. Til gengæld virker
> siden så ikke i Mozilla/Netscape. Eller det vil sige: Siden virker, men den
> lysgrå/lysegrønne baggrund bag menuen og selve teksten bliver ikke vist. For
> at opsummere:
>
> 1: Med overflow: auto; på #MainBox, får jeg scrollbars i IE.
> 2: Uden overflow: auto; på #MainBox får jeg ingen baggrund i
> Mozilla/Netscape.
>
> Pest eller kolera? :)
>

I det du har liggende pt. på din side ser det ud til at virke fint.

Jeg ville dog have opbygget CSS'en lidt anderledes.

Hintzmann c",)

---

"Martin Hintzmann Andersen" <no@spam.please>
> Thomas Voller wrote:
> > Hvorfor? XHTML 1.1 virker da fint nok. ContentType er sat til text/html.
> > Det skal lige siges jeg har prøvet med XHTML 1.0 Strict. Det gør ingen
> > forskel.
>
> Det virker måske fint nok men du strider imode reglerne.
> Så for en almindelig dansk hjemmeside anbefaler jeg ikke at man benytter
> XHTML1.1, men holder sig til den HTML komaptible XHTML1.0 strict.

Tak. Jeg spurgte for at blive klogere og det blev jeg.



> > Er valideret. Validerer både som XHTML 1.1 og som XHTML 1.0 Strict.
> > CSS er valid CCS 2.0 uden fejl eller advarsler.
> >
>
> Da jeg validerede din XHTML-side så havde du nogle få fejl. Noget med
> <br / i>
> Men det har du fået rettet

Jah, der var lige en tyrkfejl i noget håndkodet HTML. Ikke noget, der betød
noget, så vidt jeg kunne se.



> I det du har liggende pt. på din side ser det ud til at virke fint.
> Jeg ville dog have opbygget CSS'en lidt anderledes.

Kan du komme nærmere ind på det? Jeg vil gerne se noget eksempler på,
hvordan det kunne klares bedre.





Tak for hjælpen,
Thomas.

---

Thomas Voller wrote:
>
>>I det du har liggende pt. på din side ser det ud til at virke fint.
>>Jeg ville dog have opbygget CSS'en lidt anderledes.
>
>
> Kan du komme nærmere ind på det? Jeg vil gerne se noget eksempler på,
> hvordan det kunne klares bedre.
>
>

Det er smagssag, men jeg ville lave det på følgende måde:
http://users.cybercity.dk/~dsl58854/testcenter/css/www_voller_dk/index.html

Jeg har brugt flydende layout med "em" som enhed. Det vil sige at MSIE
brugerne kan gøre teksten større og mindre efter behov.

Designet er testet på Win2K i standard-browserne Mozilla, Opera 7 og MISE 6.

Derudover er det lavet et eksternt stylesheet med hacks til MSIE 5.0 og
MISE 5.5.

Der udover får NS4.x og IE4.x mikro minimalistisk design.

Hintzmann c",)

---

"Martin Hintzmann Andersen" <no@spam.please>
> Thomas Voller wrote:
> > Kan du komme nærmere ind på det? Jeg vil gerne se noget eksempler på,
> > hvordan det kunne klares bedre.
>
> Det er smagssag, men jeg ville lave det på følgende måde:
>
http://users.cybercity.dk/~dsl58854/testcenter/css/www_voller_dk/index.html


Mjah... Hm. Altså, som du selv skriver er det jo en smagssag, men en af de
ting jeg godt kan lide ved den måde jeg har opbygget siden på, er at siden
automatisk tilpasser sig brugerens browservindue. Det prøver jeg at vænne
mig til.

I den udgave du har lavet, kan man selv skrue op og ned for tekststørrelsen
og opnå tilnærmelsesvist samme resultat, men hvis man f.eks. ser din udgave
i 800x600 med en tekststørrelse på 100%, skal man først til at justere
tekststørrelsen ned for at kunne se siden. Omvendt ser siden ganske lille ud
i 1600x1200 med tekststørrelse 100%.

Men tak for demonstrationen.




Mvh. Thomas.

---

Thomas Voller wrote:
>
> Mjah... Hm. Altså, som du selv skriver er det jo en smagssag, men en af de
> ting jeg godt kan lide ved den måde jeg har opbygget siden på, er at siden
> automatisk tilpasser sig brugerens browservindue. Det prøver jeg at vænne
> mig til.
>
> I den udgave du har lavet, kan man selv skrue op og ned for tekststørrelsen
> og opnå tilnærmelsesvist samme resultat, men hvis man f.eks. ser din udgave
> i 800x600 med en tekststørrelse på 100%, skal man først til at justere
> tekststørrelsen ned for at kunne se siden. Omvendt ser siden ganske lille ud
> i 1600x1200 med tekststørrelse 100%.
>

Der er fordele ulemper ved begge løsninger, som du nævner så bliver
siden i min løsning enten meget lille eller stor, hvis man ser siden i
800x600 eller 1600x1200.
Men tilgengæld bliver brødtekstens linjelængde meget lang eller kort i
disse ekstreme opløsninger.

Hvor brødteksten i min løsning har en tilpas læselængde på omkring 35em.
Hvilket er godt hvis brugeren skal læse meget tekst.

Men det er faktisk kun 2 linjer i CSS'en du skal ændre for at få din
lavet min løsning om så den har et flydende bredde.

Hvis du på #wrap sletter width'en og sætter margin til f.eks. 2em
så kan du få en side som følger browserens bredde.
Du kan se et eksempel her:
http://users.cybercity.dk/~dsl58854/testcenter/css/www_voller_dk/index2.html

Som sagt er det smag og behag, og netop derfor bør du også give dine
brugere valgmuligheden for enten en fast linjelængde eller et flydende
side layout.
Og hertil kan du feks. bruge en styleswitcher:
http://users.cybercity.dk/%7Edsl58854/articles/styleswitcher/readme.html

Hintzmann c",)