search

sebble / SebbleDMS

Secure data management (PHP, AJAX)
Other
2 stars 2 forks source link

border-shadow FF horizontal scroll #23

Closed sebble closed 13 years ago

sebble commented 13 years ago

I know you love this cross-browser stuff @keithnewman, I've done what I feel to be a sensible amount of cross browser CSS (maybe too much for gradients), but we have a little problem with FF.

The -moz-box-shadow property seems to add some width to the main content area causing a horizontal scrollbar to appear, maybe some magic pokery could be done to hide this, or maybe that box has to lose it's shadow on -moz.

keithnewman commented 13 years ago

I will take a look at this. Is this firefox 3.6 you're getting this with? Remember that it's only aesthic to have the shadow and is non-essential to it's correct operation

sebble commented 13 years ago

While you're on FF I don't seem to have any gradients or even default colours (all white, but IS solid white) at uni FF Ubuntu, but I'm sure I did when I was at home FF win. (3.6 both I think)

keithnewman commented 13 years ago

This is the solution I propose (the middle line is the one that was changed, the other two are to reference what the shadow originally looked like):

-webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: -3px 3px 3px #d6d6d6; box-shadow: 0 0 5px #ccc;

From Line 119-121 of layout.css.

FF 3.5 and 3.6 thought they had to show the shadow on all sides, hence the need for a horizontal scroll bar to accomodate this. I've used the x-offset (-3px sends it 3px to the left) made the thickness of the shadow to match it so no shadow would be visible on the right anyway. FF now sees no reason to add a scrollbar to see the right of the box now.

offsetting to the left means the left shadow becomes thicker, so rather than using the original 5px value, I reduced it to 3px becuase it looked too thick.

I added a y-offset of 3px to make the bottom shadow thickness match the left side thickness.

I also lightened the shadow so that it would appear similar to the original colour of the shadow.

The only place where you can really notice the offset is in the bottom right corner of boxes where the shadow stops 3 pixels early, but it isn't that easy to notice.

I do see gradients on FF 3.6 (win) except in ui-main (but I don't think there's meant to be a gradient in ui-main anyway).

The trouble of installing FF 3.6 to solve this may have paid off.

sebble commented 13 years ago

Accepted, mainly because I can't see it in any other browser anyway (-moz only fix), if I ever use FF (doubtful) and get offended by the off colouring and not pixel perfect design I guess it can easily be replaced by no shadow at all. Good work on the patch up job though, I would have probably dropped it entirely. =D