white space at page bottom

[robber2]

On my screen, this page is displayed with a white space at the bottom of the window, and I don't know why. It doesn't happen on all browsers and platforms. On my Mac, using either Safari or Firefox 3, it displays correctly, the purple background extends to the bottom of the window. But on the Mac, using Bootcamp-WXP-IE 7, the white space is displayed. On my PC-WXP Home, using IE 6 of FF 2 or Safari for Windows, the white space appears. Any help is appreciated:The page:http://perfectionconstruction.com/test/PSJ...s/earrings.htmlA screenshot of the problem: http://perfectionconstruction.com/test/whitespace.JPG

[rzea]

I checked on Firefox 2.0.0.14, IE6/7, Opera 9.0, Safari 3.1.1 and no space for me, the background color went all the way down. Probably you fixed this after posting.Also, I went to look at you HTML code and found this:

<p style="clear:left">& nbsp;</p>

This is a good method to make some elements come all the way down in Firefox. However, the problem with using <p> is that the <p> has a margin at the top and at the bottom, hence, generating unwanted gaps.With this technique you'd want to use a DIV and remove the & nbsp; :

<div style="clear:left"></div>

Another thing is that I went to check your CSS and I didn't see a clear:left; class. So your <p style="clear:left">& nbsp;</p>'s are actually not working. You might want to add the clear class to your CSS.Another thing with this same <p style="clear:left">& nbsp;</p> is that you haver your HTML code full of them. There's no need for that, all you have to do is put element at the bottom of the containing DIV right before the closing </div> tag.Example (but using a DIV, not the <p>):

<div id="thingie">  ...All the content goes here...  <div style="clear:left;"></div></div>

Hope this helps.

[robber2]

Probably you fixed this after posting.

Actually, no, I left it as is for debugging. I still see white space.

With this technique you'd want to use a DIV and remove the & nbsp; :

<div style="clear:left"></div>

I'll give this a try. Thanks.

Another thing is that I went to check your CSS and I didn't see a clear:left; class. So your <p style="clear:left">& nbsp;</p>'s are actually not working. You might want to add the clear class to your CSS.

Correct me if I'm wrong, but I thought I was doing some inline style there, not referring to a class, which I would do with <p class= and not <p style=.

...all you have to do is put element at the bottom of the containing DIV right before the closing </div> tag.

Even with your example, I'm not sure if I understand this. What I'm trying to do with that code is break the lines of images into either two per row or three per row, and preserve that layout no matter the screen resolution or how much the window is resized. So I need that type of break after every two or three images (as you can see by the html code). I will certainly try the technique you mentioned using a div instead of a p. All I know is that a br / won't work. Thanks for the help!

[robber2]

I tried replacing the p's with the div's, I got more white space, at least on my computer. See the new code at:http://perfectionconstruction.com/test/PSJ.../earrings2.html(hint: try resizing your window like really wide!

[rzea]

Correct me if I'm wrong, but I thought I was doing some inline style there, not referring to a class, which I would do with <p class= and not <p style=.

Doh! my bad, you're right, lol. I suggest though, you use a class... after all, you are using a CSS file for things like these "I got more white space,..." and the reason for your white space is this one: #rightcontent.Yes, your id #rightcontent is acting as the background of the website. No, instead use the body tag and apply the background to it.Use this code instead:

body {   url(border.jpg) repeat-y right fixed #4b0082;   }

As you can see, you are repeating the image vertically (like you had it), keeping it fixed (like you had it), but you can also assign where it will be placed, right, and add a background color that will cover ALL the page, #4b0082, thus not generating that white space.As an advice, never use a container as a background for an entire page. Unless you REALLY have to, then do it, but you better know what you're getting yourself into because it can get nasty.Try what I gave you up here and let us know.--Now, I see you are actually doing something with your information that is not the proper way. You are using DIVs to show tabular data. As you know, tabular data is information that's shown in columns, for example: contact or registration forms, product list or price list, etc. And that's exactly what you have in your page: tabular data.Why don't you use a table for your products? Using a table in this case is 110% valid even if you're a "hardcore DIV" person. What you are showing is clearly, as I said, tabular data: product list with prices and descriptions.Go ahead, use a table, it's what the type of information you're displaying should be using.Nonetheless, if you're fixed on using DIVs, the CSS code above can at least get you out of the white space trouble you have.Hope this helps.

[robber2]

Now that's what I'm talkin' 'bout!Awesome advice, I'll get right on it! The body background color's the fix, and I'll certainly take your other suggestions into consideration. Thank you, I'll post back.

[robber2]

Like the proverbial charm, dude! (and I thought I knew a bit about web design!) java script:add_smilie(%22:huh:%22,%22smid_2%22)Thanks again!http://perfectionconstruction.com/test/PSJ...s/earrings.htmlhttp://perfectionconstruction.com/test/PSJ.../earrings2.html

[rzea]

Yes, it looks goo now :)Glad to help.

[Suhail.Mir]

I think you get white space because of images which you have added on left hand side. Try removing them and see!!!

[rzea]

Uh...Suhail Mir... robber2's issue is solved now, try clicking the links