DIV's in container naast elkaar in IE en FF - Softwareontwikkeling

zaterdag 1 januari 2005 17:26

Acties:

Topicstarter

Ik ben eens begonnen om wat meer met DIV's te gaan werken, maar het wil me nog niet echt lukken. Wat is wil, is een container, met daarin weer 2 content div's, welke naast elkaar komen te staan. In firefox krijg ik het voor elkaar, maar niet in Internet Explorer, zie de volgende plaatjes:

FireFox 1.0
Afbeeldingslocatie: http://exferno.3d-gamers.nl/img/firefox.gif

Afbeeldingslocatie: http://exferno.3d-gamers.nl/img/firefox.gif

Internet Explorer
Afbeeldingslocatie: http://exferno.3d-gamers.nl/img/iexplore.gif

Ik gebruik nu de onderstaande code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title> CMS - Login </title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <style type="text/css" title="v1">
            BODY {
                font-family: verdana;
                font-size: 11;
                font-color: #000;
                background: #FFF;
                margin: 0px;
            }
            
            #main {
                border: 1px #000 solid;
                margin: 50px 0 0 50px;
                width: 600px;
                height: 369px;
                background: #e8e6e2; 
            }
            
            #menu {
                border-bottom: 1px #000 solid;
                margin: 0 0 0 0;
                width: 600px;
                height: 20px;
                background: #e8e6e2; 
            }
            
            #logo {
                border: 1px #000 solid;
                margin: 10px 0 0 10px;
                width: 250px;
                height: 329px;
                background-color: #FFF;
                float: left;
            }
            
            #login {
                border: 1px #000 solid;
                margin: 10px 0 0 270px;
                width: 320px;
                height: 329px;
                background-color: #FFF;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="menu"></div>       
            <div id="logo"></div>
            <div id="login"></div>
        </div>
    </body>
</html>

Iemand enig idee hoe ik dit ook in Internet Explorer goed kan krijgen? En dan het liefst met 1 stylesheet

Overigens heb ik natuurlijk de search gebruikt, en verschillende dingen gebruikt, maar hoewel er wel dingen veranderen krijg ik het nog niet goed in IE en FF

Alvast bedankt

zaterdag 1 januari 2005 17:59

Acties:

Koeniepoenie

Je zou kunnen proberen #menu ook naar links te laten floaten.

[luiheid]
Gooi anders ook even de pagina online, zodat er door ons makkelijker dingen kunnen worden uitgeprobeerd

[/luiheid]

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337

zaterdag 1 januari 2005 18:03

Acties:

m33p

Topicstarter

http://exferno.3d-gamers.nl/CMSv2/

Als ik menu ook float: left doe, dan krijg ik hem er wel naast, maar moet ik extra margin vanaf boven weergeven, maar ik vat even niet waar die dan vandaan komt. Plus dat dat dan ook wel 'netter' moet kunnen toch?

zaterdag 1 januari 2005 19:16

Acties:

Harm

Dat lijkt me deze: Little boxes -- Two fluid boxes.

zondag 2 januari 2005 00:06

Acties:

Verwijderd

daar ook precies het zelfde probleem, Harm

zondag 2 januari 2005 00:28

Acties:

m33p

Topicstarter

Samen met _Ghraphix het probleem even opgelost op MSN

zie http://exferno.3d-gamers.nl/Copy%20of%20CMSv2/ voor het resultaat

Overigens lijkt het een bug of parsefout. In IE worden er zo'n 10 px extra gerenderd aan de linkerkant van de #logo div (in de oude versie). Nu hebben we de padding op de loginContainer gezet, en problem solved.

[ Voor 52% gewijzigd door m33p op 02-01-2005 11:13 ]