Can anyone show me or direct me in the right direction for placing CSS shadows for IE Browsers. Here is my current code:
-moz-box-shadow: 0px 0px 6px #666;
-webkit-box-shadow: 0px 0px 6px #666;
box-shadow: 0px 0px 6px #666;
I need to make the IE look the same as the other browsers.
Many thanks & Happy holidays.
Erik
Generally you have an "IE Fix" separate CSS file that would take care of the shadows with a background image.
Related
I have a display problem with the box shadow property specifically on the iPhone 6 plus.
If I add the meta tag width=device-width, the following box shadow isn't displayed at all:
-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8;
box-shadow: 1px 1px 5px 5px #a8a8a8;
If I don't use the meta tag, box shadows "magically" disappear if you zoom into the page. You can comprehend this here:
http://jsfiddle.net/b6aaq57z/3/
This seems to be a specific iPhone 6 plus bug. On older iPhone Versions running the same iOS Version (8.0.2), the box shadows are working properly.
Is there anyone with a solution?
You can add border-radius:1px to the div. It fixes the box-shadow issue in iphone 6+ and other retina devices
.box-shadow{
-webkit-box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
border-radius:1px;}
Try using -webkit-apperance: none;
You can add this to your global reset to eliminate all issues with this. I use:
*, *:before, *:after {
-webkit-appearance: none;
}
I also have my box-sizing reset in there as well.
I've got a very strange bug in the Mailbox app when rendering an email, when you click on it it start to zoom out very slowly until the height of the email is shown...
There's a gif of it happening here:
http://mailrox.s3.amazonaws.com/bloggif_542959bc3de42.gif
A video here:
http://mailrox.s3.amazonaws.com/mailbox-zoom-bug.mov
And here's the HTML of the whole email, does anyone know what's triggering this slow zoom of the email?
http://jsfiddle.net/az1eryu4/
<body style="background: #FFFFFF; color: #000000 !important; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 17px; margin: 0px 0 0 0px; min-width: 100%; padding: 0px 0 0; width: 100%" bgcolor="#FFFFFF">
the reset of the HTML is on JSfiddle becuase there's too much to put here and it needs to be previewed.
The fix for this is to remove the 100% body width which occur in three places: header css, inline css and the width attribute.
You may also need to remove the 100% width from the html tag and the first table tag.
As 4th of October 2014 it looks like Mailbox has been updated, not to remove this, but the zoom animation has been sped up. So if you want to stop the zooming you'll need to remove the 100% widths.
How could i add curved corner to a gwt-checkbox using css?
.gwt-CheckBox {
border-radius: 5px 5px 5px 5px;
}
This Doesn't works!!!!
i also tried this too. but no change.
.gwt-CheckBox > input {
border-radius: 5px 5px 5px 5px;
}
spell check - border-redius must be border-radius
Curved Corner for checkbox via CSS is possible only in firefox/chrome and not in IE8 browser.
Which browser are you testing on? Apart from IE for others try -moz-border-radius or -webkit-border-radius etc depending on your browser.
Refer the link for IE information- Support for "border-radius" in IE
I want to do this
This is select drop down of form
My code is
HMTL
<select>
<option>Country</option>
<option>India</option>
<option>USA</option>
</select>
Css
select{
width:197px;
height:45px;
border:solid 1px #13669b;
box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
background:rgba(256,256,256,0.7);
color:#13669b;
font-size:16px;
font-family: 'LatoBold';
padding:0 14px;
line-height:45px;
}
I want to this only pure css. How?
There is no way to create a dropdown box like that with pure css (yet).
You can create your own js/css dropdown plugin or use one of the many jQuery/css plugins already available.
I am not sure if there is EASY cross browser way to do it but if you with combination of CSS + jQuery, you can get it working in all browsers in use:
Reinventing a Drop Down with CSS and jQuery
See the tutorial on how to do it and modify the CSS for the look you want.
Screenshot:
This solution works with pure CSS but it's Chrome-related. See the following example:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Haven't tried to replace the -webkit prefix by a -moz one for it to be compatible with Firefox browsers, it might actually work as well, you should give it a go.
Dropdowns are implemented differently in different browsers, and styling is not widely supported. This has it's reasons. For one: consider the dropdowns on iPads/iPhones. They work radically different than desktop application dropdowns.
If you want a styled dropdown, you will have to build it yourself with lists and javascript. Or use one of numerous libraries available for this (which is further proof that no pure CSS solution is available).
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
HTML/CSS: How does Google create this drop shadow over their maps?
Using GWT and the Google Maps component, how do I best create the "panel shadow" effect as seen in the screenshot?
Try the box-shadow CSS property (make sure the browsers you are targeting supports it)
-webkit-box-shadow: inset 3px 3px 5px 5px #000000;
-moz-box-shadow: inset 3px 3px 5px 5px #000000;
box-shadow: inset 3px 3px 5px 5px #000000;
Use rgba color spec with opacity to get a "lighter" shadow.