[html+css] ie breedte probleem - Softwareontwikkeling

dinsdag 2 mei 2006 17:27

Acties:

blaat

Topicstarter

Ik heb de volgende html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
    <head>
        <title>waa</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        
        <link rel="stylesheet" type="text/css" href="css/css.css">
        
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/ie.css">
        <![endif]-->
            
    </head>
    <body>
        <div id="main-wrapper">
            <div id="top">
                    <div id="nav-wrapper">
                        
                    </div>
            </div>
            <div id="middle">

                <div id="content-menu">
                    
                </div>
        
                <div id="content-scroller">
                    <p>Hoi</p>          
                </div>
        
                <div class="clear"></div>
            </div>          

            <div id="bottom" onclick="window.open('http://www.waa.nl');" onmouseover="this.style.cursor = 'pointer';"></div>

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

Met daarbij:

Cascading Stylesheet:

body * { border: 0; margin: 0; padding: 0; }

body { margin: 0; text-align: center; }

div.clear {
    border: 0;
    clear: both;
    height: 0px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#main-wrapper {
    border: 1px solid black;
    height: 768px;
    margin: 0 auto; /* align for good browsers */
    position: relative;
    text-align: left; /* counter the body center */
    width: 1024px;
}

#top {
    background: #FFFFFF url(../images/wgc-top-logo.jpg) no-repeat left top;
    height: 118px;
    position: absolute;
    top: 0;
    left: 0;
    width: 1024px;
}

#middle {
    background: #5E9EDB url(../images/bg-logo.jpg) no-repeat left top;
    width: 1024px;
    height: 592px;
    position: absolute;
    left: 0;
    top: 118px;
}

#bottom {
    background: #1A3874  url(../images/wgc-url.jpg) no-repeat left top;
    height: 58px;
    position: absolute;
    top: 710px;
    left: 0;
    width: 1024px;
}


#content-menu {
    position: relative; 
    width: 490px;
    margin: 50px 0 0 20px;
    float: left;
    border: 1px solid #93BFE4;
    height: 530px;
}

#content-scroller {
    position: relative; 
    width: 470px;
    height: 412px;
    overflow-y: scroll;
    overflow-x: none;
    border: 1px solid black;
    margin: 50px 20px 0 0;
    float: right;
}

En om het er in IE hetzelfde eruit te laten zien moet ik dit doen (conditioneel statement):

Cascading Stylesheet:

#content-menu {
    margin: 50px 0 0 10px;
}

#content-scroller {
    margin: 50px 10px 0 0;
}

Wanneer ik de aparte stylesheet voor ie weglaat zijn de margins van content-menu en content-scroller te groot en is de lay-out vernaggelt. Ik ben (geloof ik) redelijk bekend met de verschillen tussen de verschillende box modellen ik snap alleen niet waardoor er in ie gotere marges zijn dan in Firefox. Ik ben dus eigenlijk alleen gewoon benieuwd naar de oorzaak hiervan aangezien ik het al wel verholphen heb dmv een aparte stylesheet.

Systeem | Strava

dinsdag 2 mei 2006 18:10

Acties:

JHS

Splitting the thaum.

Double margin bug welke optreed bij floats, op te lossen door display: inline; toe te passen op het block

.

DM!

dinsdag 2 mei 2006 18:10

Acties:

Cartman!

Lijkt de IE double margin bug te zijn, is veel over te vinden zowel hier als op google.
Float element + een margin maakt IE dubbel.

display:inline; lost t op overigens.

dinsdag 2 mei 2006 18:24

Acties: