CODEWITHSUNDEEP
cssscrollbarresponsive-designhorizontal-scrolling
Devin Crossman
Devin Crossman

Reputation: 7592

I can't figure out why a scroll bar appears

In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using 

* {
    border:1px solid #FFF;
}

to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.

Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca

Thanks!

Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.

Edit: the site is for a legitimate massage business but some may consider the picture NSFW

Upvotes: 1

Views: 5717

Answers (3)

Devin Crossman
Devin Crossman

Reputation: 7592

css3 box-sizing:border-box solved this one.

Upvotes: 0

Matt
Matt

Reputation: 1186

Devin,

Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.

One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.

Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?

There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...

Good Luck,

  • Matt

Edit

I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.

Try this:

body { overflow-x: hidden; }

Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.

Upvotes: 1

Ruben
Ruben

Reputation: 9186

can you please warn us when it's nsfw :s use this css:

#content { overflow: hidden }

not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too

Upvotes: 0

Related Questions