[IE & FF] Waarom zoveel layout verschil ? - Softwareontwikkeling

zaterdag 30 juli 2005 20:01

Acties:

Topicstarter

Ik heb dus nu een conceptje gemaakt met divs

nu in IE ziet hij er perfect uit, precies zoals ik hem wil.
maar in Fire-Fox ziet het er weer niet uit. alles op verkeerder plek enz.
Waarom is dit ?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body { background-image:url(bk225.gif);
        height:94%;
        width:97%;
        }

#back {border:1px solid #000000;
        width:100%;
        height:100%;
        }
    
div#leftheader { width:33%;
                height:7%;
                border-bottom:1px solid #000000;
                float:left;
                border-right:1px solid #000000;
                background-color:#FFFFFF;
                }
                
div#midheader { width:33%;
                height:7%;
                border-bottom:1px solid #000000;
                float:left;
                border-right:1px solid #000000;
                background-color:#FFFFFF;
                }
                
div#righeader {
    width:329px;
    height:7%;
    border-bottom:1px solid #000000;
    float:left;
    background-color:#FFFFFF;
    position:absolute;
    left: 655px;
                }
                
div#logoheader { width:100%;
                height:20%;
                border-bottom:1px solid #000000;
                background-color:#FFFFFF;
                }
                
div#scrollmenu { height:4%;
                width:100%;
                border-bottom:1px solid #000000;
                background-color:#FFFFFF;
                }
                
div#navi { width:20%;
            height:69%;
            border-right:1px solid #000000;
            float:left;
            background-color:#FFFFFF;
            }
            
div#contentbalk { width:60%;
                    height:4&;
                    border-bottom:1px solid #000000;
                    border-right:1px solid #000000;
                    float:left;
                    background-color:#FFFFFF;
                    }
                    
div#content {width:60%;
            height:65%;
            border-right:1px solid #000000;
            float:left;
            background-color:#FFFFFF;
            float:left;
            }
div#nieuwsback {
    width:193px;
    height:388px;
    border-right:1px solid #000000;
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    position:absolute;
    left: 791px;
    top: 193px;
            }
div#nieuws1 {
    width:193px;
    height:8%;
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
    position:absolute;
    left: 791px;
    top: 193px;
            }
div#nieuws2 {
    width:193px;
    height:8%;
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
    position:absolute;
    left: 791px;
    top: 239px;
            }
            
div#nieuws3 {
    width:193px;
    height:8%;
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
    position:absolute;
    left: 791px;
    top: 285px;
    }
div#nieuws4 {
    width:193px;
    height:8%;
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
    position:absolute;
    left: 791px;
    top: 331px;
    }
div#adres {
    width:193px;
    height:176px;
    position:absolute;
    left: 791px;
    top: 380px;
}
div#copyr {
    width:192px;
    height:26px;
    position:absolute;
    left: 791px;
    top: 555px;
    border:1px solid #000000
            }
</style>
</head>
<body>
<center>
<div id="back">
<div id="leftheader">Icoontjes - sitemap</div>
<div id="midheader"> datum</div>
<div id="righeader">site info</div>
<div id="logoheader"> je logo(header)</div>
<div id="scrollmenu">Main menu-scroll</div>
<div id="navi">menu</div>
<div id="contentbalk">welke pagina je bent</div>
<div id="content">text</div>
<div id="nieuwsback"></div>
<div id="nieuws1">Niews1</div>
<div id="nieuws2">Nieuws2</div>
<div id="nieuws3">nieuws3</div>
<div id="nieuws4">nieuws4</div>
<div id="adres">Adres</div>
<div id="copyr">Copyright</div>
</div>
</center>
</body>
</html>

Let nog maar niet op de manier van schrijven.. was gewoon ff snel concept.

zaterdag 30 juli 2005 20:17

Acties:

Verwijderd

Dat is omdat je geen ervaring hebt. Je maakt iets in IE zonder de dos en donts te kennen. Dan kun je verwachten dat het er in Firefox niet uitziet.

Je hebt vrijwel alles absoluut gepositioneerd. Dat is vragen om problemen.
Verder slaat je HTML ook helemaal nergens op. Alleen maar een verzameling divs kun je toch geen HTML noemen? Daar is geen enkele informatie uit af te leiden.

Dus gewoon even opnieuw beginnen, en nu wel goed opletten wat de invloed is van elke stijleigenschap.

zaterdag 30 juli 2005 20:18

Acties:

TERW_DAN

Met een hamer past alles.

Dat komt doordat beide browsers de standaarden anders implementeren. Firefox is daar redelijk strak in terwijl IE daar een stuk vrijer in is. Daarom is het ook makkelijker om voor Firefox iets te ontwerpen en dan evt aan te passen op IE dan andersom. IE doet namelijk niet wat het moet doen en Firefox wel.

zondag 31 juli 2005 00:41

Acties:

Verwijderd

en Cheatah doelt op semantiek. En idd gaat het nergens over

zondag 31 juli 2005 12:46

Acties:

Tjeemp

BEER N TEA

ook wil het nog wel eens aan je doctype liggen die je gebruikt heb ik gemerkt...

www.timovanderzanden.nl | Beer 'n' Tea

zondag 31 juli 2005 13:30

Acties:

Zoefff

❤ 

Dit komt omdat IE en FF de standaarden zoals vastgelegd door het W3C op een eigen manier geimplementeerd hebben. Of eigenlijk, FF heeft het op de juiste manier gedaan, IE maak een hoop fouten. Als je dus een site aan het maken bent, is het verstandig om dit met FF te doen, en naderhand de fouten in IE er uit te halen. Als je meer ervaring hebt, dan weet je op een gegeven moment wat IE wel en niet slikt, en hoe je dit eventueel kan oplossen.

Maar, de basis zit eigenlijk ook niet goed in elkaar, en dat is het begin van je problemen. Ik zie dat je alleen maar divjes gebruikt, en alle andere elementen links laat liggen:

HTML:

<div id="leftheader">Icoontjes - sitemap</div>
<div id="midheader"> datum</div>
<div id="righeader">site info</div>
<div id="logoheader"> je logo(header)</div>
<div id="scrollmenu">Main menu-scroll</div>
<div id="navi">menu</div>
<div id="contentbalk">welke pagina je bent</div>
<div id="content">text</div>
<div id="nieuwsback"></div>
<div id="nieuws1">Niews1</div>
<div id="nieuws2">Nieuws2</div>
<div id="nieuws3">nieuws3</div>
<div id="nieuws4">nieuws4</div>
<div id="adres">Adres</div>
<div id="copyr">Copyright</div>

De headers kan je (of moet je) vervangen door Hx. Die nieuwsjes en menu kan je in een lijst zetten, en de content in een paragraaf.

<div id="content">text</div>

word dus:

<p>text</p>

En van

<div id="nieuws1">Niews1</div>
<div id="nieuws2">Nieuws2</div>
<div id="nieuws3">nieuws3</div>
<div id="nieuws4">nieuws4</div>

kan je dit maken:

<ul>
    <li>Nieuws 1</li>
    <li>Nieuws 2</li>
    <li>Nieuws 3</li>
    <li>Nieuws 4</li>
</ul>

En gebruik voor headers <h1> t/m <h6>. Zorg dat je de juiste elementen voor je onderdelen gebruikt, en niet alles maar in <div> gooit. Lees ook dit artikel van chem ook eens door

[ Voor 22% gewijzigd door Zoefff op 31-07-2005 13:32 ]

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter