PDA

View Full Version : weird bottom blank space?

aa7on
09-02-2009, 06:41 PM
so i have finished my website, no errors at all or anything (checked those validation websites.. no errors on css/html/whatever) but at the bottom there is a spacing of about 100px maybe on firefox, and about 700px on safari, but on internet explorer theres no space.. it's just like the website extends but there is no content if you get me?

i did a div { border } to check the borders of all my divs, and they are all correct.. it just seems like a big blank space of nothing at the bottom of my page which makes it scroll down further than it should be..

im guessing margins and paddings, but there is nothing like that on my css code.. anyone have a guess to what IE doesnt pick up, but FF/safari does?!

btw the website is:

restartonline dot co dot uk slash wiredtest
Mandarin
09-03-2009, 12:41 AM
I see no gratuitous spacing on IE, just like you said. But in Firefox 3.5, Google Chrome Beta 3, and Opera 10 I'm getting exactly 547 pixels of blank vertical space at the bottom of the page. When something is relatively positioned, it is given space in the layout and then repositioned. Your last two elements (#smallprint and #bottomhome) are both relatively positioned with -547px top margins, so the blank area at the bottom is where #bottomhome is supposed to be before it's moved backwards up the page. You could fix this by using absolute positioning (ugh) or using no positioning at all and letting the elements flow freely with floats and clears. This would actually be even easier than usual on your site because everything has explicit heights already.
coothead
09-03-2009, 03:27 AM
Hi there aa7on,

here is your page reworked according to Mandarin's "flowing" instructions...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!--this is for coothead testing and may be removed-->
<base href="http://www.restartonline.co.uk">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>we.live.wired</title>

<style type="text/css">
* {
margin:0;
padding:0;
list-style-type:none;
}
body {
background:#000 url(/wiredtest/images/background.gif) no-repeat scroll top center;
font-family:arial,helvetica,sans-serif;
font-weight:normal;
color:#fff;
}
#container {
width:991px;
height:1282px;
margin:auto;
}
#headerimage {
height:221px;
text-indent:-5000px;
background-image:url(/wiredtest/images/header.gif);
}
#headerimage a {
display:block;
height:213px;
}
#navigation {
height:95px;
}
#navigation li {
float:left;
}
#navigation li a {
display:block;
height:95px;
text-indent:-5000px;
background-position:top;
}
#nav1 {
width:198px;
background-image:url(/wiredtest/images/nav1.gif);
}
#nav2 {
width:184px;
background-image:url(/wiredtest/images/nav2.gif);
}
#nav3 {
width:265px;
background-image:url(/wiredtest/images/nav3.gif);
}
#nav4 {
width:344px;
background-image:url(/wiredtest/images/nav4.gif);
}
#navigation li a:hover {
background-position:bottom;
}
#newsfeed {
float:left;
display:inline; /*required by IE6*/
width:499px;
height:584px;
padding:80px 0 0 15px;
margin:27px 17px 27px 2px;
background-image:url(/wiredtest/images/newsfeed.gif);
}
#newsfeed ul {
width:492px;
height:577px;
overflow: auto;
}
#newsfeed li {
margin-bottom:57px;
}
.text {
margin-left:10px;
font-size:13px;
}
.header {
font-size:30px;
letter-spacing: -3px;
color:#c4c4c4;
}
#rightside {
float:left;
width:446px;
margin-top:27px;
}
#facebook {
margin-left:14px;
}
#flash {
width:433px;
height:160px;
padding:7px;
margin-top:14px;
background-image:url(/wiredtest/images/flash.gif);
}
#thismonth {
width:393px;
height:140px;
padding:77px 25px 0 30px;
background-image: url(/wiredtest/images/thismonth.gif);
}
#tmleft {
float:left;
width:193px;
}
#tmright {
float:right;
width:193px;
}
.header2 {
font-size:25px;
letter-spacing:-2px;
color:#c4c4c4;
}
#smallprint {
clear:both;
height:75px;
padding-top:50px;
background-image:url(/wiredtest/images/smallprint.gif);
font-size:10px;
color:#6d6d6d;
text-align:center;
}
#bottomhome {
height:123px;
background-image:url(/wiredtest/images/bottomhome.gif);
}
</style>

</head>
<body>

<div id="container">

<h1 id="headerimage"><a href="" title="Return to homepage">wired</a></h1>

<ul id="navigation">
<li><a id="nav1" href="/">home</a></li>
<li><a id="nav2" href="/about">about</a></li>
<li><a id="nav3" href="/program">program</a></li>
<li><a id="nav4" href="/community">community</a></li>
</ul>

<div id="content">

<div id="newsfeed">
<ul>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
</ul>
</div><!-- end #newsfeed -->

<div id="rightside">

<img src="/wiredtest/images/twitter.gif" alt="Follow us on Twitter">
<img id="facebook" src="/wiredtest/images/facebook.gif" alt="Follow us on Facebook">

<div id="flash"></div>

<div id="thismonth">

<ul id="tmleft">
<li><span class="header2">fri 11th</span><span class="text">wired</span></li>
<li><span class="header2">fri 18th</span><span class="text">wired</span></li>
<li><span class="header2">fri 25th</span><span class="text">wired</span></li>
</ul>

<ul id="tmright">
<li><span class="header2">wed 16th</span><span class="text">wired</span></li>
<li><span class="header2">wed 23rd</span><span class="text">wired</span></li>
<li><span class="header2">wed 30th</span><span class="text">wired</span></li>
</ul>

</div><!-- end #thismonth -->

<img src="/wiredtest/images/community.gif" alt="Wired Community">

</div><!-- end #rightside -->

<div id="smallprint">&copy; copyright 2009 welivewired.co.uk - suncoast youth</div>

<div id="bottomhome"></div>

</div><!-- end #content -->

</div><!-- end #container -->

</body>
</html>
Mandarin
09-03-2009, 03:37 AM
I was just wondering why you downgraded him to HTML Strict? Personally, I would have upgraded him to XHTML Strict given that he was already in compliance with XHTML Transitional.

Also, the end tag for #bottomhome isn't quite closed.
coothead
09-03-2009, 03:50 AM
Hi there Mandarin,

thanks for noticing the typo. :agree:

As for the dtd, I do not believe that html4/strict.dtd is a downgrade from xhtml1-transitional.dtd. :disagree:

I think that we had a discussion about dtds in another thread a little while ago, and probably agreed to differ. ;)
My view for what it is worth is...

If you're serving XHTML as "text/html" then it is, for all practical purposes, HTML, not XHTML.
Mandarin
09-03-2009, 03:56 AM
I was just commenting because he had clearly gone out of his way to write XHTML originally, self-closing tags and all. Starting from scratch, I think either doctype is perfectly fine. But he was starting from XHTML already, so I was just wondering. I think we can both at least agree that either flavor of Strict DTD is better than Transitional though. :)

Anyway, it's almost 5am, time for me to go running.
coothead
09-03-2009, 04:06 AM
Hi there Mandarin,

I have seen a large increase in the use of the xhtml1-transitional.dtd over the last year. :eek:
I have a sneaky suspicion that this is due to Dreamweaver.
They, obviously, have no real confidence in their coding quality. :disagree:
Luckily, for me, my editor...

http://www.coothead.co.uk/images/love_notepad.gif
...has no such problems. :lol:
aa7on
09-03-2009, 05:19 AM
wow.. you guys are legends

was i just using too much div positioning then?
coothead
09-03-2009, 05:32 AM
Hi there aa7on,

as Mandarin pointed out in his first post...
You could fix this by using absolute positioning (ugh) or using no positioning
at all and letting the elements flow freely with floats and clears.

This is the method that I used in the reworking of your code. :agree:
aa7on
09-03-2009, 05:40 AM
ahh okay :)

thanks very much.. this was my first template that i coded with positioning and all, i don't think i'll do much div positioning in the future then haha

also these smileys are awesome :cool:

ALSO

i see you added 'display:inline', can you explain? i thought display:inline just kinda floated things? but never really understood it?
coothead
09-03-2009, 06:02 AM
Hi there aa7on,

I did put a comment to the side of display:inline stating that this was required by IE6, hoping that you would not request the reason for this. ;)
But you did so I had to find a suitable link to explain the situation.

Here is one that should help...
The IE5/6 Doubled Float-Margin Bug :supereek: (http://www.positioniseverything.net/explorer/doubled-margin.html)
aa7on
09-03-2009, 06:40 AM
i see i see, so you just add that to any margin divs that you are doing?

btw, i have another problem?

i have done this:

restartonline dot co dot uk slash wiredtest slash about.html

but if i try and add 'bottomhome', it doesn't add it below newsfeed and rightside, it adds it just below rightside? check it out here:

restartonline dot co dot uk slash wiredtest slash about2.html

(i didn't use any positioning and just floated it this time ;))
coothead
09-03-2009, 10:31 AM
Hi there aa7on,

here is your corrected code - (nothing major is wrong :disagree:) ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!--this is for coothead testing and may be removed-->
<base href="http://www.restartonline.co.uk">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>about - we.live.wired</title>

<style type="text/css">
* {
margin:0;
padding:0;
list-style-type:none;
}
body {
background:#000 url(/wiredtest/images/aboutbackground.jpg) no-repeat scroll top center;
font-family:arial,helvetica,sans-serif;
font-weight:normal;
color:#fff;
}
#container {
width:991px;
height:1282px;
margin:auto;
}
#headerimage {
height:221px;
text-indent:-5000px;
background-image:url(/wiredtest/images/header.gif);
}
#headerimage a {
display:block;
height:213px;
}
#navigation {
height:95px;
}
#navigation li {
float:left;
}
#navigation li a {
display:block;
height:95px;
text-indent:-5000px;
background-position:top;
}
#nav1 {
width:198px;
background-image:url(/wiredtest/images/nav1.gif);
}
#nav2 {
width:184px;
background-image:url(/wiredtest/images/nav2.gif);
}
#nav3 {
width:265px;
background-image:url(/wiredtest/images/nav3.gif);
}
#nav4 {
width:344px;
background-image:url(/wiredtest/images/nav4.gif);
}
#navigation li a:hover {
background-position:bottom;
}
#newsfeed {
float:left;
display:inline; /*required by IE6*/
width:479px;
height:689px;
padding:125px 0 0 15px;
/*margin:27px 7px 27px 0px;*/ margin:27px 7px 0 0;
background-image:url(/wiredtest/images/aboutleft.gif);
}
#newsfeed ul {
width:472px;
height:682px;
overflow: auto;
}
#newsfeed li {
margin-bottom:57px;
}
.text {
margin-left:10px;
font-size:13px;
}
.header {
font-size:30px;
letter-spacing: -3px;
color:#c4c4c4;
}
#rightside {
background-image:url(/wiredtest/images/aboutright.gif);
float:right;
width:475px;
height:807px;
margin-top:27px;
padding: 7px 0px 0px 14px;
}
#rightside ul {
/*width:478px;*/ width:475px;
height:800px;
overflow: auto;
}
#rightside li {
margin-bottom:57px;
}

.header2 {
font-size:25px;
letter-spacing:-2px;
color:#c4c4c4;
}
#bottomhome {
/*float:clear;*/ clear:both;
height:123px;
background-image:url(/wiredtest/images/bottomhome.gif);
}
#content {
/*width:991px;*/
/*height:966px;*/
}

</style>

</head>
<body>

<div id="container">

<h1 id="headerimage"><a href="" title="Return to homepage">wired</a></h1>

<ul id="navigation">
<li><a id="nav1" href="/">home</a></li>
<li><a id="nav2" href="/about">about</a></li>
<li><a id="nav3" href="/program">program</a></li>

<li><a id="nav4" href="/community">community</a></li>
</ul>

<div id="content">

<div id="newsfeed">
<ul>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>

<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>

<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
</ul>

</div><!-- end #newsfeed -->

<div id="rightside">
<ul>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>

<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>

<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
<li><span class="header">01/09/09</span><span class="text">so.. hi? how is everyone dooen?</span></li>
</ul>
</div><!-- end #rightside -->

<div id="bottomhome">hey</div>

</div><!-- end #content -->

</div><!-- end #container -->

</body>
</html>

Note:-

1. float comes in two flavours left and right.
2. clear has three left and right and the most commonly used both.
3. float:clear does have a nice ring to it but mixing-and-matching is not allowed. :lol: