[CSS] layout in FF oke, in IE7 helemaal fout - Softwareontwikkeling

vrijdag 23 november 2007 19:25

Acties:

--

Topicstarter

Na al heel wat uurtjes geprobeerd, gegoogelt en geGoT te hebben heb ik denk ik toch jullie hulp nodig.

Ik heb een tabel opgebouwd uit divjes. Er wordt een css aageroepen waarin de tabel staat opgemaakt.
Ik gebruik zelf firefox, ziet er helemaal netjes uit. Alleen in IE 7 is de hele opmaak naar de piep. IE 6 weet ik niet.

Hier de link

hier de HTML code:

HTML:

<html>

<head>

<link href="dewasdas.css" rel="stylesheet" type="text/css" />
<link href="menuleft.css" rel="stylesheet" type="text/css" />
<script src="menu.js" type="text/javascript"></script>
    
</head>

<body onLoad="init_menu('idMenuTopHor'); init_menu('idMenuLeft');">

<div class="tabel">

    <div>
        <div class="tabel1_1"></div>
        <div class="tabel1_2"></div>
        <div class="tabel1_3"></div>
    </div>

    <div>
        <div class="tabel2_1"></div>
        <div class="tabel2_2"></div>      
        <div class="tabel2_3"></div>
  </div>
    
    <div>
        <div class="tabel3_1"></div>
        <div class="tabel3_2">
        <ul id="idMenuLeft">
                <li><a href="#">Home</a><ul>
                        <li><a href="#">Over ons</a></li>
                        <li><a href="#">Nieuws</a></li>
                        <li><a href="#">Openingstijden</a></li>
                        <li><a href="#">Acties</a></li>

                </ul>
                </li>
                
                                        
                    <li><a href="#">Auto wassen</a><ul>
                        <li><a href="#">Programma's</a></li>
                        <li><a href="#">Happy hour</a></li>
                        <li><a href="#">Abonnementen</a></li>
                        <li><a href="#">Pre paid</a></li>
                        <li><a href="#">de waspas</a></li>
                        <li><a href="#">VIP behandeling</a></li>                
                    </ul>
                    </li>
                    
                    <li><a href="#">Wasbox</a><ul>
                        <li><a href="#">Programma's</a></li>
                        <li><a href="#">boxxen</a></li>
                        <li><a href="#">Stofzuigen</a></li>
                        <li><a href="#">Doekjes automaat</a></li>
                        <li><a href="#">Shop artikelen</a></li>              
                    </ul>
                    </li>
                    
                    
                    <li><a href="#">Auto poetsen</a><ul>
                        <li><a href="#">Mogelijkheden</a></li>
                        <li><a href="#">Polijsten</a></li>
                        <li><a href="#">Waxen</a></li>
                        <li><a href="#">Lakpantser</a></li>
                        <li><a href="#">Interieur</a></li>
                        <li><a href="#">Prijzen</a></li>                
                    </ul>
                    </li>
                    
                    <li><a href="#">Contact</a><ul>
                        <li><a href="#">Mailformulier</a></li>
                        <li><a href="#">Routekaartjes</a></li>
                      
                    </ul>
                    
                    
                    <li><a href="#">Tuning</a></li>
                    
                    <li><a href="#">Vacature</a></li>
                    <li><a href="#">Restyling</a></li>      </ul></div>
            
                    <ul id="idMenuTopHor">
                    </ul>
                    </li>
                    </div>
                    
        <div class="tabel3_3"><td></td></div>
        <div class="tabel3_3b"></div>

</body>
</html>

en hier de css:

Cascading Stylesheet:

body {
    background-color: #666666;
}

.tabel {
    position: center;
    height: 765px;
    width: 1018px;
    border: 1px solid #000000;
    border-spacing: 0px;
    padding: 0px 0px 0px 0px;
    border-collapse: collapse;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}


.tabel1_1 {
    background-image: url(afbeeldingen/index_01.jpg);
    height: 107px;
    width: 45px;
    float: left;

}
.tabel1_2 {
    background-image: url(afbeeldingen/index_02.jpg);
    height: 107px;
    width: 253px;
    float: left;

}
.tabel1_3 {
    background-image: url(afbeeldingen/index_03.jpg);
    height: 107px;
    width: 720px;
    float: right;

}
.tabel2_1 {
    background-image: url(afbeeldingen/index_04.jpg);
    height: 61px;
    width: 45px;
    float: left;
}
.tabel2_2 {
    background-image: url(afbeeldingen/index_05.jpg);
    height: 61px;
    width: 253px;
    float: left;
}
.tabel2_3 {
    background-image: url(afbeeldingen/index_06.jpg);
    height: 61px;
    width: 720px;
    float: right;
}

.tabel3_1 {
    background-image: url(afbeeldingen/index_07.jpg);
    height: 597px;
    width: 45px;
    float: left;
}

.tabel3_2 {
    background-image: url(afbeeldingen/index_08.jpg);
    height: 597px;
    width: 253px;
    float: left;    
}

.tabel3_3 {
    background-image: url(afbeeldingen/index_09.jpg);
    height: 569px;
    width: 720px;
    float: right;
}

.tabel3_3b {
    background-image: url(afbeeldingen/index_10.jpg);
    height: 28px;
    width: 720px;
    float: right;
}

[ Voor 2% gewijzigd door RobIII op 23-11-2007 22:13 ]

| Apple iMac 27" 2012 | Apple McBook Pro 13" 2010 | qnap ts-112 |

vrijdag 23 november 2007 19:34

Acties:

Boelie-Boelie

Zet er eerst eens een doctype in, daarna kun je pas verder met de layout. Zonder doctype (of met een onvolledig doctype, of met code boven het doctype) maakt IE er een potje van. Met correct doctype valt er qua browserverschillen nog wat van te maken.

Cogito ergo dubito

vrijdag 23 november 2007 19:36

Acties:

Verwijderd

Het is gewoon helemaal waardeloos, want nu heb je geen tabellen misbruikt, maar divjes. Voor dit ontwerp heb je maximaal 3 plaatjes nodig, dat si afhankelijk van of je wilt dat een pagina oprekt als de inhoud te lang wordt. Als dat niet hoeft ben je met 1 plaatje al klaar. en heb je helemaal nooit gedoe met browserverschillen. Dat krijg je wel met die floatende rommel.

Je hebt 1 div nodig om te centreren. Daarin 1 absoluut gepositioneerde div voor het menu, en 1 met margins gepositioneerde div voor de inhoud van je pagina's.

vrijdag 23 november 2007 20:45

Acties:

GeBas

--

Topicstarter

Boelie-Boelie schreef op vrijdag 23 november 2007 @ 19:34:
Zet er eerst eens een doctype in, daarna kun je pas verder met de layout. Zonder doctype (of met een onvolledig doctype, of met code boven het doctype) maakt IE er een potje van. Met correct doctype valt er qua browserverschillen nog wat van te maken.

Goede tip.
Die had ik er uit gesloopt, wist eigelijk niet echt waar dat voor was. Nu wel.

| Apple iMac 27" 2012 | Apple McBook Pro 13" 2010 | qnap ts-112 |

vrijdag 23 november 2007 22:12

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Voor code hebben we code tags

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zaterdag 24 november 2007 09:37

Acties:

Verwijderd

Volgens mij heb jij het helemaal verkeerd begrepen

Waarom misbruik je divjes om een tabel te simuleren? gebruik dan gewoon een tabel.. Maar aangezien het zo te zien niet om data gaat maar om een regulier website layoutje is dat ook niet de bedoeling.

Probeer een soortgelijke opstelling:

HTML:

<div id="container">
<div id="header"></div>
<div id="menu">
<ul>Menutje</ul>
</div>
<div id="content"><h1>Welkom</h1></div>
<div id="footer"><p>footer text</p></div>
</div>

Css mag je zelf gaan bedenken

zaterdag 24 november 2007 18:40

Acties:

apokalypse

Verwijderd schreef op zaterdag 24 november 2007 @ 09:37:
Volgens mij heb jij het helemaal verkeerd begrepen

Waarom misbruik je divjes om een tabel te simuleren? gebruik dan gewoon een tabel.. Maar aangezien het zo te zien niet om data gaat maar om een regulier website layoutje is dat ook niet de bedoeling.

Inderdaad. Tabulaire data, hoort in een tabel. Hoe lelijk en langzaam tabellen in browsers ook zijn. Semantisch correct heet dat.

[ Voor 21% gewijzigd door apokalypse op 24-11-2007 18:41 ]

zondag 25 november 2007 02:04

Acties:

_Thanatos_

Ja, en kaal

Hoe lelijk en langzaam tabellen in browsers ook zijn. Semantisch correct heet dat.

Lelijk, dat heb je dan zelf gedaan -> CSS
Langzaam -> gebruik een betere browser

日本！🎌