[CSS] Probleem met border's - Softwareontwikkeling

vrijdag 6 januari 2006 19:57

Acties:

Topicstarter

Hoi,

Al eens eerder een probleem gehad met mijn CSS alleen nu loop ik tegen een probleem aan met border's:

CSS:

code:

body { text-align: center; }

#container
{
 background-color: #dcdcdc;
 width: 780px;
 color: #333;
 line-height: 130%;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
} 


#header
{
 padding: .5em;
 background-color: #eeeeee;
 border: 1px solid #000000;
 border-bottom: 0px solid #000000;
}

#bovenbalk {
 background-color: #c0c0c0;
 padding: .5em;
 border: 1px solid #000000;
}


#linksnav
{
 background-color: #dcdcdc;
 float: left;
 width: 140px;
 height: 320px;
 padding: 1em;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
}

#rechtsnav
{
 background-color: #dcdcdc;
 float: right;
 width: 140px;
 height: 320px;
 padding: 1em;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
}

#inhoud
{
 background-color: #FFFFFF;
 height: 320px;
 margin-left: 140px;
 margin-right: 140px;


 padding: 1em;
}

#balkonder
{
 clear: both;
 padding: .5em;
 background-color: #c0c0c0;
 border: 1px solid #000000;
}

HTML:

code:

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

<html>

<head>
<title>Telefoonbende.nl - Webshop</title>
<link rel="stylesheet" type="text/css" href="style/layout.css">
</head>

<body>
</body>

    <div id="container">

        <div id="header">
            <p align="center">
            [img]"images/logo.gif"[/img]
            </p>
        </div>
    
        <div id="bovenbalk">
            Datum auto-insert geval / bewegende lichtkrant met aanbiedingen
        </div>

        <div id="linksnav">
            <h4 align="center">Menu:</h4><br>
            link1<br>
            link2<br>
            etc<br>
        </div>
        

        <div id="rechtsnav">
            Klant-login:<br>
            <form name="test" method="post" action="bform_handler.php">
            <input name="email" type="text" size="15" value="E-mail adres"><br>
            <input name="wachtwoord" type="password" size="15" value="Wachtwoord"><br>
            <input type="submit" name="submit" value="Verzenden">
            </form>
            <br>
            Zoeken:
        </div>

        <div id="inhoud">
            <h3>Inhoud</h3><br>
            Inhoud-meuk
            <br>
            <br>
            <br>
            Alinea 1
            <br>
            <br>
            Alinea 2
            </div>
        
        <div id="balkonder">
            (c) telefoonbende.nl
        </div>
    
    </div>

</html>

Nu zijn de borders / lijntjes "binnen-in" perfect in Opera + Firefox alleen in Internet Explorer staan de borders naast het grijze ipv "erop". Om wat beteraan te geven wat ik bedoel heb ik hem online gezet zodat je het zelf kan zien: klik-klik

Wie weet een oplossing hiervoor?

Alvast bedankt

EDIT:
Als ik
border-left: 1px solid #000000;
border-right: 1px solid #000000;
bij #inhoud neer zet & en border-left bij #rechtsnav weghaal (en dus andersom voor #linksnav) dan is de pagina perfect in Internet Explorer maar dan zijn de borders / lijntjes "binnen-in" weg in Opera + Firefox

[ Voor 36% gewijzigd door Westereen op 06-01-2006 20:04 ]

vrijdag 6 januari 2006 23:45

Acties:

Sappie

De Parasitaire Capaciteit!

Voor wat betreft de div met id "inhoud" is de zogenaamde (IE) hasLayout property true. Dit zorgt voor 3px ruimte om deze div als deze zich naast een floating element (de divs met id "linksnav" en "rechtsnav") bevindt. zie ook hier: http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat

Ik heb het toevallig pas nog een soortgelijk probleem opgelost. Check daarvoor mijn post in het volgende topic: [rml][ HTML]2 vragen frameborders: firefox, W3C[/rml]

De div met id "content" heeft daar voor IE (lager dan versie 7) andere opmaak meegekregen (dmv conditional comments). Ik float deze div namelijk ook (IE6 cleared de floats vanzichzelf toch al) en zet de margin ervoor op 0.

edit: Overigens is het semantisch correcter je menuutje in een ul (unordered list) te zetten. Ook horen alinea's in <p> elementen. Verder zou je je header ook wat eenvoudiger kunnen maken (het <p> element kan sowieso weg)

[ Voor 23% gewijzigd door Sappie op 06-01-2006 23:51 ]

Specs | Audioscrobbler

vrijdag 6 januari 2006 23:59

Acties:

Jaap-Jan

Wat dat probleem trouwens ook oplost (of eigenlijk omzeilt) is een witte achtergrond instellen voor je div#container.

[ Voor 14% gewijzigd door Jaap-Jan op 07-01-2006 00:03 ]

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

zaterdag 7 januari 2006 00:49

Acties:

Verwijderd

Door je kolommen alle 3 float: left te geven en ze zo'n breedte te geven dat de totale breedte binnen de container valt heb je ook geen probleem met je borders meer. Enige nadeel is dat je dan geen em voor je padding kan gebruiken maar gewoon moet uitgaan van pixels.

zaterdag 7 januari 2006 11:58

Acties:

Westereen

Topicstarter

Iedereen bedankt voor zijn/haar reply! $_/-\o_$

Ik heb het opgelost door een witte achtergrond in te stellen voor div#container. De oplossing die op http://positioniseverything.net/explorer/threepxtest.html stond is ook wel ok, maar ik vond die witte achtergrond een stukje eenvoudiger