1. #1
    sarnath's Avatar
    Registered
    07/11/03
    Location
    Bree
    Posts
    6,239
    iTrader
    158 (99%)
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Positionering div element vs border

    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="http://www.9lives.be/forum/images/shop.png">
            </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!
    webdeveloper / gamer
    no votes  

  2. #2
    sh011265's Avatar
    Registered
    07/06/04
    Location
    Mechelen
    Posts
    1,235
    iTrader
    3 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/3
    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
    no votes  

  3. #3
    sarnath's Avatar
    Registered
    07/11/03
    Location
    Bree
    Posts
    6,239
    iTrader
    158 (99%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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
    webdeveloper / gamer
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in