: (
This code made me sad. I’m tempted to tell you to go back to the heights but make them say “min-height” instead of “height” so that content inside can grow.
First thing I’ll note is that, on my browser, the spaces aren’t as tall as they seem on your screenshot. This is worrying because any pixel values I give you probably change based on screen width.
The box on the right, with the rapid search form and the little winged heart? The guy put a top margin of 20px on it, which pushed it down. In your screenshots, it’s too far down, leaving space on the right (is that large image a placeholder??). It also caused the space on the bottom left (because the rapid search form box was pushed down, it was sticking out the bottom).
If you don’t have any top margin, the whole green section will be too high. Now, normally, with plain old HTML, boxes won’t do this; naturally they will just push up against the bottom of the one above them, not overlap them. Yours are overlapping and while it’s fixable, it’s difficult. Each single thing one sees on the page is wrapped by lots and lots of boxes. What are those boxes doing?? I assume they’re in the template in case someone wants to do extra styling or something. The background images are also very static. The green background has pre-made holes on the left for join and sign in buttons, meaning any change in the content on the rapid search could affect it.
Possibly lowering the top margin to 10px or so (or whatever until it looks ok) may work temporarily, but I do not know if it will work cross browser because your spaces looked taller than mine.
This whole set of code is a) more than you need, and b) kindof hard to wrangle.
What are your options? How much work do you want to put into this?
Possibly the easiest thing for you to do for fast results and not much coding is what I mentioned earlier: turning that old height into a min-height.
Min-height ensures that a box is at least the height you set (except in IE6), but if the content inside grows, the box can grow too.
IE6 doesn’t know min-height, but since it lets boxes with “height” grow (it’s not supposed to, but oh well), we usually give IE6 a height, either in an IE6 stylesheet or behind a Tan hack in the main stylesheet (you have about 15 stylesheets. That’s a lot of loading).
The more difficult solution would be to redo most of your code. There is more code than necessary: for example. every list item in the top menu has the same class of “tab”. Lots of little things like that start adding up pretty fast to a lot of code.
Which div did you change height? Another reason you see “spaces” is because the background of the element doesn’t have the white background colour that would hide the edges of an image.
