Archief - Positionering div element vs border

sarnath · 12 mrt 2009

Hallo iedereen, ik heb een probleem met het positioneren van mijn div's.

Ben wat aan het experimenteren met verschillende site opbouwen en indien ik een border wil toevoegen loopt het mis..

Ofwel is het in IE goed, ofwel in Firefox, maar nooit in beide.

De css file:

Code:

body{
	color:#79430A;
	font-family: Tahoma, Arial, Verdana, Helvetica;
	font-size: 11px;
	text-align:center;
	background-repeat:no-repeat;
	background-position:center;
}

.total{
    border:3px #79430A solid;
    width:1024px;
    height:800px;
    margin-left:auto; margin-right:auto;
	text-align:left;
}

.top{
    background-color:black;
    width:1024px;
    height:150px;
    background-image:url("images/logo.png");
}

.bottom{
    background-color:#79430A;
    width:1024px;
    height:20px;
}

.middle{
    background-color:green;
    width:1024px;
    height:630px;
	position:relative;
}

.menu{
    width:200px;
    height:630px;
    background-color:#C0C0C0;
	border-right: 4px #79430A solid;
	position:absolute;
}

.content{
    width:824px;
    height:630px;
    background-color:#EEEEEE;
	position:absolute;
	left:200px;
}

a:link{color:#79430A;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:visited{color:#79430A;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:hover{color:#02519F;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:active{color:#79430A;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}

de html pagina:

Code:

<html>
<head>
<link rel="StyleSheet" href="stijl.css" type="text/css" title="layout">
<meta name="description" content="beschrijving van uw site" />
<meta name="keywords" content="inhoud van uw site" />
<meta name="author" content="dotred" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div class="total">
    <div class="top">
        <!-- hoofding -->
    </div>

    <div class="middle">
        <div class="menu">
                <a href="index.html">HOME</a><br>
                <a href="assortiment.html">assortiment</a><br>
                <a href="contact.html">contact</a><br><br>
                <a href="promo.html">PROMO</a>
        </div>
        
        <div class="content">	        
                Welkom op onze site.
	            <br>
	            <br>
	            <img src="https://www.beyondgaming.be/forums">
        </div>
    </div>

    <div class="bottom">
        .Red
    </div>
</div>
</body>
</html>

Er moet dus een border rechts van het menu staan, in IE ziet het er goed uit zoals de code hier staat, in firefox zie je de border niet..

Als ik dan het aantal pixels van de border bijvoorbeeld bij de menubreedte aftel dan klopt het in IE niet meer.

Hoe los ik dit op?

Alvast bedankt!

sh011265 · 12 mrt 2009

Toepassen van CSS Hack? Wil zeggen, je div eigenschappen geven voor IE & dezelfde div andere eigenschappen voor FF geven..

voorbeeld:

Code:

div#jouwdiv{
	width: 214px;
	margin: 0px;
	padding: 0px;
	margin-top: -5px;	
}

div#parentdivvanjouwdiv > #jouwdiv{
	width: 214px;
	margin: 0px;
	padding: 0px;
}

Normaalgezien gaat u browser eerst de eerste 'instellingen' van de div overnemen, nadien gaat IE of Firefox (een van de twee, weet niet goed meer welke) de instellingen overschrijven doordat enkel 1vd2 browsers die div interpreteerd..

Code:

div#parentdivvanjouwdiv > #jouwdiv

De eerste div is dus de parentdiv, als het lijkt dat m geen parentdiv heeft, is het body > #jouwdiv (dacht ik, anders html > #jouwdiv)

Hopelijk heb je r wat aan, is normaal ook W3C valid!

Goodluck

sarnath · 12 mrt 2009

hmz daar geraak ik niet direct wijzer uit, heb het geprobeerd maar t geeft geen resultaat.
Ben een leek in layout...

evenzeer al bedankt in ieder geval

Archief - Positionering div element vs border

sarnath

Legacy Member

sh011265

Legacy Member

sarnath

Legacy Member