Horizontal scroll bar??

Discussion in 'HTML & Website Design' started by mike323, Jul 6, 2009.

  1. #1
    My site has this annoying horizontal scroll bar. I tried to get rid of it but I don't know why it's not going away.

    Anyone know how to get rid of these? Thank you.
     
    mike323, Jul 6, 2009 IP
  2. umar08

    umar08 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    I can do this job. Please contact me.
    I am css expert and can fix this issue within few hours.
     
    umar08, Jul 6, 2009 IP
  3. marketjunction

    marketjunction Well-Known Member

    Messages:
    3,779
    Likes Received:
    187
    Best Answers:
    0
    Trophy Points:
    183
    #3
    It's a width issue (I know, duh).

    Anyway, without looking through your code, I just edited your body CSS (using Firefox's tools) from 100% to 98% as a test and the bar disappeared.

    Check your widths and how you're using CSS. You most likely overshot something.

    For starters you could drop the width down to 98% while you're cleaning up your code/site.
     
    marketjunction, Jul 7, 2009 IP
  4. Domster

    Domster Greenhorn

    Messages:
    34
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #4
    Hi mike323

    It's mainly 3 things from your CSS that are affecting the width...

    Locate within your CSS both #main and #main2 and change:
    border: 3px solid;
    to
    border-top: 3px solid;border-bottom: 3px solid;


    Then locate the following CSS:
    .f, .f a, .fc{}
    and change padding:3px; to padding:0;

    and underneath add a new bit of CSS:
    .f a {padding:3px;}

    Hope this helps.
     
    Domster, Jul 7, 2009 IP
  5. mike323

    mike323 Well-Known Member

    Messages:
    1,594
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #5
    Thanks everyone. I will have to make the changes later when I get home.

    In the meantime, can you all watch my site while I'm gone? :D
     
    mike323, Jul 7, 2009 IP
  6. mike323

    mike323 Well-Known Member

    Messages:
    1,594
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #6
    Thanks, MJ. It seems to work in my browser. Are you suggesting this as a temporary fix or permanent fix?
     
    mike323, Jul 7, 2009 IP
  7. mike323

    mike323 Well-Known Member

    Messages:
    1,594
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #7
    Ok, I followed mj's and dom's advice and the scroll bar is gone but now the division #main stops before it reaches the right side of the screen.
     
    mike323, Jul 7, 2009 IP
  8. marketjunction

    marketjunction Well-Known Member

    Messages:
    3,779
    Likes Received:
    187
    Best Answers:
    0
    Trophy Points:
    183
    #8
    Without really looking through all the code, the problem might be an element inside of your "page's width" that's forcing the stretch.

    One idea is to go to a fixed pixel width (example: 960px). The other is to put it at 100% as it was originally and then start looking at the elements inside to see if something is stretching it.

    An example of an easy error would be using 100% as the body width but then having elements using pixel widths. If those widths (including borders, margins, etc) is wider than the browser's window, it will scroll horizontally.

    So you've got it not scrolling now. Next up, plow through the elements to look for issues.
     
    marketjunction, Jul 7, 2009 IP
  9. Domster

    Domster Greenhorn

    Messages:
    34
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #9
    In the <head> of your pages you have a <style> tag with a width of 98%.

    locate...

    body, a, p{width:98%;

    And change their width attribute to 100%.

    Hope this helps.
     
    Domster, Jul 8, 2009 IP
  10. mike323

    mike323 Well-Known Member

    Messages:
    1,594
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    160
    #10


    Worked! Thanks, Domster! :)
     
    mike323, Jul 8, 2009 IP
  11. Agnel

    Agnel Banned

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #11
    If you designed your website with a tool like Dream Weaver which has the feature of realtime preview you can change the size of your webpage in the design mode itself (ie without altering your code). It's so simple just download you code through an FTP client like Filezilla and open you code with Dream Weaver and change the screen size in design mode (ie) in preview mode and the upload the code back through Filezilla. and you're done.
     
    Agnel, Jul 9, 2009 IP