Problemer med footer i css
Mit problem er, når opløsningen på skærmen er lille (eller jeg gør vinduet i højden meget lille).. Så springer footeren op over teksten, i stedet for at blive nede på sin plads.. Hvad kan det skyldes?Det skal være sådan at content + footer = 100% i height
Det ser ud til at det er denne er problemet:
<UL class=teaserBar>
<SPAN><a href"">Nyheder</a></SPAN>
</UL>
--html--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<LINK media="screen, projection" href="Default.css" type=text/css rel=stylesheet>
</HEAD>
<BODY class="home">
<DIV class=page>
<DIV class=content>
<DIV class=innerContent>
<DIV class=homeNavigation>
MENU
</DIV>
<UL class=teaserBar>
<SPAN><a href"">Nyheder</a></SPAN>
</UL>
<UL class=placeholder>
<UL class=tekst>
TEKST
</UL>
</UL>
<DIV class=footer>
FOOTER
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
--css--
HTML {
OVERFLOW-Y: scroll
}
BODY {
COLOR: #333; FONT-FAMILY: arial, helvetica, sans-serif; BACKGROUND-COLOR: rgb(233,233,233)
}
HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 100%
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 100%
}
.page {
BACKGROUND-POSITION: 0px 0px; MIN-HEIGHT: 100%; MARGIN: 0px auto; WIDTH: 837px; BACKGROUND-REPEAT: repeat-y; POSITION: relative; HEIGHT: 100%; BACKGROUND-COLOR: gray; TEXT-ALIGN: left
}
.content {
CLEAR: both; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 837px; BACKGROUND-COLOR: white
}
.innerContent {
MARGIN-TOP: 0px; WIDTH: 221px; BACKGROUND-COLOR: white; border-right: rgb(204,204,204) 1px solid; HEIGHT: 100%; POSITION: relative;
}
.placeholder {
LEFT: 200px; WIDTH: 560px; POSITION: absolute; TOP: 315px;
}
.teaserBar
{
font-family: Verdana;
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 10px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px; PADDING-TOP: 0px; POSITION: relative; TOP: 0px; HEIGHT: 100%; TOP: 300px;
}
.teaserBar SPAN
{
MARGIN-TOP: 10px; DISPLAY: block; PADDING-LEFT: 8px; FONT-SIZE: 10px; BACKGROUND: url(arrow-red.gif) rgb(210,210,210) no-repeat left 3px;
}
#footer {
BACKGROUND-POSITION: 0px 0px; BORDER-TOP: rgb(204,204,204) 1px solid; FONT-SIZE: 10px; OVERFLOW: hidden; WIDTH: 100%; COLOR: rgb(102,102,102); BOTTOM: 0px; BACKGROUND-REPEAT: repeat-y; POSITION: absolute; HEIGHT: 15px! important; BACKGROUND-COLOR: #fff
}
