1. Home
  2. Forums Index
  3. Browser Side / CSS 8:57 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

footer and padding problems

         

wolfus

11:18 pm on Jul 9, 2007 (gmt 0)

10+ Year Member


so, I'm admittedly a major newb, and while I grasp simple css concepts, I think I may have gone a bit over my head on this... Here is my code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>title</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 11px/18px Arial, sans-serif; COLOR: #000; PADDING-TOP: 0px; BACKGROUND-COLOR: #000000; TEXT-ALIGN: center
}
H1 {
FONT-SIZE: 20px; MARGIN: 0px; LINE-HEIGHT: 24px; BORDER-BOTTOM: #c00 2px solid
}
H2 {
FONT-SIZE: 14px; MARGIN: 0px
}
#right {
float: right; width:341px; text-align:center;
}
#left {
float:left; width:500px; text-align:left;
}
A {
COLOR: #c00
}
A:hover {
COLOR: #000
}
UL {
MARGIN: 5px 5px 0px 0px; LIST-STYLE-TYPE: none
}
OL {
MARGIN: 5px 5px 40px 30px; LIST-STYLE-TYPE: square
}
#wrapper {
PADDING-RIGHT: 40px; PADDING-LEFT: 40px; PADDING-BOTTOM: 40px; MARGIN: 0px auto; WIDTH: 841px; PADDING-TOP: 40px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: left; height: 100%; position: relative;
}
* HTML #wrapper {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 841px; BORDER-BOTTOM: 0px
}
#lead {
FONT-WEIGHT: bold; MARGIN-BOTTOM: 40px; FONT-STYLE: italic
}
#player {
FLOAT: right
}
#partners {
FLOAT: right
}
#pid {
MARGIN: 8px 0px 0px
}
#footer {
MARGIN-TOP: 60px; FONT-SIZE: 11px; COLOR: #444325; position: absolute; bottom: 0;
}
</STYLE>

<SCRIPT src="swfobject.js" type=text/javascript></SCRIPT>

<SCRIPT src="swfmacmousewheel.js"
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };

function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
};
</SCRIPT>

</HEAD>

<BODY>
<DIV class=header>
<DIV align=center><IMG height=272 alt="" src="header.gif" width=921></DIV></DIV>
<DIV id=wrapper>
<H1>ABOUT THE SITE</H1>Shkdbjchsbdjhbvjsagjvhbsakdhbjashbd <p>

<div id="right">
<P id=player><A href="http://www.macromedia.com/go/getflashplayer">Get the Flash
Player</A> to see this movie.</P>
<SCRIPT type=text/javascript>
var so = new SWFObject('flvplayer.swf','mpl','320','320','8');
so.addParam("allowfullscreen","true");
so.addVariable("file","playlist.xml");
so.addVariable("enablejs","true");
so.addVariable("javascriptid","mpl");
so.addVariable("displayheight","240");
so.write('player');
var mmw = new SWFMacMouseWheel(so);
</SCRIPT>
</div>

<div id="left">
<H2>VIDEOS</H2>
<UL>
<LI><img src="kajscaksck.jpg" align=left width=95
height=70> <A href="javascript:sendEvent('playitem',1)">Bscn,amsn,mc</A> - skajckbabcmnbsbdhdbsjhcnsax <br></br><hr><br>
</LI>
<LI><img src="kajscaksck.jpg" align=left width=95
height=70> <A href="javascript:sendEvent('playitem',1)">Bscn,amsn,mc</A> - skajckbabcmnbsbdhdbsjhcnsax <br></br><hr><br>
</LI>
<LI><img src="kajscaksck.jpg" align=left width=95
height=70> <A href="javascript:sendEvent('playitem',1)">Bscn,amsn,mc</A> - skajckbabcmnbsbdhdbsjhcnsax <br></br><hr><br>
</LI>
<LI><img src="kajscaksck.jpg" align=left width=95
height=70> <A href="javascript:sendEvent('playitem',1)">Bscn,amsn,mc</A> - skajckbabcmnbsbdhdbsjhcnsax <br></br><hr><br>
</LI>
<LI><img src="kajscaksck.jpg" align=left width=95
height=70> <A href="javascript:sendEvent('playitem',1)">Bscn,amsn,mc</A> - skajckbabcmnbsbdhdbsjhcnsax <br></br><hr><br>
</LI>
</UL>
</div>

<DIV id="right">
hbjchsbdjhcbajshvdcjahsvjdv
</div>

<div id="footer">
<hr>
(C) Copyright 2006-2007 Ckdjcksjdncknsadjcnjksajndcnsaknkjnk
</DIV>
</div>
</body>
</html>

DrDoc

11:29 pm on Jul 9, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld! [WebmasterWorld.com]

So ... what exactly is the problem? :)

lavazza

11:46 pm on Jul 9, 2007 (gmt 0)

10+ Year Member



Running your code through an html validator [validator.w3.org] will highlight the bugs...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

HTML 4
or
XML
?

wolfus

8:21 am on Jul 10, 2007 (gmt 0)

10+ Year Member


ok, I made some changes, and the only real issue now seems to be with the footer in IE... if I change the bottom padding on the wrapper, it cuts off about 200 pixels down the page in FF

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mn bmn</title>

<style type=text/css>

body {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; font: 11px/18px arial, sans-serif; color: #000; padding-top: 0px; background-color: #000000;
}
h1 {
font-size: 20px; margin: 0px; line-height: 24px; border-bottom: #c00 2px solid
}
h2 {
font-size: 14px; margin: 0px
}
#right {
float: right; width:341px; text-align:center;
}
#left {
float:left; width:500px; text-align:left;
}
a {
color: #c00
}
a:hover {
color: #000
}
ul {
margin: 5px 5px 0px 0px; list-style-type: none
}
ol {
margin: 5px 5px 40px 30px; list-style-type: square
}
#wrapper {
padding-right: 40px; padding-left: 40px; padding-bottom: 1300px; margin: 0px auto; width: 841px; padding-top: 40px; background-color: #fff; align: center;
}
* html #wrapper {
border-right: 0px; border-top: 0px; border-left: 0px; width: 841px; border-bottom: 0px
}
#lead {
font-weight: bold; margin-bottom: 40px; font-style: italic
}
#player {
float: right
}
#partners {
float: right
}
#pid {
margin: 8px 0px 0px
}
#footer {
margin-top: 60px;
font-size: 11px;
color: #444325;
position: absolute;
bottom: -1100px;
align: center;
}
</style>

<SCRIPT src="/video/swfobject.js" type=text/javascript></SCRIPT>

<SCRIPT src="/video/swfmacmousewheel.js"
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };

function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
};
</script>

</head>

<body>
<div class=header>
<div align=center><IMG height=272 alt="" src="/images/header.gif" width=921></div></div>
<div id=wrapper>
<h1>ABOUT THE SITE</h1>Sjkjbkjbaskjca <p>

<div id="right">
<p id=player><A href="http://www.macromedia.com/go/getflashplayer">Get the Flash
Player</a> to see this movie.</p>
<script type=text/javascript>
var so = new SWFObject('/video/flvplayer.swf','mpl','320','320','8');
so.addParam("allowfullscreen","true");
so.addVariable("file","/video/playlist.xml");
so.addVariable("enablejs","true");
so.addVariable("javascriptid","mpl");
so.addVariable("displayheight","240");
so.write('player');
var mmw = new SWFMacMouseWheel(so);
</script>
</div>

<div id="left">
<h2>VIDEOS</h2>
<ul>
<li><img src="/images/thumbs/biscuit-H70.jpg" align=left width=95
height=70 alt="still"> <a href="javascript:sendEvent('playitem',1)">knlknl</a> - bhkhbkn n<br><br><hr><br>
<li><img src="/images/thumbs/lamag-H70.jpg" align=left width=95
height=70 alt="still"> <a href="javascript:sendEvent('playitem',2)">lknlkml</a> - lklklk,.m <br><br><hr><br>
<li><img src="/images/thumbs/lamag-H70.jpg" align=left width=95
height=70 alt="still"> <a href="javascript:sendEvent('playitem',2)">lknlkml</a> - lklklk,.m <br><br><hr><br>
<li><img src="/images/thumbs/lamag-H70.jpg" align=left width=95
height=70 alt="still"> <a href="javascript:sendEvent('playitem',2)">lknlkml</a> - lklklk,.m <br><br><hr><br>
<li><img src="/images/thumbs/lamag-H70.jpg" align=left width=95
height=70 alt="still"> <a href="javascript:sendEvent('playitem',2)">lknlkml</a> - lklklk,.m <br><br><hr><br>
<li><img src="/images/thumbs/lamag-H70.jpg" align=left width=95
height=70 alt="still"> <a href="javascript:sendEvent('playitem',2)">lknlkml</a> - lklklk,.m
</li>
</ul>
</div>

<div id="right">
hbjchsbdjhcbajshvdcjahsvjdv
</div>
</body>
<div id="footer">
<hr>
(C) Copyright 2006-2007 ,jk,n nmn and/or its partners All Rights Reserved Worldwide.
</div>
</div>

</html>

Xapti

2:01 am on Jul 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Your HTML and body are not given heights, but "wrapper" is given height 100%. You should specify what 100% is of.

The page doesn't look like it rendered properly for either IE or firefox, firefox a bit more improper.

Can you re-past all the RELEVANT code to your problem? Just recreate your issue in a simple form.

[edited by: Xapti at 2:01 am (utc) on July 13, 2007]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:57 am May 2, 2026