/ 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
div i div
Fra : Denn!s H


Dato : 16-11-05 19:18

Hej


#a1 { width:200px; border:solid 1px green; }
#a2 { float:left; width:20px; height:20px; background-color:yellow;
margin:10px; }
#a3 { float:right; width:20px; height:20px; background-color:blue;
margin:10px; }


<div id="a1">
<div id="a2"></div>
<div id="a3"></div>
</div>

Hvordan for jeg a1 ramme til at omkranse a2 og a3, det virker kun i IE?
Hvorfor er den vertikale margin dobbelt så stor, 20px, i IE?



--

vh
Denn!s H



 
 
Ukendt (16-11-2005)
Kommentar
Fra : Ukendt


Dato : 16-11-05 19:30

Denn!s H wrote:
> #a1 { width:200px; border:solid 1px green; }
> #a2 { float:left; width:20px; height:20px; background-color:yellow;
> margin:10px; }
> #a3 { float:right; width:20px; height:20px; background-color:blue;
> margin:10px; }
>
>
> <div id="a1">
> <div id="a2"></div>
> <div id="a3"></div>
> </div>
>
> Hvordan for jeg a1 ramme til at omkranse a2 og a3, det virker kun i IE?
> Hvorfor er den vertikale margin dobbelt så stor, 20px, i IE?

Jeg har ikke lige fået taget mig sammen til at finde ud af hvorfor det
virker, men prøv at tilføje overflow:hidden til din omkransende boks:

#a1 { width:200px; border:solid 1px green; overflow:hidden}

--
http://www.skovenborg.frac.dk

Ukendt (16-11-2005)
Kommentar
Fra : Ukendt


Dato : 16-11-05 19:44

Ulrik Skovenborg wrote:
> Jeg har ikke lige fået taget mig sammen til at finde ud af hvorfor det
> virker, men prøv at tilføje overflow:hidden til din omkransende boks:
>
> #a1 { width:200px; border:solid 1px green; overflow:hidden}
>

Forresten virker det også med overflow:auto - men jeg kan ikke
umiddelbart finde en grund til dette i CSS-specifikationen. Normalt vil
overflow:hidden jo skjule alt det overskydende indhold, som ikke kan
være i den omkransende boks, men overflow:auto normalt vil tilføje en
scrollbar hvis indholdet fylder for meget. At den så har en anden effekt
med float'ende-bokse kan jeg ikke umiddelbart se nogen dokumentation på.

--
http://www.skovenborg.frac.dk

Frank (17-11-2005)
Kommentar
Fra : Frank


Dato : 17-11-05 10:54

Ulrik Skovenborg skrev:
>>Jeg har ikke lige fået taget mig sammen til at finde ud af hvorfor det
>>virker, men prøv at tilføje overflow:hidden til din omkransende boks:
>>
>>#a1 { width:200px; border:solid 1px green; overflow:hidden}
>>
> Forresten virker det også med overflow:auto - men jeg kan ikke
> umiddelbart finde en grund til dette i CSS-specifikationen. Normalt vil
> overflow:hidden jo skjule alt det overskydende indhold, som ikke kan
> være i den omkransende boks, men overflow:auto normalt vil tilføje en
> scrollbar hvis indholdet fylder for meget. At den så har en anden effekt
> med float'ende-bokse kan jeg ikke umiddelbart se nogen dokumentation på.

Det virker også med 'position:absolute' på "a1" (bortset fra at evt.
overskydende indhold i "a2" og "a3" naturligvis klippes ikke)...
Det ser ud som om 'overflow:hidden/auto' laver en /implicit/ positionering...

Denn!s H:
> Hvorfor er den vertikale margin dobbelt så stor, 20px, i IE?

IE bug! Tilføj 'display:inline' på "a2" og "a3".

--
Venlig hilsen | Kind regards | Cordialement
Frank
_______________________________________
K-Meleon - /The Browser You Control!/
"http://kmeleon.sourceforge.net/"

Denn!s H (17-11-2005)
Kommentar
Fra : Denn!s H


Dato : 17-11-05 22:44


"Frank" <fo-NOSP@M-tdcspace.dk> skrev i en meddelelse
news:437c5346$0$152$edfadb0f@dread11.news.tele.dk...

>> Denn!s H:
>> Hvorfor er den vertikale margin dobbelt så stor, 20px, i IE?

ups! der skulle have ståe horisontal

>
> IE bug! Tilføj 'display:inline' på "a2" og "a3".

Men ja det løser problemet, underligt.

#a1 { width:200px; border:solid 1px green; overflow:hidden; }
#a2 { float:left; width:20px; height:20px; background-color:yellow;
margin:10px; display:inline; }
#a3 { float:right; width:20px; height:20px; background-color:blue;
margin:10px; display:inline; }


Tak Frank


--

vh
Denn!s H



Denn!s H (17-11-2005)
Kommentar
Fra : Denn!s H


Dato : 17-11-05 22:41


"Ulrik Skovenborg" <"skovenborg hos gmail dot com"> skrev i en meddelelse
news:437b7dd6$0$41147$14726298@news.sunsite.dk...
> Ulrik Skovenborg wrote:
>> Jeg har ikke lige fået taget mig sammen til at finde ud af hvorfor det
>> virker, men prøv at tilføje overflow:hidden til din omkransende boks:
>>
>> #a1 { width:200px; border:solid 1px green; overflow:hidden}
>>
>
> Forresten virker det også med overflow:auto - men jeg kan ikke umiddelbart
> finde en grund til dette i CSS-specifikationen. Normalt vil
> overflow:hidden jo skjule alt det overskydende indhold, som ikke kan være
> i den omkransende boks, men overflow:auto normalt vil tilføje en scrollbar
> hvis indholdet fylder for meget. At den så har en anden effekt med
> float'ende-bokse kan jeg ikke umiddelbart se nogen dokumentation på.

overflow:hidden passer bedst i min kode.

Tak for hjælpen Ulrik


--

vh
Denn!s H



Jørn Andersen (17-11-2005)
Kommentar
Fra : Jørn Andersen


Dato : 17-11-05 01:10

On Wed, 16 Nov 2005 19:17:52 +0100, "Denn!s H" <@> wrote:

>Hvorfor er den vertikale margin dobbelt så stor, 20px, i IE?

<url:
http://www.positioniseverything.net/explorer/doubled-margin.html>

--
Jørn Andersen,
Brønshøj

Denn!s H (17-11-2005)
Kommentar
Fra : Denn!s H


Dato : 17-11-05 22:49


"Jørn Andersen" <jorn@jorna.dk> skrev i en meddelelse
news:dhinn1dkggnkqra9a06t30j5pnfct5dcg9@4ax.com...
> On Wed, 16 Nov 2005 19:17:52 +0100, "Denn!s H" <@> wrote:
>
>>Hvorfor er den vertikale margin dobbelt så stor, 20px, i IE?
>
> <url:
> http://www.positioniseverything.net/explorer/doubled-margin.html>



ok - så det må være "float" der ødelægger det for IE.

Tak for forklaringen.


--

vh
Denn!s H



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

Månedens bedste
Årets bedste
Sidste års bedste