Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

safari and iphone issue with -webkit-box-shadow

safari and iphone issue with -webkit-box-shadow

Problem

I have an unordered list which is set to display block. Inside that UL I have 4 li elements which are floating.

There is an issue when displaying it in Safari and therefore on iphone and ipad. The issue is that the inner element is inset slightly by the shadow:

but it displays fine in Chrome

Any ideas??

Thanks

Phil

Problem courtesy of: Phil James

Solution

The problem CAN be as follow..

You probably don't saw it coming but do you use a border radius? The chrome version has 1 pixxel padding on the top/left/right side which can output differently on your screen..

underneath can be helpful if you use a browser reset in your stylesheet

http://meyerweb.com/eric/tools/css/reset/index.html

This will reset all browsers to the same index and from there start styling and mostly it will work!

Solution courtesy of: Jay Ruben

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

safari and iphone issue with -webkit-box-shadow

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×