Ik heb het volgende probleem, ik heb een website met een hoogte van 100%.
Onderaan de website heb ik een footer en onder deze footer zit om één of andere reden nu een klein wit randje die er niet hoort. Zien jullie de reden van deze fout?
<code>
body, html{
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
div.wrapper{
display:block;
width:1000px;
min-height:100%;
height:auto !important;
height:100%;
position:relative;
top:0px;
left:50%;
margin-left:-500px;
border-left:1px solid #000000;
border-right:1px solid #000000;
background-image:url(../img/wrapper_border.png);
background-repeat:repeat-y;
background-position:187px 255px;
}
div.header{
display:block;
height:165px;
width:1000px;
background-image:url(../img/header_background.png);
background-repeat:repeat-x;
background-color:#FFFFFF;
}
div.header div.logo{
display:block;
width:194px;
height:110px;
padding-top:55px;
float:left;
}
div.header div.description{
display:block;
height:8px;
width:217px;
float:left;
padding-top:102px;
padding-left:35px;
}
div.header div.third{
display:block;
height:165px;
width:233px;
float:left;
background-image:url(../img/header_3.png);
}
div.header div.right{
display:block;
height:165px;
width:321px;
background-repeat:no-repeat;
float:left;
background-image:url(../img/header_right.png);
}
div.header div.right div.text{
display:block;
height:24px;
width:200px;
color:#cc2030;
padding-top:100px;
padding-left:109px;
font-size:23px;
font-weight:500;
}
div.header div.right div.links{
display:block;
height:26px;
width:190px;
color:#a7a7a7;
padding-top:15px;
padding-left:120px;
}
div.header div.right div.links ul li{
display:block;
float:left;
}
div.header div.right div.links ul li a{
display:block;
color:#a7a7a7;
list-style:none;
text-decoration:none;
background-image:url(../img/header_links_spacer.png);
background-repeat:no-repeat;
background-position:left;
padding-right:10px;
padding-left:11px;
font-size:9px;
}
div.header div.right div.links ul li a.first{
display:block;
background-image:none;
}
div.container{
display:block;
min-height:100px;
height:auto !important;
height:100px;
width:825px;
position:relative;
float:left;
z-index:2;
}
div.container div.vmenu{
display:block;
min-height:400px;
width:194px;
float:left;
}
div.container div.vmenu ul{
display:block;
padding-top:57px;
}
div.container div.vmenu ul li{
display:block;
list-style:none;
padding-left:44px;
padding-right:12px;
}
div.container div.vmenu ul li a{
display:block;
text-decoration:none;
color:#000000;
font-weight:bold;
border-bottom:1px solid #9c9c9c;
}
div.container div.vmenu ul li ul{
display:block;
padding-top:0px;
}
div.container div.vmenu ul li ul li{
display:block;
padding-left:10px;
}
div.container div.vmenu ul li ul li a{
display:block;
color:#808080;
font-weight:bold;
border-bottom:none;
padding-bottom:6px;
}
div.container div.vmenu ul li ul li a.active{
display:block;
color:#b01f3d;
}
div.container div.vmenu ul li ul li a:hover{
display:block;
color:#b01f3d;
}
div.container div.vmenu ul li ul li ul{
display:block;
}
div.container div.vmenu ul li ul li ul li{
display:block;
border-bottom:none;
}
div.container div.vmenu ul li ul li ul li a{
display:block;
color:#000000;
font-weight:normal;
}
div.container div.hmenu{
display:block;
height:90px;
width:630px;
border-top:1px solid #cc2030;
border-bottom:1px solid #cc2030;
border-left:1px solid #cc2030;
float:left;
}
div.container div.hmenu div.top{
display: block;
height:29px;
width:630px;
background-color:#FFFFFF;
}
div.container div.hmenu div.middle{
display:block;
height:37px;
width:630px;
background-color:#cc2030;
}
div.container div.hmenu div.bottom{
display:block;
height:24px;
width:630px;
background-color:#FFFFFF;
}
div.content{
display:block;
min-height:510px;
width:628px;
background-repeat:repeat-y;
float:left;
}
div.photo{
display:block;
height:242px;
width:174px;
float:left;
}
div.photo div.top{
display: block;
border-top:1px solid #cc2030;
border-right:1px solid #cc2030;
height:29px;
width:146px;
}
div.photo div.middle{
display:block;
height:37px;
width:146px;
background-color:#cc2030;
border-right:1px solid #cc2030;
}
div.photo div.bottom{
display:block;
height:24px;
width:146px;
border-bottom:1px solid #d95763;
border-right:1px solid #cc2030;
}
div.whitespace{
display:block;
height:25px;
width:5px;
background-color:#FFFFFF;
position:absolute;
top:92px;
left:824px;
}
div.footer{
display:block;
height:172px;
width:1000px;
position:absolute;
background-image:url(../img/footer_left.png);
background-repeat:no-repeat;
bottom:0px;
left:0px;
text-align:right;
}
</code>
voor het resetten van alle browser preferences heb ik het volgende de sheet:
"css/lib/yui-reset-min.css". Dus padding op 0 is allemaal al geregeld. Heb ondertussen wel een deel van het probleem opgelost in FF werkt het nu maar niet in IE....suprice suprice zullen we maar zeggen. Ik had de link in een ul gezet, deze verwijderen zorgde ervoor dat het correct ging draaien in FF.
1.812 views