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;
}
