Oprettet tor. d. 09. juli 2009 kl. 15:41:27

flodhesten
flodhesten (13.705 point. Point ude: 550)

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?

Skrevet tor. d. 09. juli 2009 kl. 15:43:51| #1

zips
zips (31.987 point)
Er det ikke nemmer at sætte en border: 8px solid #373636; på den div

Skrevet tor. d. 09. juli 2009 kl. 15:49:47| #2

flodhesten
flodhesten (13.705 point)
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.

Skrevet tor. d. 09. juli 2009 kl. 15:54:34| #3

zips
zips (31.987 point)
Hvis det kun er IE6 er det jo nemt at laver en if IE6 og sætte en style på width: 116px;

Skrevet tor. d. 09. juli 2009 kl. 15:57:04| #4

flodhesten
flodhesten (13.705 point)
Hvordan skulle det foregå?

Og findes der ikke andre måder at lave det på, så man slipper for de problemer?

Skrevet tor. d. 09. juli 2009 kl. 16:14:40| #5

zips
zips (31.987 point)
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]-->

Skrevet tor. d. 09. juli 2009 kl. 16:20:20| #6

flodhesten
flodhesten (13.705 point)
og det er en holdbar løsning? og ikke noget der gør min kode invalid i w3c's validator?

Skrevet tor. d. 09. juli 2009 kl. 16:31:14| #7

zips
zips (31.987 point)
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/ (...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<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/ (...)

Skrevet tor. d. 09. juli 2009 kl. 16:42:56| #8

zips
zips (31.987 point)
Denne ser ud til at virke

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

Skrevet tor. d. 09. juli 2009 kl. 22:26:24| #9

flodhesten
flodhesten (13.705 point)
Ok, skriv et svar og du skal få point

Skrevet tor. d. 09. juli 2009 kl. 22:39:13| #10

zips
zips (31.987 point)
Her er et svar :-)

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

hvordan fungerer en "phone version" af en side?

Oprettet den 25. maj 2012 kl. 13.03
kurdo giver 200 point for svar | Giv et svar »

Opsætning af design

Oprettet den 24. maj 2012 kl. 20.33
EveryMA giver 60 point for svar | Giv et svar »

text top

Oprettet den 23. maj 2012 kl. 08.08
oersted giver 200 point for svar | Giv et svar »



   




Tips & Tricks fra PC World

Teaser billede

Læserne: Her er vores værste it-indkøb

Det er ikke al it-udstyr, som er det rene guld. Her er nogle af læsernes skrækhistorier.


Anmeldelser fra PC World

Teaser billede

Test: Mobil med Ferrari-design - og en Trabant-motor

Motorola har begået endnu en smartphone med lækkert design og potentiale til at være blandt de bedste. Men den når ikke i mål. Se her hvorfor.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Sådan siger du farvel til Facebook

Læs her, hvordan du dropper Facebook og i stedet anvender nogle brugervenlige alternativer, så du stadig kan være social på nettet.


Nyheder fra Computerworld

Teaser billede

Galleri: De fedeste håndholdte gennem 40 år

Her har du de mest banebrydende håndholdte computere gennem alle tider.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger