/ 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
Netscape-padding laver boks større?
Fra : Kenni Thomsen


Dato : 23-10-03 10:40

Jeg har to bokse en med overskrift og en med tekst.

Problemet er at de ikke er lige store i IE og Netscape!?

Jeg har fået det indkranset til at være et problem med padding,
Netscape lægger paddingen til. Altså har jeg en top padding på 30
px i en boks der er 100 px høj, bliver den da bare 130 px høj?!
Hvordan laver jeg det om?

---------------------------------------------------------------
Se test her: http://users.cybercity.dk/~dsl30409/test/home.html
Se hvordan det IKKE virker her:
http://users.cybercity.dk/~dsl30409/home.html
---------------------------------------------------------------
Koden er:

HTML:
<body>
   <div id="boks2"><h1>Overskrift</h1></div>
   <div id="boks4">Noget tekst eller nogle bokse...</div>
</body>

CSS:
#boks2 {
   position:absolute;
   top:10px;
   left:150px;
   width:800px;
   height:100px;
   padding-top:30px;
   padding-left:15px;
   padding-bottom:0px;
   border:1px solid silver;
   background-color:#FFF;
}
#boks4 {
   position:absolute;
   top:130px;
   left:175px;
   width:600px;
   height:400px;
   padding-left:10px;
   padding-top:50px;
   padding-bottom:0px;
   border:1px solid silver;
   background-color:#FFF;
}
--------------------------------------------------------------

MVH

Kenni Thomsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Knud Gert Ellentoft (23-10-2003)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 23-10-03 11:41

Kenni Thomsen <kpt@edb.dk> skrev :

>Problemet er at de ikke er lige store i IE og Netscape!?
>
>Jeg har fået det indkranset til at være et problem med padding,
>Netscape lægger paddingen til. Altså har jeg en top padding på 30
>px i en boks der er 100 px høj, bliver den da bare 130 px høj?!
>Hvordan laver jeg det om?

Det er IE, der fejler, Netscape viser det som det skal være iflg.
standarden.

Brug en doctype, som sætter IE 6 i standardmode og tilpas det så.

Tidl. IE-versioner end IE 6 vil altid vise det forkert.

Jeg har tilladt mig, at smide siden op på
http://home13.inet.tele.dk/smedpark/test/kenni.htm og brugt en
doctype, som sætter IE 6 i standardmode, her vil du se, at den
ser ud, som du ser siden i Netscape.
--
Knud

Jens Gyldenkærne Cla~ (23-10-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 23-10-03 12:09

Knud Gert Ellentoft skrev:

> Tidl. IE-versioner end IE 6 vil altid vise det forkert.

Man kan benytte conditional comments til at levere særskilt css-
kode til ældre windows-IE'er og på denne måde få flere browsere til
at vise det som ønsket.

Brugen af conditional comments har været oppe i gruppen flere gange
før - tjek evt. via Google.
--
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

Kenni Thomsen (23-10-2003)
Kommentar
Fra : Kenni Thomsen


Dato : 23-10-03 15:11

Jens GyldenkærneClausen wrote in dk.edb.internet.webdesign.html:
> Man kan benytte conditional comments til at levere særskilt css-
> kode til ældre windows-IE'er og på denne måde få flere browsere til
> at vise det som ønsket.
>

Jeg vil lige høre om jeg har forstået det rigtigt? (jeg tvivler lidt)

1.Jeg laver mit design om så det passer i Netscape og skriver den
rigtige docktype, uden den første linie om xml, så den ser rigtig ud i
IE6? (<?xml version="1.0" encoding="iso-8859-1"?>)

2.Så virker den ikke rigtig i IE før version 6.0?

3.Så tilføjer jeg, conditional comments: <!--[if !IE 6]>..."her
skriver jeg linket til en anden stylesheet"...<![endif]--> i <head>?
(her er jeg ufattelig usikker!)

4.Eller skal jeg lave en for hver brouser, IE, Netscape, Mozilla,
Opera...(er der flere?)?

5.Eller skal jeg bruge javascript og docktype switching?

6.Og til sidst, hvordan tjekker jeg om det virker? Jeg har jo IE6 og
kan derfor ikke se om IE5 eller før virker!

Jeg har fundet en del sider ved at søge på conditional comments og
docktype switching. Men jeg synes ikke rigtig der er nogen der
forklarer brugen ordentligt, kun en masse om hvad det er og hvordan
det skal virke, men ingen rigtige eksempler. Den eneste der kommer tæt
på med javascript er hjemmesideskolen og med conditional comments er
det microsoft.

7.Findes der en ultimativ side for emnet, gerne med tutorials og
eksempler og hvis det er muligt helst på dansk?

Uha en ordentlig smørre, men pyt jeg håber nogen gider læse og svare!

På forhånd tak

Kenni Thomsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Kenni Thomsen (23-10-2003)
Kommentar
Fra : Kenni Thomsen


Dato : 23-10-03 13:40

Først tak

Dernæst
Knud Gert Ellentoft wrote in dk.edb.internet.webdesign.html:
>
> Brug en doctype, som sætter IE 6 i standardmode og tilpas det så.
>

Jeg har bare fjernet den øverste linie:
<?xml version="1.0" encoding="iso-8859-1"?>
og så virker det!? Jeg er meget ny i html,css osv. så er der en der
kan forklare kort hvad den lille linie lige er for en gut? På
HTML.dk's tutorial om xhtml står der at man skal indsætte den, det er
så forkert eller hva'?

Hvordan sætter jeg ellers "sio-8859-1" ind, for det er jo den der
fortæller at vi bruger tegn som æ, ø og å, ikke?

MVH

Kenni Thomsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jens Gyldenkærne Cla~ (23-10-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 23-10-03 13:54

Kenni Thomsen skrev:

> Jeg har bare fjernet den øverste linie:
> <?xml version="1.0" encoding="iso-8859-1"?>
> og så virker det!? Jeg er meget ny i html,css osv. så er der
> en der kan forklare kort hvad den lille linie lige er for en
> gut?

Det kaldes en xml-deklaration og fortæller
- at du bruger xml
- hvilken version
- og hvilket tegnsæt du bruger

> På HTML.dk's tutorial om xhtml står der at man skal
> indsætte den, det er så forkert eller hva'?

Det er ikke forkert - men det er uhensigtsmæssigt at gøre det på
grund af en fejl i Internet Explorer. IE's doctypeswitch kan kun
genkende en doctypeerklæring hvis den står før alt andet i filen.
Derfor får xml-erklæringen (som skal stå før doctypen hvis den skal
være der) IE til at gå i quirks mode.

Så vidt jeg husker har jeg gjort html.dk opmærksom på det, men de
har ikke reageret[1]

> Hvordan sætter jeg ellers "sio-8859-1" ind, for det er jo den
> der fortæller at vi bruger tegn som æ, ø og å, ikke?

Sådan:

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

(placeres i <head>)

Noter:
======
[1] De har til gengæld svaret på en anden henvendelse om fejl i
tutorials, så de er til at tale med.
--
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~ (23-10-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 23-10-03 15:51

Kenni Thomsen skrev:

> 1.Jeg laver mit design om så det passer i Netscape og skriver
> den rigtige docktype, uden den første linie om xml, så den ser
> rigtig ud i IE6?


Du starter med at fjerne xml-erklæringen. Så vil alle browsere med
doctypeswitch gå i standardmode (forudsat at du nu øverst har en
gyldig xhtml-doctype).

Så tilretter du siden så den ser rigtig ud, *både* i Netscape og IE
(og Opera for den sags skyld). Ved at bruge standardmode, skulle
der ikke være store forskelle på de nævnte browsere i nye
versioner.


> 2.Så virker den ikke rigtig i IE før version 6.0?

Hvis dit design ændrede sig i IE6 da du gik fra quirks-mode (med
<?xml...>) til standardmode, så vil det nye design med stor
sandsynlighed se forkert ud i ældre IE-udgaver.

Men tjek det før du begynder at rette op på det. Hvis du ikke har
en ældre IE til rådighed, kan du lave en testside (når den rigtige
side er på plads) hvor du fjerner doctypeerklæringen. Så vil IE6
vise siden (nogenlunde) som IE5.x

> 3.Så tilføjer jeg, conditional comments: <!--[if !IE 6]>

Nu er det godt nok længe siden at IE er kommet med nye versioner,
men jeg ville alligevel foretrække at skrive

<!--[if lt IE 6]-->

Hvis nu der kommer en IE 7 på et tidspunkt, er der jo ingen grund
til at den skal blive fanget af en "not IE 6"-comment.


> ..."her skriver jeg linket til en anden stylesheet"...<![endif]-->
> i <head>? (her er jeg ufattelig usikker!)

Enten et link til et ie-stylesheet eller også bare en direkte
style-blok (i nogle tilfælde er det ganske få ændringer der skal
til).


> 4.Eller skal jeg lave en for hver brouser, IE, Netscape,
> Mozilla, Opera...(er der flere?)?

Nej. Det er kun IE der forstår conditional comments - så vidt jeg
ved findes der ikke noget tilsvarende til andre browsere. Nyere
browserversioner har ikke noget problem med css-kode til
standardmode, så når du har "fanget" IE<6 med conditional comments
er der primært Netscape 4.x og Mac-IE'er tilbage i "problemkassen".
Den førstnævnte kan man evt. skjule noget css for ved hjælp af
@import - sidstnævnte har jeg ikke nogen specielt gode råd til.
Mac-IE'er er dog langt mere css-kapable end Netscape 4, så det
meste bør se o.k. ud.


> 5.Eller skal jeg bruge javascript og docktype switching?

Javascript bør højst benyttes som en sidste finpudsning - til at
fange forskelle der ikke kan nås på anden måde.

Du benytter allerede en form for doctypeswitching - nemlig ved at
levere standardmode-html.


> 6.Og til sidst, hvordan tjekker jeg om det virker? Jeg har jo
> IE6 og kan derfor ikke se om IE5 eller før virker!

Som beskrevet ovenfor - du kan tjekke visningen i quirks mode ved
kortvarigt at fjerne doctypen. Det vil ikke være præcis det samme
som i tidligere IE-udgaver, men det skulle give en godt indtryk af
visningen.


> Jeg har fundet en del sider ved at søge på conditional
> comments og docktype switching.

Du finder nok flere om det sidste hvis du søger på doctype
switching (bemærk det manglende k).

Jeg fandt en udmærket side om conditionals her:
<http://www.javascriptkit.com/howto/cc2.shtml>.

Vedr. doctype switching plejer jeg at henvise til følgende to
sider:
<http://gutfeldt.ch/matthias/articles/doctypeswitch.html>
<http://www.html.dk/artikler/00036/>.


> Men jeg synes ikke rigtig der
> er nogen der forklarer brugen ordentligt, kun en masse om hvad
> det er og hvordan det skal virke, men ingen rigtige eksempler.

Der er ikke så meget at forklare mht. doctype switch. Man vælger
(bevidst eller ubevidst) en mode og så opfører browseren sig enten
som den skal ifølge standarderne eller også som tidligere versioner
af browsere har gjort.


Brugen af conditionals er vist på mange sider. Syntaksen kan være
lidt triggy - det bedste råd er i mine øjne at teste (her skal du
bruge en rigtig IE 5-browser) til det virker (lav en helt simpel
comment der udskriver: "Her er jeg" eller noget lignende -så kan du
se hvor den kommer med og hvor den ikke kommer med.

På siden her (nederst) er lidt af teknikken med at kombinere cc og
doctype switch vist. Her testes for IE6, men kommentaren kan jo
teste for alle mulige IE-kombinationer.
   <http://accessat.c-net.us/articles/hide-css_p3.html>
--
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

Kenni Thomsen (23-10-2003)
Kommentar
Fra : Kenni Thomsen


Dato : 23-10-03 17:52

1000 tak, det var godt og lærerigt. Så lærte jeg også lidt i dag...
Der kan dukke flere spørgsmål op, men for nu har jeg hvad jeg skal
bruge, så endnu en gang tak.

MVH

Kenni Thomsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste