Søg
Avatar billede netliving Nybegynder
06. juni 2007 - 11:49 Der er 18 kommentarer og
2 løsninger

billede margin/padding forskellig i IE og Firefox

Hej.

Jeg har en yderst mærkelig fejl.

i en normal tabel har jeg indsat 3 billeder.. jeg har så via noget css lavet en 5px margin til højre for dem.

Alt dette ser fint ud i firefox, men i IE bliver det sidste billede smidt ned på næste linie..

Fejl side: http://baptistkirken.opanki.pil.dk/index.php
( Tag jer ikke at de manglende streger omkring billederne, det skyldes blot en dårlig billede redigering )
Avatar billede Slettet bruger
06. juni 2007 - 13:57 #1
Ja, IE kan ikke finde ud af at følge W3C´s anvisninger, og lægger margin UDEN på elementet, istedet for indeni. :-(
Avatar billede zjat Nybegynder
06. juni 2007 - 13:59 #2
løsninger er vist at lade firefox tro at det er IE. Kan man vist programmere ind i ens CSS.
Avatar billede Slettet bruger
06. juni 2007 - 14:12 #3
Svaret er at angive margin til 0px
Og så tilrettelægge designet derefter, eller også bruge et IE-hack.
Avatar billede olebole Juniormester
06. juni 2007 - 14:21 #4
<ole>

- mange gode gætterier, men årsagen er, at IE er gået i quirks-mode. Brug en fuld DTD, som f.eks:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

- så tolkes CSS ens i IE og FF  =)

/mvh
</bole>
Avatar billede Slettet bruger
06. juni 2007 - 14:33 #5
Åh nej! Er doc-typen ikke defineret???
Så tror da pokker, at der kommer rod i den...

Men IE lægger stadig margin UDEN på elementet, ik?
Avatar billede olebole Juniormester
06. juni 2007 - 14:46 #6
extend >> når IE er i quirks-mode, lægges padding og border indenfor elementets width og height. Når den ikke er i quirks, lægges disse til width og height.

Alle andre CSS-kompatible browsere gør som IE, når den ikke er 'gået quirks'  =)

Læs evt:
    http://msdn2.microsoft.com/en-us/library/bb250395.aspx

- under The !DOCTYPE "Switch"
Avatar billede Slettet bruger
06. juni 2007 - 14:47 #7
Nå, men her er ihvertfald en beskrivelse på dansk af margin:
http://www.html.dk/tutorials/css/lektion9.asp

Og beskrivelsen fra W3C:
http://www.w3.org/TR/CSS2/box.html

Og her er en god og detaljeret beskrivelse af problemet med IE´s underlige defination af margin:
http://www.positioniseverything.net/explorer/floatIndent.html
Avatar billede Slettet bruger
06. juni 2007 - 14:49 #8
olebole:
Ok, det vil jeg gerne læse lidt mere om - jeg fatter nemlig bl.a. stadig ikke helt, hvad quirks-mode er for noget.  :-/
Avatar billede olebole Juniormester
06. juni 2007 - 15:04 #9
Der er et eksempel, jeg har skrevet masser af ganege, men vi tager det lige én gang til for prins Knud  :)

Dette vises korrekt i IE og FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div {
    width: 200px;
    height: 200px;
    background: yellow;
}
.withBorder {
    border: 75px solid red;
}
</style>
</head>
<body>

<div>Test</div>

<div class="withBorder">Test</div>

</body>
</html>

Dette vises korrekt i FF - men forkert i IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div {
    width: 200px;
    height: 200px;
    background: yellow;
}
.withBorder {
    border: 75px solid red;
}
</style>
</head>
<body>

<div>Test</div>

<div class="withBorder">Test</div>

</body>
</html>
Avatar billede olebole Juniormester
06. juni 2007 - 15:06 #10
- og border'en er på 75px, så fejlen er til at få øje på  ;o)
Avatar billede netliving Nybegynder
10. juni 2007 - 21:36 #11
Hey, og tak for svarene.

Jeg beklager jeg ikke har reageret før nu.

Jeg har nu prøvet at ændre dokument type til det i forslog.
Men uden noget held.. der er ingen ændring..

Hvad kan der ellers være galt?
Avatar billede netliving Nybegynder
11. juni 2007 - 15:57 #12
Dav igen.

Så fik jeg det til at virke.

Læg et svar olebole og extend.
Avatar billede Slettet bruger
11. juni 2007 - 19:42 #13
Hvad var problemet?
Avatar billede netliving Nybegynder
13. juni 2007 - 13:50 #14
Det var det med document type.

Jeg fik bare ikke lagt det rigtigt ind i starten.
Avatar billede olebole Juniormester
13. juni 2007 - 14:20 #15
Okay ... så kan vi godt lægge et svar, extend  ;o)
Avatar billede Slettet bruger
14. juni 2007 - 05:43 #16
olebole + netliving:

Mit forslag var til problemet var borders. Men olebole´s forslag var DOC-typen, som ganske rigtigt også var problemet.
Derfor bør points gå til olebole, og ingen points til mig, tak. :-)

Jeg fik til gengæld lidt lærdom igennem Prins Knud demoén. ;-)
Avatar billede olebole Juniormester
14. juni 2007 - 13:29 #17
Nu skal det jo nødigt udvikle sig til en veritabel nævekamp, men du supplerede da med links - og var fra starten inde på IE's løjerlige CSS-fortolkning. Jeg synes, det ville være helt i orden, om du lægger et svar  ;o)
Avatar billede netliving Nybegynder
15. juni 2007 - 12:00 #18
Jeg vælger at give jer begge points, da du extend som olebole siger supplerede med links og andet godt :)

Tak for hjælpen!
Avatar billede olebole Juniormester
15. juni 2007 - 12:06 #19
- og tak for points  ;o)
Avatar billede Slettet bruger
19. juni 2007 - 10:46 #20
Men altså. Jeg har jo stadig ikke bidraget til løsningen, hvorfor det vil være lidt forkert at modtage points. Ej heller relevane links, har jeg bidraget med.

Så enten giv Ole alle points, eller behold dem selv.

Men forhåbentligt en anden gang, kan jeg bidrage med noget relevant. :-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
18/0720:34 Tidsbestemt Gendannelse - ny funktion i Windows Af Uvanga i Windows
18/0718:04 Ingen menubjælke i chrome Af valby i Browsere
White papers
Flere white papers »