Vertikaler Abstand IE5 / kein 3 pixel problem

  • Hallo,
    der IE schiebt in mein Design vertikale Abstände zwischen Bildern ein, ich konnte bisher keine Lösung für mein Problem im Internet finden und bin mit meinem Latein am Ende. Die Abstände befinden sich zwischen dem logo und dem Menü darunter sowie zwischen dem Topimage und dem darunterliegenden maincontent. Wenn das Menü rausgenommen wird, verschwinden die Abstände, ich kann die Ursache allerdings nicht feststellen!


    HTML:



    <body class="twoColFixRtHdr">
    <div id="wrapper">
    <div id="container">
    <div id="header1">
    <img src="images/logo.jpg"/>
    <ul id='menu'>
    <li><a href='http://test.htm'>test1</a></li>
    <li><a href='http://test.htm'>test2</a></li>
    <li><a href='http://test.htm'>test3</a></li>
    <li><a href='http://test.htm'>test4</a></li>
    </ul>
    <img src="images/topimage.jpg"/>
    </div>
    <div id="sidebar1">




    CSS:


    * { margin: 0; padding: 0; }



    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #a49b88 url("images/background.jpg") repeat-x;
    margin: 0; padding: 0;
    text-align: center;
    color: #000000;
    }


    ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:36px;
    text-transform:uppercase;
    font-size:11px;
    font-weight:normal;
    background:transparent url("images/OFF.gif") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    border-top:1px solid #919191;
    }
    ul#menu li{
    display:block;
    float:left;
    margin:0;
    padding:0;}
    ul#menu li a{
    display:block;
    float:left;
    color:#fdfdfd;
    text-decoration:none;
    font-weight:normal;
    padding:12px 20px 0 20px;
    height:24px;
    background:transparent url("images/DIVIDER.gif") no-repeat top right;
    letter-spacing: 0.1px;
    }
    ul#menu li a:hover{
    background:transparent url("images/HOVER.gif") no-repeat top right;
    }


    .twoColFixRtHdr #wrapper {
    width: 773px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    border-left: 1px solid #d9d9d7;
    border-right: 1px solid #d9d9d7;
    border-bottom: 1px solid #d9d9d7;
    margin: 0 auto;
    }
    .twoColFixRtHdr #container {
    width: 763px;
    /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
    background: #ffffff url();
    border-right: 5px solid #ffffff;
    border-left: 5px solid #ffffff;
    }
    .twoColFixRtHdr #header1 {
    background: #333333;
    padding: 0 0px 0 0px;
    margin: 0px;
    }

  • Zitat

    kein 3 pixel problem

    Das ist sehr wohl ein 3px Problem - Bilder sind Inlineelemente und haben daher auch ein wenig Abstand nach unten von der Grundlinie aus (für Buchstaben wie y, q oder p).


    Gib den Bildern ein display: block und fertig ;)


    Im übrigen kannst du überall das margin:0; und padding:0; raus nehmen - du hast doch am Anfang schon mit dem Stern * die Abstände aller Elemente auf 0 gesetzt.

    My software never has bugs. It just develops random features ... :D
    [FONT="System"]&#63743;
    » DevShack - die Website des freien Webentwicklers Boris ;)