Annoying scrollbar in FF and NSN

[dharrison]

Hi all

I am currently developing the blog template to coincide with the rest of my client's recently revamped website.

Offending page is here: Quality Matters Limited

It looks OK in MSIE 7 but in FF and Netscape I get a horizontal scrollbar present, but it cannot scroll (if that makes sense - its just visible)

What have I done wrong? Any ideas will be gratefully received. I can provide template and stylsheet(s) is needed.

TIA

[wige]

I am not sure what the cause is, but I narrowed it down with Firebug to the headers, both the "lo" and "nav" divs are causing the issue. Only had a few minutes to look though.

[wige]

Ok, I had more time to look this morning and I am not sure why, but the "float: left" in the qmlayers.css style sheet for both the "lo" and "nav" divs seems to be the problem. Removing this tag did not seem to change anything in the layout of the page itself in Firefox, other than causing the scrollbar to go away.

[Dubbya]

I copied your code and, using an inline style, edited the div widths from "100%" to "99%" and the scrollbar disappeared.

I'm thinking this might be indicative of some padding that's adding to the overall width of the divs. For example,

"width: 100%"
"padding: .05em;"

Thus making the overall width .05em + 100% + .05em and too wide to display without a scrollbar. Check your padding (and margins too) to find out where you've gone awry.

As a hackneyed alternative, a quick fix might be to set the div widths to 99% then use a background image applied to the body tag and have it only repeat horizontally. This will prevent the horizontal scrollbar but still make your menu look as though it spans the width of the page, if that's what you want.

body
{ 
background-image: 
url('bgdesert.jpg');
background-repeat: repeat-x
}

.02

[dharrison]

Thanks guys. Kudos to ya both. The problem is sorted.

[bj]

Too late! Glad you got it sorted.

For future, I've found that the Aardvark extension for firefox is the best for finding the culprit div, since when hovered the bad one will always be visible sticking out of the layout. It may not tell you what the fix is but it will point you in the direction of what needs fixing.

I also find it helpful (if a bit divitis-y!) to put inner elements into my structural divs and put the padding on those (which also IE5 proofs things.) So you'll have the wrapper with the 100% width, then the inner .pad class div with the padding on it and no width set.

[dharrison]

Thanks for that bj. You know any help is appreciated.

I am going to have to up the ante on my FireFox tools. I only seem to be using the resize function at the moment.