Avatar billede flodhesten Nybegynder
09. juli 2009 - 15:41 Der er 9 kommentarer og
1 løsning

Kant omkring div

Hej.

Jeg ønsker et div-element med en mørk kant omkring på alle sider med 8px.

Jeg er kommet frem til at jeg vil bruge følgende kode:

<div style="width: 100px; background-color: #373636;">
<div style="margin: 8px; background-color: #FFFFFF;">Indhold</div>
</div>

Når jeg prøver koden i IE7, så ses alle de mørke kanter ganske fint, men når jeg så prøver i FireFox, så viser den kun højre og venstre kant. Toppen og bunden bliver ikke vist i den mørke farve #373636.

Øv.

Hvad skyldes det?
Avatar billede zips Juniormester
09. juli 2009 - 15:43 #1
Er det ikke nemmer at sætte en border: 8px solid #373636; på den div
Avatar billede flodhesten Nybegynder
09. juli 2009 - 15:49 #2
Det har jeg overvejet, men det giver nemlig anledning til et problem. Jeg vil gerne have min side til at virke i de fleste browsere, men så er der jo nogle problemer med den der "box model".

I nyere browsere laver dne en bredde på  100px + 8px + 8px

I IE6 giver laver den indholdet mindre og laver en bredde på 100px inklusiv borders.

Det er det problem jeg prøver at omgås, men det synes jeg sgu er lidt vanskeligt.
Avatar billede zips Juniormester
09. juli 2009 - 15:54 #3
Hvis det kun er IE6 er det jo nemt at laver en if IE6 og sætte en style på width: 116px;
Avatar billede flodhesten Nybegynder
09. juli 2009 - 15:57 #4
Hvordan skulle det foregå?

Og findes der ikke andre måder at lave det på, så man slipper for de problemer?
Avatar billede zips Juniormester
09. juli 2009 - 16:14 #5
Det kan gøres på denne måde

<!--[if IE 6]>
Special instruktion for IE 6 her
<![endif]-->

Man kan indsætte css eller et link til en css som skal virke på IE6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css" />
<![endif]-->
Avatar billede flodhesten Nybegynder
09. juli 2009 - 16:20 #6
og det er en holdbar løsning? og ikke noget der gør min kode invalid i w3c's validator?
Avatar billede zips Juniormester
09. juli 2009 - 16:31 #7
Ja den er brugt længe da ikke alt er lige nemt mellem alle de browser, men prøv at sætte dette ind og valider det her http://validator.w3.org/#validate_by_input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="IE6.css" />
<![endif]-->
</head><body>
<div style="width: 100px; background-color: #373636;">
<div style="margin: 8px;background-color: #FFFFFF;">Indhold</div>
</div>
</body></html>

Et blandt mange link omkring css kun til IE
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Avatar billede zips Juniormester
09. juli 2009 - 16:42 #8
Denne ser ud til at virke

<div style="width: 100px; background-color: #373636;padding: 8px;">
<div style="background-color: #FFFFFF;">Indhold</div>
</div>
Avatar billede flodhesten Nybegynder
09. juli 2009 - 22:26 #9
Ok, skriv et svar og du skal få point
Avatar billede zips Juniormester
09. juli 2009 - 22:39 #10
Her er et svar :-)
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