Avatar billede torotune Nybegynder
11. september 2007 - 09:47 Der er 15 kommentarer og
1 løsning

Styling af scrollbar

Hej.

Jeg kan ikke rigtig få tags som:

        scrollbar-base-color: #FFFFFF;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-arrow-color: #789920;

til at virke længere. - Er de ændret eller annuleret i de nyeste IE og Firefox?
Avatar billede jokkejensen Novice
11. september 2007 - 09:51 #1
de vil kun virke i IE.. Men både 6 og 7.

/JJ
Avatar billede torotune Nybegynder
11. september 2007 - 09:58 #2
Okay, jeg gør nok noget galt så. Jeg prøver lige at style en iFrame. Skal den i body'en på siden hvor iFrame'en eksisterer, eller siden der vises i iFrame'n, eller noget andet?
Avatar billede torotune Nybegynder
11. september 2007 - 10:06 #3
Jeg mener placeringen af Style-tagget :-)
Avatar billede jokkejensen Novice
11. september 2007 - 10:09 #4
Du skal sikkert placere den inde på det document du inkludere på din iframe.

<head>
<style>
<!--
body
{ color:black;
  background-color:#a0a0a0;
  scrollbar-face-color:#903030;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-track-color:#C0B0B0;
  scrollbar-shadow-color:rgb(0,0,0);
  scrollbar-highlight-color:rgb(0,0,0);
  scrollbar-3dlight-color:#808080;
  scrollbar-darkshadow-Color:#202020;
}
-->
</style>

</head>
Avatar billede torotune Nybegynder
11. september 2007 - 10:25 #5
Det vil ikke rigtig virke. Hvis jeg f.eks. har siden med iFrame'n:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
  <iframe id="iframe" name="iframe" src="test.htm" frameborder="0" width="628" height="410">
  </iframe>
</body>
</html>

Og så siden test.htm der vises heri med dit style-eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
<!--
body
{ color:black;
  background-color:#a0a0a0;
  scrollbar-face-color:#903030;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-track-color:#C0B0B0;
  scrollbar-shadow-color:rgb(0,0,0);
  scrollbar-highlight-color:rgb(0,0,0);
  scrollbar-3dlight-color:#808080;
  scrollbar-darkshadow-Color:#202020;
}
-->
</style>
</head>
<body>
<p>ijoijoi</p>
<p>vfv</p>
<p>fv</p>
<p>fv</p>
<p>fv</p>
<p>fv</p>
<p>fv</p>
<p>fv</p>
<p>v</p>
<p>fv</p>
<p>fv</p>
<p>fv</p>
<p>&nbsp; </p>
</body>
</html>
Avatar billede sherlock Nybegynder
11. september 2007 - 13:25 #6
Fjern DOCTYPE, så virker det.
Avatar billede sherlock Nybegynder
11. september 2007 - 13:32 #7
Eller lav den om til

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Avatar billede torotune Nybegynder
11. september 2007 - 14:56 #8
Super! Det var bare den doctype der drillede! Tak for det begge to :-)
Avatar billede mclemens Nybegynder
11. september 2007 - 15:19 #9
Torotune >> Jeg anbefaler, at du indsætter din doctype
igen, at fjerne doctypen gør at IE går i quirks, så den
ikke overholder css ordentligt. Hvis du så vil style din
scrollbar, så gør det på html elementet hvor scrollbaren
normalt hører til. At køre med quirks for at style scrollbar
med body {} istedet for html {} selector er ikke en god grund.

html { /* CSS koder til scrollbar */ }
Avatar billede mclemens Nybegynder
11. september 2007 - 15:22 #10
P.s.: Doctypen <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
gør ikke at IE går i quirksmode. Ligesom 11/09-2007 10:25:48 også virker fint.
( Dog passer html 4.01 ikke så godt til et xhtml dokument )
Avatar billede mclemens Nybegynder
11. september 2007 - 15:40 #11
Hov, min fejl - så forkert på doctypen ...

Ingen doctype giver quirks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Giver også quirks

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Giver ikke quirks

... Og 11/09-2007 10:25:48 giver heller ikke quirks

( prøv evt. " java script:alert(document.compatMode); " i adresselinjen
og så enter inde på siden, for at teste om IE er i backcompat mode / quirks)
Avatar billede torotune Nybegynder
11. september 2007 - 19:04 #12
Hej igen,

Tak for advarslen. Jeg ved dog ikke helt hvad quirks mode er, men lige på denne side ser den ikke ud til at lave noget om. Jeg anvender din

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Og det virker med stylen på scroll baren.

Når jeg kører det JS i adresselinien kommer den med en alert der siger CSS1Combat!

Jeg vidste ikke man kunne sætte attributter på html-elementet, men det vil jeg også prøve :-)
Avatar billede mclemens Nybegynder
11. september 2007 - 19:34 #13
Hmm, i IE7 siger den backCompat.
... Quirksmode / back compatible mode er en mode hvor IE
overholder mindre css og der er mere problemer med css box modellen
( padding, margin m.m. ) - men om det virker i IE6 med den doctype
lyder det som iflg. det du siger, men i IE7 ser denne her helt skæv ud.

<div style="background:red;width:100px;height:100px;padding:50px;">a</div>

... Du vil sikkert kunne se resultatet i IE6 ved at fjerne doctypen.
( Men du vil hvis du anvender den doctype kunne opleve
fejl imellem visningen på henholdsvis IE6 og IE7 )

"Jeg anvender din ... "
- Det var doctypen fra sherlock 11/09-2007 13:32:56 og ikke min doctype.

"Og det virker med stylen på scroll baren." Ja det virker også i IE7 med
både body {} samt html {} fordi IE7 er i quirks mode, dog ville det kun
virke med html {} og ikke body {} såfremt IE ikke var i quirks mode.


"Jeg vidste ikke man kunne sætte attributter på html-elementet, men det vil jeg også prøve :-)"
Jeg plejer at starte med en omgang html,body {margin:0;padding:0;}

P.s.: Jeg har selv kørt med quirks i rigtig lang tid (indtil jeg fandt ud af at
gøre <?xml prologen før doctypen browser betinget), det er ikke det sjoveste i
verden og kan give problemer med løsninger og html / css kontruktioner, men hvis
du løber ind i det kan du prøve at rette din doctype til en af de andre i
11/09-2007 15:40:12 eller en anden inde fra w3c.org .

Men prøv evt. at se på disse to eksempler i IE6:

-

<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen  titel</title>

</head><body>
<div style="background:red;width:100px;height:100px;padding:50px;">a</div>
</body></html>

-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen  titel</title>

</head><body>
<div style="background:red;width:100px;height:100px;padding:50px;">a</div>
</body></html>

...


Og evt. hvis muligt at sammenligne denne i henholdsvis IE6 og 7 samt FF.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen  titel</title>

</head><body>
<div style="background:red;width:100px;height:100px;padding:50px;">a</div>
</body></html>

( Ovenstående ser ikke godt ud i min IE7 vs. FF, men har ikke lige IE6 ved hånden ).

Husk også at vælge en doctype der passer til indholdet,
en html doctype til xhtml'en du viser i 11/09-2007 10:25:48
fungerer ikke så godt hvis du leverede xhtml som xhtml (hvilket
der ikke er så mange der gør) ... men nu er der ikke den store fordel ved
at xhtml'e ... men derimod en del ulemper/ekstra arbejde m.h.t. java scripting ...
Avatar billede torotune Nybegynder
14. september 2007 - 23:09 #14
Hej McClemens. Det er lækker med sådan en fuldbyrdet beskrivelse. Jeg vil lige tjekke op på nogle af tingene. Jeg havde overset det ikke var dig der havde skrevet de første indlæg, så sherlock er selvfølgelig også velkommen til at lægge et svar. Hovedsagen er at det virker med den anden doctype. Jeg må lige kigge nærmere på quirks mode og forholdet mellem brugen af html og xhtml.. :-) Jeg siger i hvert fald mange tak herfra.

Mvh.
Avatar billede mclemens Nybegynder
15. september 2007 - 00:07 #15
Velbekomme ... jeg ville bare lige nævne forskellen. ;)

"så sherlock er selvfølgelig også velkommen til at lægge et svar."
P.s.: Sherlock har lagt et svar og du har givet ham point. 11/09-2007 13:25:06

P.p.s.: "og forholdet mellem brugen af html og xhtml"
Se evt. også http://www.eksperten.dk/spm/719030 samt
links i den tråd (herunder Ole's artikler om xhtml).
Avatar billede torotune Nybegynder
15. september 2007 - 10:58 #16
Okay - så sent troede jeg heller ikke det var igår. Mclemens læg et svar her :-D
http://www.eksperten.dk/spm/796483
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester