Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Mozilla div overlap problem 1

Status
Not open for further replies.
moron3

moron3

Technical User
Dec 2, 2008
17
0
0
US
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:eek:="urn:schemas-microsoft-com:eek:ffice:eek:ffice"><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">&nbsp; </span>
<br>
<span class="style181">&nbsp;&nbsp;&nbsp; </span><span class="style184">&nbsp; </span><span class="style182">&nbsp;</span><br>
</DIV>
<DIV id=main style="height: 38px; " class="style135">
<p class="style1">&nbsp;&nbsp;</p>
<p class="style1">&nbsp;&nbsp;</p>
<p class="style1">&nbsp;&nbsp;</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>
 
Sort by date Sort by votes
Ok, I have a few thing to point out:
1) When posting code, please use the [ code ]...[ /code ] tags for your code as it makes it a lot easier to read (as demonstrated below).

2) I would advise on taking out your unnecessary 2nd <head> tag.

3) I would also advise on putting "" around your <div id=...> part. eg:
Code: 
<div id=[highlight]"[/highlight]main[highlight]"[/highlight]>

4) If you are using styles within the html, put all of the styles inside the dedicated <style></style> tags and don't do this:
Code: 
<body style="background-color: #FFFFFF; background-attachment: scroll;" bgproperties="fixed">
Just leave it as <body> and put your styles within the styles tag.

5) The problem is in the heights you set for the divs 'main' and 'footer'. If you take these heights out, it should work, and just for clarification, It worked on IE, Avant Browser, FlashPeak SlimBrowser, Google Chrome, Flock, K-Meleon, Opera, Sleipnir and Safari :)
Hope this helps :)

Gareth :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
146
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
132
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
55
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
44
tyutghf
tyutghf
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
78
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top