Site invoking horizontal scroll bar - can't work out why

When I view my site in a browser, at e.g. 1280*1024px screen res. there is no horizontal scroll bar.

When I resize the browser window by making it narrower, the horizontal scroll bar appears way before the width of the browser gets to the edge of the “page” where the black background meets the white page content.

I have stripped a page down to the bare bones. When I remove the drop down menu HTML, the problem goes away.

The problem then is with the CSS / HTML for the drop down menu, but it’s pretty complex, and I can’t see where the problem lies.

The test page is here:

http://jimpix.co.uk/test.html

Any advice much appreciated.

Thanks

Hi, the problem is that on the “ul.dropdown” (the very top <ul>) has width:100%;, you don’t need the width:100% NOR do you need the float:left; on it. Remove both and it should work :).

Sorry for the long delay in replying.

I tried that out, but it’s still the same I’m afraid. The horizontal scroll bar appears a long time before you get to the white page content.

I’m not sure what’s going on!

Any advice much appreciated.

Thanks

In several places, on multiple stylesheets, you have

ul.dropdown ul ul {
  &#8230;  
  left:100&#37;;
  &#8230;
  }

and you’re using {visibility: hidden;} to hide the drop-downs. The visibility property does not affect the existence of the element in the flow. It’s still there, you just can’t see it.

You really, really must organize your stylesheet(s). Poorly planned stylesheets cause tangled wads of brain cramping confusion.

cheers,

gary

As Gary said, change your ‘left’ property to 150px.

In dropdown.css, remove ‘visibility: hidden;’ from ‘ul.dropdown ul’ and add a ‘display: none;’.

Then remove the ‘visibility: hidden;’ from ‘ul.dropdown li:hover > ul’ and add a ‘display: block;’

This will solve your horizontal scroll problem.

And if you do not want a horizontal scrollbar at all, add ‘overflow-x: hidden’ to the body in your stylesheet.

Thanks very much for all your help everyone.

I picked up the CSS from here:

If I had any skills, I would be able to debug issues like this. As it is, I’m a silly old vulture, nabbing stuff from the web and then not being able to fix it when there are issues.

Anyway, thank you VERY much for your help and patience everyone, I really appreciate it.