Notifikationer

Markér alle som læst Log ud

razmuz_dk Nybegynder

12. juni 2006 - 15:47 Der er 8 kommentarer og
1 løsning

IE opfører sig underligt ved brug margin-left og float

Hej eksperter,

Overvej følgende kode:
<div style="background-color: red;">
<div style="margin-left: 20px; margin-right: 0px; background-color: blue; float: left;">TESTEREN</div>
TESTEREN 2
</div>

Umiddelbart skulle man tro, at der vil blive en venstre-margen til venstre for den blå boks på 20 pixels. Sådan bliver det også i Firefox - men i Internet Explorer bliver denne margin det dobbelte af det man angiver - altså i dette tilfælde 40px! IE opfører sig kun sådan hvis man samtidig bruger float: left;. Hvis i ikke forstår hvad jeg mener vil jeg bede jer om at køre ovenstående kode i hhv. IE og FF og se forskellen, tak.

Er der nogen der kan give en forklaring og/eller en løsning på dette sådan, at IE og FF viser siden på samme måde.

Synes godt om

mclemens Nybegynder

12. juni 2006 - 16:09 #1

Ja, det er en fejl :)
http://www.eksperten.dk/spm/713785#rid6293709
http://www.eksperten.dk/spm/713785#rid6293723

Synes godt om

mclemens Nybegynder

12. juni 2006 - 16:15 #2

Eksemplet...

<!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-color: red;">
<div style="margin-left: 20px; margin-right: 0px; background-color: blue; float: left;">TESTEREN</div>
TESTEREN 2
</div>

<div style="background-color: red;">
<div style="float:left;">
<div style="margin-left: 20px; margin-right: 0px; background-color: blue;">TESTEREN</div></div>
TESTEREN 2
</div>

</body></html>

Synes godt om

mclemens Nybegynder

12. juni 2006 - 16:19 #3

Der er dog flere måder at gøre det på... i andre tilfælde hvor de har hver sin div kan man måske lege med position:relative; og position:absolute; samt noget left:20px; ... Her er lige et eksempel mere nu jeg spammer...

<!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-color: red;">
<div style="margin-left: 20px; margin-right: 0px; background-color: blue; float: left;">TESTEREN</div>
TESTEREN 2
</div>

<div style="background-color: red;">
<span style="margin-left: 20px; margin-right: 0px; background-color: blue; float: left;">TESTEREN</span>
TESTEREN 2
</div>

<div style="background-color: red;">
<div style="display:inline;margin-left: 20px; margin-right: 0px; background-color: blue; float: left;">TESTEREN</div>
TESTEREN 2
</div>

<div style="background-color: red;">
<div style="float:left;">
<div style="margin-left: 20px; margin-right: 0px; background-color: blue;">TESTEREN</div></div>
TESTEREN 2
</div>

</body></html>

Synes godt om

razmuz_dk Nybegynder

13. juni 2006 - 11:15 #4

Okay, jeg siger tak for svarene. Så var det altså ik' mig den var gal med ;)

Mit oprindelige spørgsmål bunder i følgende problemstilling, som jeg lige vil høre om du kunne komme med et godt bud på.

Jeg har en div på 600px. I den vil jeg gerne placere 3 divs ved siden af hinanden (gør jeg via float: left). De tre kasser skal ligeligt udfylde de 600px. Problemet opstår, som jeg kan forstå du er helt indforstået med, når man sætter margin'er på disse tre kasser.

Hvordan vil du foreslå jeg opstiller dette rent markup og css-mæssigt? Jeg er interesseret i at have så lidt markup som overhovedet muligt - så din førstenævnte løsning med at tilføje en ekstra div, vil jeg helst undgå. Min markup for kasserne ser pt. sådan ud:

<div class="box">
<h2>Fakta</h2>
<div class="content">
COL 1
</div>
</div>
<div class="box">
<h2>Fakta</h2>
<div class="content">
COL 2
</div>
</div>
<div class="box">
<h2>Fakta</h2>
<div class="content">
COL 3
</div>
</div>

Jeg har overvejet at lave en div udenom og så sætte dens position: relative - og så definerer bredde/left på hver af kolonnerne - men vil man da ikke få problemer med højden hvis der skal sættes endnu en række kolonner under?

Hvordan ville du opsætte sådanne tre kasser?

På forhånd tak.

Synes godt om

mclemens Nybegynder

13. juni 2006 - 12:27 #5

Uhm, kan igen gøres på mange måder ... det afhænger lidt af hvordan du vil have det til at se ud... Her er et eksempel ... en grovskitse i .jpg/.gif/.bmp format hjælper måske lidt - så kan man altid gå baglæns...

<!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>

<style type="text/css">
#outer{width:580px;margin:0px auto;background:#aaa;padding:0px 20px;}

.box{
float:left;
width:178px;
border:1px solid #000;
}

#rmbox{margin-right:20px;}
#lmbox{margin-left:20px;}

</style>

</head><body>

<div id="outer">

<div class="box" id="rmbox">
<h2>Fakta</h2>
<div class="content">
COL 1
</div>
</div>
<div class="box">
<h2>Fakta</h2>
<div class="content">
COL 2
</div>
</div>
<div class="box" id="lmbox">
<h2>Fakta</h2>
<div class="content">
COL 3
</div>
</div>

</div>
</body></html>

Synes godt om

mclemens Nybegynder

13. juni 2006 - 12:29 #6

Hov lavede en fejl der...
#outer{width:580px; -> #outer{width:560px;

Synes godt om

mclemens Nybegynder

13. juni 2006 - 12:34 #7

Eller denne ... du har jo ikke specificeret at der skal være margin-right også ... ? ... men jeg ved som sagt ikke hvad slutresultat skal være... her er ekstra markup brugt i forhold til i ovenstående... Ovenstående kan også gøre det samme som denne ved at bruge padding-left:20px; fjerne den anden padding og øge width med 20px...

<!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>

<style type="text/css">
#outer{width:600px;margin:0px auto;background:#aaa;}

.box{
float:right;
width:178px;
border:1px solid #000;
}

.fusk{float:left;width:200px;}

</style>

</head><body>

<div id="outer">

<div class="fusk">
<div class="box" id="rmbox">
<h2>Fakta</h2>
<div class="content">
COL 1
</div>
</div>
</div>

<div class="fusk">
<div class="box">
<h2>Fakta</h2>
<div class="content">
COL 2
</div>
</div>
</div>

<div class="fusk">
<div class="box" id="lmbox">
<h2>Fakta</h2>
<div class="content">
COL 3
</div>
</div>
</div>

</div>
</body></html>

Synes godt om

razmuz_dk Nybegynder

13. juni 2006 - 16:11 #8

Jeg kigger på det- tak for forslagene.

Synes godt om

mclemens Nybegynder

13. juni 2006 - 16:34 #9

Velbekom, og tak for pointene :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS