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
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!
Related
I'm trying to develop a responsive website and even if my Google map displays fine, no marker appear on it if I decrease the size of the window (or if I use a mobile device)…
Here is an example page: http://www.parisdigest.com/test-mobile.htm (the marker should appear on Paris).
Thanks a lot!
I found the solution. My responsive CSS contained some code to add a max-width to some elements, including "div". I just added div#map_canvas,#map_canvas div{max-width: none} and solved this issue.
I'm using Font-awesome in my project, and every icon is aligned in the middle of the line. On Chrome, Firefox and IE, They are aligned corretly, but on Safari, the icon drop around 3 or 4 pixels.
I inspect the icon and in every browser, they are render and ocupate the exactly space they should be. But in Safari, they are rendered with extra top size, a transparent padding on top of the icon. It's not vertical-alignment or line-height problem, the character itself have this "transparent padding" on top.
That seens silly, but on a huge project, every icon is aligned 3/4px down than it should be give me a lot of headache.
One possible reason is that you have a different default line height in the different browsers. Try explicitly setting this to see if if it makes a difference:
CSS
i{
line-height:20px;
}
or even
i{
display:inline-block;
}
depending on the specifics of your styling, you might need to also set a class on the i tag, e.g.
i.icon-class{ ....}
Good luck!
I want a padding of 10px on my select tag. With a text-indent I can make the padding-left work on Safari. But I want a padding everything not just left.
Is there any way to have it work normally on Safari? (I can't understand how something so elemental can be an issue nowadays!)
try -webkit-padding:....that should work. here's Apple's list of properties that safari supports...I don't see any differentiation between safari and mobile safari, but I know there is some...https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)
Anybody familiar with this bug with box-shadow in CSS3?
It renders ok at first. But when scrolling the page up and down(so the shadows goes in and out of visible area) the shadows from the horizontal lines does error and needs to be reloaded to render right. I experience this only in Opera, and not in IE(where I use css3pie.com).
Take look at this example: http://www.gatzschmann.no/beta/
Anybody got a clue why? This does not happen when viewing other sites using box-shadow.
Regards
Petter Andreas
This is a redraw painting bug in Opera. We're aware of this issue and we'll fix it as soon as we can.