while i love giant white spaces just like everyone else, having one at the bottom of my website is very frustrating.
to let everyone know before we get started, my 'web authoring' skills are somewhere in between 'total hack' and 'practiced idiot'.

the site i'm talking about is:
http://www.wayfinderexperience.com/php/kid/regional.php

and really, the whole site, cause every page is the same.

i used div layers with relative positioning to get all of the pieces where i wanted them [the only thing on the page which isnt relative positioned is the header/background map thing]

what appears to be happening [to my untrained eye] is that each of the layers is loading in the page directly below the map background, then moving to their intended location- leaving behind a white space in the flow of the document where they used to be.

how do i kill this horrid white space? can anyone help me?
-reed

ps. i know this is a question that you all have answered a million times, but i'm having trouble translating your solutions on other peoples problems into my problem ...

For someone claiming to be a "total hack" the sites pretty cool!


but it gets worse... I imagine your using something like firefox to view the site cos thats giving out massive space underneath, but in IE7, your whole page is cut off half way down!

Working through your code now (unless someone posts before me!)

Well I started off trying to help you out but there are major issues with your site it's going to be alot of work to fix but it will be a good learning experience just post back here if you need anymore help.... for starters you should seperate the lines in your CSS (just easier to learn that way) like

#nav{border: 0; background-color: black;}
 
#nav {
  border: 0;
  background-color: black;
}

the second would just be easier to check especially with the amount of CSS you have there...
alright for starters you do not need to declare each position as relative you can take all of those out. Also you're having major issues with the widths of your div's that's why your page has all the white space at the bottom. you should not have to have all the top: -674px; commands you are having to put that stuff in because of the messed up widths....... it's going to be some major revamping but shouldn't take longer than a day with you working on it....

Also it makes more since to use that first picture as a background image instead of all the z-scores you really don't need them either.

but on a good note it's a nice design I like it....

I agree. Take out all the relative positioning, it's not necessary. It's better to use the normal document flow and position only where absolutely needed.

Z-index ONLY works with absolute positioning, so that's a useless exercise in itself.

It also looks like you're making up your own tags.. can't do that. There are no such tags as <b1> and <b2>. I suspect you meant to define them as CLASSES, and if so then the proper usage would be <p class="b2"> etc., not <p><b1> as you have it.

AS Blackhawk already said, the big image should be a background image of your main div, leaving the area wide open then to put all your other stuff 'on top' of the Bg image.

Then you'd use floats, marigns and padding to shove things where you want them. The ONLY thing I'd make position: relative is a #container div that holds everything else.

It IS a nice design, good job there

okeydoke ... so,

- i changed the css to more closely resemble standard practice [and it does make it easier to looks at]
- the page stops halfway down in ie7 ?!?! i havent even looked at ie7 yet, right now i'm focusing on firefox and ie6.
- the map and the banner at the top are part of the same image, called 'background.jpg', which isnt part of a div layer, just an image inserted in a table

- now, as for 'floats', i dont really feel like i understand them correctly, as it seems like [from what i've been able to read] that you can use floats to position things left or right of their natural position in the document flow ... but i have lots of things at the same 'latitude' [for lack of the appropriate nomenclature] .. so what would the code for the float look like?

- lastly, and i hope this doesnt get my ip banned, is there any lame, copout, quick fix type thing which will aid me in my quest? i only see this site being used for about 2 years, and after that we'll be redesigning again [this time with enough money to hire one of you fine folk] ... so, this is really just a cob job meant to be an improvement on our previous site:
[ http://www.wayfinderexperience.com ]
... so, yeah ... i'm only concerned with the site being 'good enough for government work', as it only has to do the job for a fairly short period of time ...

-reed

okok. here i am, hours after my last post, having dug about 5feet of my new grave ....
here is a test-page using floats, margins, etc for positioning.
http://www.wayfinderexperience.com/php/aaa/test.php

- the css is built for iexplore only, right now.
- i can't figure out how to get the bigimage and the textbox to butt right up against the bottom of the nav
- that javascript dissolving slideshow needs to be placed inside that pictureframe, but i dont know how to do it other than using relative positoning, and that would give me the whitespace problem again- right? how else can i drop it in there ... when i tried absolute positioning, it didnt look right in 800/600, and would move when the page was resized.

thank you very much for your prompt help ... and hopefully i've made up for asking for shortcuts ... redoing the site using floats took me 1million hours. nonstop. except to get more alchohal and coffee.

-reed

this is 10,000 x's better we'll make sure you don't have to dig that last ft of your grave I've got a meeting to attend right now but I'm going to work on this and should post back here in about 3 hours with how to fix it..... this one is definately work able good job.

but in response to your question a little bit of positioning is ok it's just when you are trying to do all of it that it's not really the best thing to do..

Well, if you want you can give my attempt a try.
I'll let you look at the code but I basically started from scratch and used a bunch of DIV's and some intermediate CSS techniques to get it done.
I didn't include your JS files but I'm sure you can put them in yourself as I didn't have all of the images.

View it at: http://www.theblt.com/temp/
Source: http://www.theblt.com/temp/tryit.zip

Tested & Working:
IE 6
Firefox 2
Opera 9

Any questions just let me know.

also:
After looking at your original script, here's some tips:
-Stay away from positioning items as much as possible (relative & absolute)
-Don't use tables for anything other than table data
-Look for tutorials using CSS and wrappers, they're a good way to center content using DIV's with a static width

Well there ya go blt beat me to it if you want to view what I did just zap me a message and I'll send it too you

ok, so here i am again ... jeez ... i thought this thing was totally nailed.

alrighty, i've posted the whole site, and its all working just dandy.
http://www.wayfinderexperience.com/php/edu

so, the problem i'm having is with the dissolving slideshow- when its just the still image, like blt sent me, its rock and roll ... but as soon as i use the js slideshow, it shifts to the left ... so i used cell padding to push it to the right, and ... blamo! it works perfectly in firefox, and is about 35px to the right of where it should be in iexplore. gah.
also, and this is kind of nit-picky, how can i reduce the vertical height of the whole page the by a few pixels, so that there isnt a vertical scroll bar in 1024.768?

-reed

Look for this line in the slide-head.js:

document.write('<div id="master'+this.slideshowid+'" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')

and replace it with:

document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')

ALSO

In the CSS find:

#picture-frame {
	width:125px;
	height:279px;
	background-image:url(images/pictureframe.gif);	
	text-align:center
}

and replace it with:

#picture-frame {
	width:125px;
	height:279px;
	background-image:url(images/pictureframe.gif);	
}

Oh, and as for the vertical scrollbar:

body {
	margin:10px 0;
}

Change the 10px to something smaller.

body {
	margin:10px(top/bottom) 0(left/right);
}

alrighty- finally all done ... phew.

i looked at the two lines of code of the .js, and i couldnt even see the different- copied and pasted, and gone through letter by letter ... i must just be challanged in some way.

and as for the vert. scroll, i already set the margin on the body to 0, to no real avail. i think the image in the background may just be too big to fit. oh well, it's all good.

-reed

thank you guys all so much, again.

I'm not seeing the vertical scroll bar but you can always just add this to the body style "height: 99%;" that will shrink it 1% so there is no scrolling.

ok, so i was totally money, everything done, and ready to launch, when i've run into one more problem i can't solve on my own.

there is a page which is different from the rest of the site, which contains a blog. as shouldnt be too surprising, it looks perfect in firefox, and is all kinds of wrong in IExplore.

the page is:
http://www.wayfinderexperience.com/blog.php

its the last page of the site to need work, and then i'm good to go. i figure its gotta be something easy which i just can't see, for some reason. one top of that, all of the other pages are just dandy- take a look at:
http://www.wayfinderexperience.com/index2/php

i'm baffled.
-reed

EDIT: HAHAHAHAHAHAHAHAHAHAHAHA
i fixed it. HAHAHAHAHAH. [i have the rushing feeling like i've finally defeated my machine enemy in 1 on 1 combat. oh, the thrill.

Just curious, what are you using to design this site? There's some odd code on your site such as the b2 tags which aren't even valid HTML elements. Also, there's random </p> scattered throughout the page being used instead of <br>. It's not anything that will necessarily "break" your page but it's also not good coding practice either. Just lettin ya know. Hope the launch goes well.

well, the site was mostly made in dreamweaver... all of those <b1> and <b2> tags were a mistake in which i was trying to do 'class' elements i suppose... but the browsers are working with it alright, so i'm not going to bother changing it ... this is, more than likely, the only website i'll ever build, and so i'm mostly just grateful to folk like you who've been generous enough with your time and energy to help me finish this one ... at least semi-properly.

-reed
ps. the launch has been excellent, people love the new site.