[CSS] in-spring probleem - Softwareontwikkeling

dinsdag 29 maart 2005 11:57

Acties:

Topicstarter

Ik heb de volgende test pagina gemaakt wanneer je deze code in IE bekijkt (zie link onderaan deze post) word de tekst in de rechter div in-gesprongen vooral ter hoogte van de linker div. In firefox heb ik dit probleem niet.

Het heeft volgens mij te maken met de linker div omdat als ik de margin-left van de rechter div op bv 200px zet de inspringing er nog steeds is. Echter wat ik ook instel bij margin, padding etc voor de linker div heeft niet het gewenste effect. Ik heb al uitgebreid gezocht op GOT, google etc.. maar daar vond in geen geschikte oplossing, vandaar deze post.

Het gaat dus om de tekst in de echter kolom waarbij de paragraven iets meer inspringen naast de linker kolom met links dan de paragraven die lager staan.

Ik hoop dat ik zo duidelijk genoeg ben.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>TEST</title>

<style type="text/css">
    body {
        margin:0px 0px 0px 0px;
        }
    
    #leftcontent {
        float:left;
        width:170px;
        background:#fff;
        border:0px solid #000;
        margin-right:0px;
        padding-bottom:20px;
        }

    #rightcontent {
        margin-left:170px;
        }
        
    p,h1,pre {
        margin:0px 30px 10px 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #121697;
        }
        
    h1 {
        font-size:14px;
        padding-top:10px;
        }
    
    #rightcontent p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #121697;
        margin-left:0px;
        }
    
</style>
</head><body>

<div id="leftcontent">
    <ul>
        <li><a href="">Lorem ipsum</a></li>     
        <li><a href="">dolor sit amet</a></li>
        <li><a href="">consectetuer</a></li>
        <li><a href="">Pellentesque</a></li>
        <li><a href="">adipiscing</a></li>
        <li><a href="">aliquam</a></li>
    </ul>
</div>

<div id="rightcontent">
    <h1>Lorem ipsum dolor sit amet,</h1>
       <p>Consectetuer adipiscing elit. Pellentesque quis metus sed dolor mollis aliquam. Sed at massa. Ut tincidunt. Quisque pharetra elementum ipsum. Donec quis tellus ac arcu tincidunt lobortis. Quisque malesuada nisl at enim. Integer at elit. Integer id eros auctor nisl feugiat luctus. Proin quis nunc. Sed tristique, arcu id scelerisque sodales, felis purus bibendum nunc, sit amet viverra nulla lectus sit amet lectus.
</p><p>
Donec a ligula. Fusce adipiscing porta ligula. Nam fermentum eleifend ante. Nullam id risus. Suspendisse gravida, wisi a varius dapibus, tellus augue suscipit turpis, pellentesque gravida mi lectus a metus. Aenean eu dolor in erat laoreet pellentesque. Sed eros turpis, lacinia at, vehicula eu, semper vel, dui. Aenean consectetuer wisi vel lectus. Donec placerat sapien at tellus. Ut mattis. 
</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis metus sed dolor mollis aliquam. Sed at massa. Ut tincidunt. Quisque pharetra elementum ipsum. Donec quis tellus ac arcu tincidunt lobortis. Quisque malesuada nisl at enim. Integer at elit. Integer id eros auctor nisl feugiat luctus. Proin quis nunc. Sed tristique, arcu id scelerisque sodales, felis purus bibendum nunc, sit amet viverra nulla lectus sit amet lectus.
</p><p>
Donec a ligula. Fusce adipiscing porta ligula. Nam fermentum eleifend ante. Nullam id risus. Suspendisse gravida, wisi a varius dapibus, tellus augue suscipit turpis, pellentesque gravida mi lectus a metus. Aenean eu dolor in erat laoreet pellentesque. Sed eros turpis, lacinia at, vehicula eu, semper vel, dui. Aenean consectetuer wisi vel lectus. Donec placerat sapien at tellus. Ut mattis. 
</p>
</div>

</body>
</html>

http://www.nijdam.nu/downloads/test.html

Mijn Lego Mocs - LEGO idea: The Motorcycle Garage

dinsdag 29 maart 2005 12:04

Acties:

Rowanov

Kop eens wat anders...

Dat is een probleem met je floats, dat lijkt me duidelijk, ik heb alleen geen idee hoe je dat kan oplossen.

dinsdag 29 maart 2005 12:14

Acties:

Pin0

Topicstarter

Als ik de float van de rechter div op right zet (en de linker dus op left) dat lijkt het in IE goed te zijn in FF echter komt dan de rechter div onder de linker div en dat is natuurlijk niet de bedoelling.

Dus graag andere suggesties/oplossingen

Mijn Lego Mocs - LEGO idea: The Motorcycle Garage

dinsdag 29 maart 2005 12:41

Acties:

MTWZZ

One life, live it!

als je #rightcontent een width geeft en float: left dan zal het waarschijnlijk allemaal kloppen.
Overgens is het altijd handig om alle padding en margins expliciet te vermelden.

Nu met Land Rover Series 3 en Defender 90

dinsdag 29 maart 2005 12:49

Acties:

Verwijderd

http://www.positionisever...explorer/threepxtest.html ? (Ik heb het niet getest, alleen vluchtig het topic doorgescand.)

dinsdag 29 maart 2005 14:51

Acties:

Pin0

Topicstarter

Opgelost!

Ik heb de rechter kolom een hoogte van 1% meegegeven waardoor het is opgelost, met dank aan de link die Anne gaf! Bedankt maar weer.

Mijn Lego Mocs - LEGO idea: The Motorcycle Garage