Horizontal scroll bar problem for FireFox

HTML & CSS
1

Hello,

I am trying to incorporate a box shadow for a couple of header elements on a site I am designing for fun and I have come across a rather frustrating situation. When previewing the site in Firefox, the box shadow shows up but so does a horizontal scroll bar. I am designing this on an Invision Power Board frame.

How would I go about removing the horizontal scroll bar?

I have already tried adding:

overflow-x:hidden;

This worked. However, instead of the one horizontal scroll bar at the bottom, it generated vertical scroll bars everywhere.

I have attached a couple of screenshots.

TIA for any help you can give! :slight_smile:

ETA: There were no horizontal scroll bars generated for any other browser type (namely: IE, Safari, Chrome). Just Firefox.

2

How would I go about removing the horizontal scroll bar?
Hi,
We would need to see the code you are using that causes this problem.
I think the box-shadow property needs to be accounted for in your widths if any have been set.

It behaves just like margin, padding, and borders do with the Box Model. That is, the dimensions must be accounted for on the overall box size if a width is set.

Post a link or some code and we will try to resolve it for you :wink:

3

I took out the 100% width and height and also the overflow:auto.

I tried overflow-x:hidden on the table (just because I hadn’t tried that route), and no dice.

I have also tried shrinking the table size, but I have to shrink it far too much for the scroll bar to disappear.

Thank you for your help with this! :slight_smile:

4

Here is some code where I think it may need to be tweaked:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }

table.ipb_table {
line-height: 120%;
border-bottom: 4px solid #FFFAFC;
box-shadow: #D0ccaf 2px 2px 4px;
-moz-box-shadow: #D0ccaf 2px 2px 4px;
-webkit-box-shadow: #D0ccaf 2px 2px 4px;
height: 100%;
width: 100%;
overflow:auto;

/*table-layout: fixed;*/

}

Let me know if there is any other code I should be looking for and posting here. I figured it had more to do with the table layout than anything.

5

Well I see width:100% and overflow:auto on it and the box-shadow is adding to that width while the overflow says “give me a scrollbar”