In iPad an iframe doesn't display the shadow properly if its position is fixed.
position: fixed http://jsfiddle.net/akRsC/
position: static http://jsfiddle.net/akRsC/1/
Anyone knows how to fix this aside from removing position:fixed?
EDIT:
For some reason, the shadow is displayed when viewing the example inside jsfiddle but not in jsfiddle '/show' which is why this was my original link. I don't know why and I don't know how to make the css rules that make it work inside jsfiddle.
Did you try:
-webkit-appearance: none;
? Was useful to me for a lot of weird CSS stuff (but nothing to do with box-shadow).
And also, take a look at: http://cubiq.org/webkit-weird-box-shadow-bug-with-fix
Related
I've created a jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/2/
its all about the css styles
div.ding-wrap {
position: absolute;
}
As you can see there is an image well positioned if you open it with chrome or any other normal browser.
But if I open it with internet Explorer the image is gone! I need to change the positioning of ding-wrap to relative.
i would do so, but then my animations (not there) does not work very well. So I need the positioning absolute. How can I teach IE to take me serious?
Thanks, Falk
jiangshui gave a push in the right direction. I stopped centering via table and table-cell and used
margin: auto;
height: 100%;
for centering. Sadly, always if I googled vertical centering, everywhere I read only about the first method because the auto-margin shouldnt work. And I never tried. So thanks a lot to jiangshui!
Here the updated jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/5/
In all other browsers, including IE10, this CSS removes the outline when clicking on a mapped area on an image anchor:
area {
outline: none;
}
But lo and behold, not in IE11, at least not the latest version I can get for Win7. A quick demo page: (demo removed). Click on a thumbnail; on the full-sized images, the right 60% is a link to the next image, the left 40% to the previous image.
I've tried all manner of CSS variations, including:
outline: none !important;
Applying it to every CSS class and ID I can think of seems to make no difference, including *, img, map, area, .gr-slideimage, #gr-thisMap, and so on. The only thing I've found so far that works is the old:
hidefocus='true'
on the img tag itself, but that doesn't validate, of course.
Can anyone crack this with CSS?
IE11/Win7 seems to ignore border settings set to 'none' in some circumstances. Had this issue with CSS styled buttons this week. I had to make the border 'solid' and change the color to match. Sure there's a better way - surely MisterNeutron and I aren't the only ones to notice this bug?
It appears IE11 needs outline-style: none; in order to work properly. You can also refer to: http://msdn.microsoft.com/en-us/library/ie/cc304065(v=vs.85).aspx for any other possible IE related issue. Hope this helps.
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
EDIT:
On the above site whenever I zoom out in firefox the main content div is displaced to the right. This issue only exists in firefox, not in internet explorer, opera or chrome. Could someone help me fix this?
EDIT 2:
I do NOT want the div to displace in firefox. Sorry about the first question, I was in a hurry but should be clear now :)
If you give float:left; to the .wrapper element and the ul.menu everything will be ok :)
The issue you are having is not with #content but rather with the class wrapper. If you remove the rule overflow:hidden from the class, the issue will go away. It looks like the wrapper class is also associated with your button bar.
I would suggest removing wrapper from the div which holds all of the page contents and instead use a rule which only has width="100%".
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.