html css marge box probleem IE FF - Softwareontwikkeling

zondag 9 april 2006 17:25

Acties:

I am the one

Topicstarter

Ik heb een probleem waar ik niet uitkom zonder css hacks toe te passen. Wanneer je de onderstaande code opslaat in een html bestand en bekijkt in zowel IE als in FF zal je zien dat beide browsers de marge van de div in de #header div op een andere manier weergeeft.

Wie kan mij de juiste oplossing geven zonder css hacks toe te passen.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Tester</title>
        <style type="text/css">
        body {
            margin-top:0px;
            color:#FFFFFF;
            background-color:#000000;
            font: 11px verdana, tahoma, arial, sans-serif;
            background-image:url(images/Concept5.jpg);
            background-repeat:repeat;
        }
        .mainbox {
            background-color:#000000;
            color: #FFFFFF;
            width:770px;
            margin-left: auto;
            margin-right: auto;
        }
        #header {
            width:770px;
            height:431px;
            color:#CC0000;
            background-image: url(images/Header.jpg);
            background-position:top;
            background-color: #FFFFFF;
        }
        </style>
    </head>
    <body>
        <div class="mainbox">
            <div id="header">
                <div style="margin-top:20px"> 
                    deze marge moet plaats vinden binnen de div header 
                    niet daar buiten. IE doet dit wel goed FF niet.
                </div>
            </div>
        </div>
    </body>
</html>

[ Voor 17% gewijzigd door aex351 op 09-04-2006 17:26 ]

< dit stukje webruimte is te huur >

zondag 9 april 2006 17:28

Acties:

Verwijderd

Geef de #header een padding-top?
Verder doet Firefox het goed, en Internet Explorer niet.

zondag 9 april 2006 17:36

Acties:

aex351

I am the one

Topicstarter

Verwijderd schreef op zondag 09 april 2006 @ 17:28:
Geef de #header een padding-top?
Verder doet Firefox het goed, en Internet Explorer niet.

En waarom dan precies doet Internet Explorer het niet goed, ik geef een marge aan binnen een div in de header zelf. Dan is het niet bedoeling dat die marge over springt op de #header zelf.

HTML:

            <div id="header">
                <div> &nbsp;</div>
                <div style="margin-top:20px;"> 
                    Nu werkt het wel
                </div>
            </div>

[ Voor 22% gewijzigd door aex351 op 09-04-2006 17:36 ]

< dit stukje webruimte is te huur >

zondag 9 april 2006 18:02

Acties:

crisp

Devver

Pixelated

aex351 schreef op zondag 09 april 2006 @ 17:36:
[...]

En waarom dan precies doet Internet Explorer het niet goed, ik geef een marge aan binnen een div in de header zelf. Dan is het niet bedoeling dat die marge over springt op de #header zelf.

Lees de specificatie er maar over door: collapsing margins

Intentionally left blank