Jump to content

white space at page bottom


Recommended Posts

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

Link to post
Share on other sites

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.

Link to post
Share on other sites
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!
Link to post
Share on other sites
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...