Ruimtes in I.E. Perfect in Firefox. - Softwareontwikkeling

zondag 2 juli 2006 12:18

Acties:

Verwijderd

Topicstarter

Ik heb de volgende simpelle layout geschreven. Zodra ik een site maak die dezelfde structuur heeft als deze dan stuit ik altijd weer op lege ruimtes in Internet Explorer.

code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<html>

<head>
    <link href="style.css" rel="styleSheet" type="text/css"  />
</head>


<body>

    <div id="page">
        <div id="left">
            links
        </div>
        <div id="right">
            rechts
        </div>
        <div id="top">
             top
        </div>
        <div id="center">
             center
        </div>
        <div id="bottom">
             bottom
        </div>      

    </div>
        

</body>

</html>

code:

div#page {
  margin-left: auto;
  margin-right: auto;  
  background-color: #fff;
  width: 800px;
}

div#left {

    float:left;
    width:50px;
    height:640px;
    
    background-color: #F00;
}

div#center{
    
    width:100%;
    height:600px;
    margin-left: auto;
    margin-right: auto;  
    
    background-color: #0F0;
}

div#top{
    height:20px;
    width:100%;
    margin-left: auto;
    margin-right: auto;  
    
    background-color: #000;
}

div#bottom{
    height:20px;
    width:100%;
    margin-left: auto;
    margin-right: auto;  
    
    background-color: #000;
}


div#right{
    float:right;
    width:50px;
    height:640px;

    background-color: #00F;
}

Wanneer je deze code bekijkt in Firefox dan werkt het perfect. In Internet Explorer komen er dan hele vage ruimtes tussen LEFT en CENTER en tussen RIGHT en CENTER.

Nou heb ik inmiddels heel wat artikellen gevonden over verschillende bugs in IE maar ik kan nergens vinden hoe ik dit probleem oplos.

Weet iemand hier de oplossing voor ?!

Ik zoek dus eigenlijk een pagina die vierkant in het midden toont. Deze bestaat uit een linkergedeelte, 3 midden gedeeltes en een rechtergedeelte.

[ Voor 14% gewijzigd door Verwijderd op 02-07-2006 12:21 ]

zondag 2 juli 2006 12:41

Acties:

Rowanov

Kop eens wat anders...

Begin eens met een strict doctype:

HTML:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ik heb het niet getest, maar ik heb het vermoedend dat het aan de toekenning van margin: auto; ligt. Kan je dat op 0 zetten zonder je layout om zeep te helpen?

zondag 2 juli 2006 12:44

Acties:

seamus21

Probeer dit eens boven in je css erbij te plakken:

Cascading Stylesheet:

*
{
   padding: 0;
   margin: 0;
}

p, a
{
   font-size: 1em;
}

Always shoot for the moon. Even if you miss you will land among the stars...

zondag 2 juli 2006 12:58

Acties:

Verwijderd

Topicstarter

Rowanov schreef op zondag 02 juli 2006 @ 12:41:
Begin eens met een strict doctype:
HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ik heb het niet getest, maar ik heb het vermoedend dat het aan de toekenning van margin: auto; ligt. Kan je dat op 0 zetten zonder je layout om zeep te helpen?

Met strict doctype en inplaats van Width:100% -> Width:700px dan werkt het wel.

Ik kan helaas niet met strict werken omdat dan andere onderdelen van mijn site niet werken