I have this problem a lot: my footers will overlap up into the main div of my website in Mozilla but work fine in IE.
example:
It looks like something like this in IE (the correct way):
text at bottom of main div
text of first line of footer
But like this in Mozilla:
text of first line of footer
text at bottom of main div
please help!
this is the template I'm using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<!-- saved from url=(0093) -->
<HTML lang=en xmlns:v="urn:schemas-microsoft-com:vml" xmlns="urn:schemas-microsoft-comfficeffice"><HEAD><TITLE>
Planet of the Idiots</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="Copyright (c) 2004 Roger Johansson" name=copyright>
<META content="Roger Johansson" name=author>
<head>
</head>
<STYLE type=text/css>
BODY {
//*padding: 0px;
background-position: 0% 0%;
margin: 0px;
COLOR: #000; background-repeat: no repeat;*//
}
HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #a7a09a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px
}
#wrap {
BACKGROUND: #ffffff;
MARGIN: 0px auto;
WIDTH: 890px;
}
#header {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ddd;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}
H1 {
MARGIN: 0px
}
#nav {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#nav LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#main {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
FLOAT: left;
PADDING-BOTTOM: 10px;
WIDTH: 590px;
PADDING-TOP: 0px;
border-right: 1px #cccccc solid;
border-left: 1px #cccccc solid;
}
H2 {
font-family:"Times New Roman", Times, serif;
font-size 22px;
font-weight: normal;
}
H3 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size 8px;
font-weight: normal;
font-size: 11px;
}
#sidebar {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
FLOAT: right;
PADDING-BOTTOM: 10px;
WIDTH: 278px;
PADDING-TOP: 0px;
height: 900px;
}
#footer {
CLEAR: both; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #cc9; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}
#footer P {
MARGIN: 0px
}
HTML #footer {
HEIGHT: 1px
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
.style1 {
margin-top: 0;
margin-bottom: 0;
}
</STYLE>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<body style="background-color: #FFFFFF; background-attachment: scroll;" bgproperties="fixed">
<DIV id=wrap style="width: 895px; height: 5687px" class="style224">
<DIV id=nav class="style180" style="height: 208px; width: 887px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span class="style183"> </span>
<br>
<span class="style181"> </span><span class="style184"> </span><span class="style182"> </span><br>
</DIV>
<DIV id=main style="height: 38px; " class="style135">
<p class="style1"> </p>
<p class="style1"> </p>
<p class="style1"> </p>
<p class="style1">text at bottom of main div</p>
</DIV>
<DIV id=footer style="padding: 0px; height: 41px; background-color: #FFFFFF;" class="style7">
<p>text of first line of footer</p>
<br>
<span class="style150"><br>
</span> </DIV>
</DIV>
</BODY></HTML>
example:
It looks like something like this in IE (the correct way):
text at bottom of main div
text of first line of footer
But like this in Mozilla:
text of first line of footer
text at bottom of main div
please help!
this is the template I'm using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<!-- saved from url=(0093) -->
<HTML lang=en xmlns:v="urn:schemas-microsoft-com:vml" xmlns="urn:schemas-microsoft-comfficeffice"><HEAD><TITLE>
Planet of the Idiots</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="Copyright (c) 2004 Roger Johansson" name=copyright>
<META content="Roger Johansson" name=author>
<head>
</head>
<STYLE type=text/css>
BODY {
//*padding: 0px;
background-position: 0% 0%;
margin: 0px;
COLOR: #000; background-repeat: no repeat;*//
}
HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #a7a09a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px
}
#wrap {
BACKGROUND: #ffffff;
MARGIN: 0px auto;
WIDTH: 890px;
}
#header {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ddd;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}
H1 {
MARGIN: 0px
}
#nav {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#nav LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#main {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
FLOAT: left;
PADDING-BOTTOM: 10px;
WIDTH: 590px;
PADDING-TOP: 0px;
border-right: 1px #cccccc solid;
border-left: 1px #cccccc solid;
}
H2 {
font-family:"Times New Roman", Times, serif;
font-size 22px;
font-weight: normal;
}
H3 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size 8px;
font-weight: normal;
font-size: 11px;
}
#sidebar {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #ffffff;
FLOAT: right;
PADDING-BOTTOM: 10px;
WIDTH: 278px;
PADDING-TOP: 0px;
height: 900px;
}
#footer {
CLEAR: both; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #cc9; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}
#footer P {
MARGIN: 0px
}
HTML #footer {
HEIGHT: 1px
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
.style1 {
margin-top: 0;
margin-bottom: 0;
}
</STYLE>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<body style="background-color: #FFFFFF; background-attachment: scroll;" bgproperties="fixed">
<DIV id=wrap style="width: 895px; height: 5687px" class="style224">
<DIV id=nav class="style180" style="height: 208px; width: 887px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span class="style183"> </span>
<br>
<span class="style181"> </span><span class="style184"> </span><span class="style182"> </span><br>
</DIV>
<DIV id=main style="height: 38px; " class="style135">
<p class="style1"> </p>
<p class="style1"> </p>
<p class="style1"> </p>
<p class="style1">text at bottom of main div</p>
</DIV>
<DIV id=footer style="padding: 0px; height: 41px; background-color: #FFFFFF;" class="style7">
<p>text of first line of footer</p>
<br>
<span class="style150"><br>
</span> </DIV>
</DIV>
</BODY></HTML>