SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the problem is that on the "ul.dropdown" (the very top <ul>) has width:100&#37;;, you don't need the width:100% NOR do you need the float:left; on it. Remove both and it should work .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In several places, on multiple stylesheets, you have
    Code:
    ul.dropdown ul ul {
      …  
      left:100&#37;;
      …
      }
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Member
    Join Date
    May 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    May 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if you do not want a horizontal scrollbar at all, add 'overflow-x: hidden' to the body in your stylesheet.

  7. #7
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for all your help everyone.

    I picked up the CSS from here:
    http://www.lwis.net/free-css-drop-do...n.mtv.com.html

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •