Toon posts:

[css] margin-collapsing gefloate divs in IE/mac

Pagina: 1
Acties:

vrijdag 9 september 2005 11:36

Acties:

Verwijderd

Topicstarter
ik heb een div met daarin 4 floating geneste divs. de buitenste div moet een padding van 10px krijgen, maar om een vaag probleem te omzeilen heb ik de padding op mijn buitenste div moeten vervangen door margins op mijn binnenste divs. mijn buitenste div geef ik een border om ongewenste margin-collapsing te voorkomen. het gaat overal goed, behalve op IE/mac. Daar lijken alle gefloate divs, m.u.v. de laatse toch een collapsende margin te hebben.
Afbeeldingslocatie: http://www.jaron.nl/got/margin_ie_mac.gif
kent iemand dit probleem?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>home</title>
    
    <style type="text/css">
        div.outer {
            background: #666;
            border: 1px solid #000;
            /* boxmodel-hack */
            width:447px;
            height: 120px;
            voice-family: "\"}\""; 
            voice-family:inherit;
            width:445px;
            height: 118px;
        }
        div.inner {
            float: left;
            display: inline;
            margin: 9px 0 9px 9px;
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    
</head>

<body>

    <div class="outer">
        <div class="inner">
            aap
        </div>
        <div class="inner">
            noot
        </div>
        <div class="inner">
            noot
        </div>
        <div class="inner" style="margin-right: 9px;">
            mies
        </div>
    </div>
    
</body>
</html>

[ Voor 13% gewijzigd door Verwijderd op 12-09-2005 09:00 ]

maandag 12 september 2005 08:58

Acties:

Verwijderd

Topicstarter
/me juaron geeft nog een klein schopje

maandag 12 september 2005 09:20

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Heb je die hack wel nodig? En werkt het wel zonder hack? (heb nl. geen mac om te testen :P)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 12 september 2005 09:27

Acties:
  • frickY
  • Registratie: Juli 2001
  • Laatst online: 24-04 11:26

frickY

Met IE is het vaker gezeik met floats.
Met display: line ipv van een float zou het wel goed moeten werken. Dan moet je alleen nog wat tweaken om het ook weer in FF goed te krijgen, waarschijnlijk.

maandag 12 september 2005 09:35

Acties:
  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Schrijf je margins eens voluit van de div.inner, dus niet margin, maar margin-left, margin-top, etc..

maandag 12 september 2005 10:26

Acties:

Verwijderd

Topicstarter
@Btm909: ja, die hack heb ik nodig en ja, zonder hack werkte het wel.
@frickY: van display:line heb ik nooit gehoord. het werkt ook niet, of ik begrijp niet wat je bedoelt.
@Woudloper: margins voluit scrijven werkt helaas ook niet...

maandag 12 september 2005 10:30

Acties:
  • Borizz
  • Registratie: Maart 2005
  • Laatst online: 02-01 15:55

Borizz

Ik denk dat frickY het volgende bedoelt en dan klopt het wel deels wat hij zegt. Je moet namelijk ook de float nog aangeven.

Cascading Stylesheet:
1
2

float: left;
display: inline;

[ Voor 30% gewijzigd door Borizz op 12-09-2005 10:36 ]

If I can't fix it, it ain't broken.

maandag 12 september 2005 10:57

Acties:

Verwijderd

Topicstarter
Het werkt! voor de duidelijkheid: die float:left en display:inline heb ik dus toegevoegd aan de div.outer.
Pagina: 1
Reageer