Vertical whitespace shows on the right side when resizing browser ! 1

[geneboss]

Hi everyone,
In my project I think I have an issue with CSS. Generally the website works fine, however there is one prominent issue. When I resize the entire window by dragging the border of my browser it regularly happens that I get an unwanted white space on the right side.
Website address is

http://www.hiresafe.com

Could you please advise me how to avoid this behavior?

Thank you
Bo

 

[johnwm]

Can't duplicate the problem on FF3.6, IE8 or Chrome 8.0.5. What browser are you seeing the problem in?

It is generally worth solving the validation errors on the page before worrying about layout issues as many layout issues are resolved by valid markup. See

http://validator.w3.org/check?verbose=1&uri=http://www.hiresafe.com/

for details.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[geneboss]

Thank you for your response John,
It's very strange, the problem still persists. I tried all FF3.6, IE8 or Chrome 8.0.5. browsers.

The CMS i'm using doesn't claim valid CSS, only valid markup, but I will check it anyhow.

Thanks again.
Bo

 

[Dankeys]

Hi Bo,
I see your problem, after resizing the browser smaller (firefox), when you scroll to the right using the browser horizontal bar, there's unwanted white at the top right side. That is exactly the problem I am having on my website (audiobiblekjv.org)

I don't have the solution yet, I hope you figure out how to fix it so that I can find out too. If you find out what was wrong, PLEASE send me a note via at: dan@... my website address.

Thanks! -- Dan

 

[johnwm]

I can see the problem now. However I still see 110 HTML validation errors and 205 CSS errors using the standard Firefox developer add-on (referenced above)

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[BobbaFet]

Wow... that's a lot... miracle the website displays as nicely as it does... I'll bet if you fix those the problem will go away as well.

BobbaFet

if not Programming = 'Severe Migraine' then
                       ShowMessage('Eureka!');

 

[geneboss]

I know...lots of errors...but I managed to fix most of them....not bad for a newbie. there are a few left that I don't seem able to fix. looks like error 820 applies to almost all other errors.

 

[dmsd40]

Can you change the entire background to a color that would be less obviously unintended? Or does it leave a white space even with a different background color set?

Windows Cloud Servers:

http://www.resellerchoice.com/Cloud_Hosting/Benefits_of_Cloud_Hosting.aspx

Windows Reseller Hosting:

http://www.resellerchoice.com

 

[geneboss]

Hi dmsd40,
Thanks for looking into this.
it leaves a white space even with a different background color set.

 

[dmsd40]

Interesting. I just checked and this site (tek-tips) does the exact same thing under those circumstances! My site (see sig) does not. What do these sites have in common, I wonder? Are you using a similar software / template, maybe?

Windows Cloud Servers:

http://www.resellerchoice.com/Cloud_Hosting/Benefits_of_Cloud_Hosting.aspx

Windows Reseller Hosting:

http://www.resellerchoice.com

 

[geneboss]

Yes, I just noticed it...
I don't believe we use the same template. But it's seems to be a common problem...

 

[Vragabond]

I guess I thought this problem was solved, but it wasn't.

The problem is very simple. I imagine the white space you're talking about is the background disappearing, when you make your window smaller than your page. So let's see:

Your page has width set to 1006px. That means that when width is larger than that number, your page appears in the center, and when width is getting closer to this number, margins on the left and right are disappearing. When the width of the browser is below 1006px, a scrollbar appears and user needs to scroll to see the content.

On the other hand, your header and footer have no specified width for the element that has the background applied to it (in the case of header, that is .tTopWrap). This is because you want your background to spill across the entire width of the page, when that is larger than 1006px. When you specify no width though, the width equals to that of their parent container. In your case, you have no width set on any of the parent containers, equaling the width to the browser window.

Now, if you make browser window smaller than 1006px, your .tTopWrap is smaller in width then the rest of the page, causing an empty space, where the page needs to scroll.

This is easily rectified by specifying minimum width for the elements that need to extend the entire width, but should not shrink beyond certain point. Just add [blue][tt]min-width: 1006px;[/tt][/blue] to every element that does that and you should be fine.

Just bear in mind that min-width does not work on certain ancient browsers, such as IE6. If you need to support that relic, you will have to find another workaround.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[geneboss]

Thank you very much Vragabond,
It did it....yeaaaaaa.
your post is very educational and my the lesson of the day

Thanx again