If you look at the main navigation menu on this page you see that I'm using a drop shadow on a:hover, however, in IE9 the shadow is buggy - it doesn't always show, and often remains after the hover is no longer active. I want to either fix it, or get rid of the shadow only in IE.
my css is:
#menu a {
color:#fff;
padding-top:10px;
padding-right:10px;
padding-left:10px;
text-decoration:none;
}
#menu a:hover {
background:#e58f56;
border-top: 0px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #bbb2b1;
border-right: 0;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
-webkit-box-shadow: #888 4px 4px 4px;
-moz-box-shadow: #888 4px 4px 4px;
box-shadow: #888 4px 4px 4px;
}
Any ideas?
I just dropped your code above into a js fiddle and it worked fine in IE9! Must be something to do with the 'pie' fix your calling in. Maybe try remove it and have a check.
The effect you are attempting is definitely 'do able' in IE9.. Don't give up:)!
Are you sure the shadow isn't showing at all? IE9's implementation of box-shadow renders the blur at about half the distance that other browsers do (I actually posted a question about that here). For low values, it's possible that IE9's rendering is so slight that you don't notice it. Just as a test, try making the blur radius much larger to see if it shows up in IE9.
If you dont see the DropShadow, it's probably that your IE9 is in Compatibility View Mode. Try to set explicitly in your page the compatibiltiy with IE9 with some code like:
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=11" />
In the header of your page, before calling any Css.
Related
I'm applying border-radius for a few elements on my page, and in order to make it work on IE 6-8, I'm using PIE.
Check it out
So as you can see, corners without values (or with values very different from each other) for border-radius, effect gets this weird.
Here's my code:
.cotacao {
-webkit-border-radius: 1px 20px 1px 20px;
-moz-border-radius: 1px 20px 1px 20px;
border-radius: 1px 20px 1px 20px;
border: 10px solid #fff;
}
And specific code for IE
.cotacao {
behavior:url(/Assets/css/common/PIE.htc);
position: relative !important;
}
What's going on? Is this bug related to the border thickness? And, if it is, is there a known workaround?
Thanks!
This is a bug in the PIE 1.0 code. See https://github.com/lojjic/PIE/issues/11
It's fixed in the 2.0 beta if you're willing to try that.
I made a button in Firefox and it works great, but in Chrome after clicking the button the text is not moving, therefore there is no button effect on click. I want to fix this for Chrome but still not mess up the code for Firefox.
Demo
.btn{
background:-moz-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%);
background:-webkit-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%);
border:1px solid rgba(70,140,60,0.8);
border-radius:3px;
height:30px;width:80px;
font-family:Corbel;font-weight:bold;font-size:16px;color:#FFF;
text-shadow:rgba(3,3,3,0.8) 1px 1px 2px;
padding-bottom:3px; /*bad*/
padding:0px 0px 2px 0px; /*good*/
}
.btn:hover{cursor:pointer;}
.btn:active{
background:#509339;
padding:2px 0px 3px 1px; /*bad*/
padding:0px 0px 0px 2px; /*good*/
}
The problem was that Chrome is not reacting to padding-left: 1px; I changed it to 2px and everything works fine for both Chrome and Firefox.
The user agent stylesheet for Chrome has padding: 2px 6px 3px 6px for buttons. So, your top padding is not changing at all when you set it to 2px.
You probably want to explicitly override the padding for the unpressed button so that you get the same effect regardless of browser settings.
On my version of chrome (v26), the background does change, the text does not move. Might I suggest that you remove the -bottom from the padding on the btn class:
padding:3px;
That way you'll see a movement and you'll be able to adjust it
So I'm using
-webkit-border-radius: 10px;
for a text entry field right now, but the problem is that once the field is selected, there is a border without the border radius modified.
So my question is does anyone know how to modify this?
I don't know if you can set the outline to have a radius like the border but you can remove it with
outline:none;
Besides the outline you may also use
-webkit-appearance: none;
No webkit equivalent to -moz-outline-radius at the moment
While there's no (so far as I'm aware) cross-browser implementation of outline-radius, or even a vendor-prefixed implementation other than the -moz- variant, you could perhaps emulate it with an inset box-shadow:
.elementClass {
padding: 0.2em;
outline: none;
border: 1px solid #000; /* in Chromium 18/Ubuntu 11.04 setting
the border is required for the outline
to be applied, this may not be true elsewhere */
border-radius: 0.4em;
}
.elementClass:focus,
.elementClass:active {
box-shadow: inset 0 0 1px 2px #f90;
}
JS Fiddle demo.
I am having trouble with handling the vertical alignment of a div within another div in IE.
My html code is as follows :
<div class="header">
<div id="mainMenu">
<!--Here goes my main menu-->
</div>
</div>
My styles are as follows :
#mainMenu
{
/*background-color: #FFF;*/
font-family: fantasy, cursive, Serif;
font-size:16px;
/*border-bottom:1px solid #000000;*/
height:125px;
position:relative;
}
.header {
top: 0px;
color:#FFA500;
z-index:1000;
height:120px;
padding:8px 2px 8px 15px;
overflow:hidden;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
background: url("../images/plusoneurls_resize.png") repeat scroll 0 0 transparent;
}
Now in firefox , my main items are showing at the bottom when I mahe the height attribute to 120px (100%) for the style attached to #mainMenu , but it's not working in IE.
I even tried by giving top:100% , in firefox it shows fine ,but in IE , it's overflowing into the main content.
How to devise a workaround for this?
Check that you're not in Quirks mode.
If you don't have a valid <!DOCTYPE> declaration at the top of your HTML code, IE will drop into Quirks mode. This mode changes a number of aspects of CSS, and tends to have a fairly dramatic effects on heights and widths of elements.
Quirks mode is a legacy feature, which should never be used any more, so you should always make sure you have a valid doctype. you haven't provided enough of your code for me to know whether you've got one or not, but if not, you need to add one.
If you're not sure what doctype to use, simply use the HTML5 doctype, like so:
<!DOCTYPE html>
Put this at the very top of your HTML code (first line, before the <html> tag or anything).
Use a CSS reset.
YUI provides a good one.
#mainMenu
{
position: absolute;
bottom: 0;
left: 0;
}
.header
{
position: relative;
}
How (Not) To Vertically Center Content
Would definitely recommend using CSS, but they also illustrate and example using Tables
Make sure the zoom level is set to 100% on both browsers. (Ctrl+0)
I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.
.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;
}
If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with:
Graphics Page
What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.
I think it's because it is in the foreground above the border
try using the same code you have above, but in your html:
<div class="nonTyp" style="background-image:url('image.jpg');"></div>
This probably has to do with the order in which the border vs. radius clip is applied, but is very strange. A solution is to move the border-radius and related definitions to the enclosing tag. Remember to declare display:block so it's treated as block level on all browsers.
This worked for me in Chrome and Safari.
Image is top level.
div.someclass with radius 5px and div.someclass img with radius 4px.
That seems to make the corners look cleaner in Chrome and Safari.
.someclass {
...
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
.someclass img {
...
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I think drawing functions that Chrome uses for image and link are works differently between each other. And that causes a blank space between image and the link.
I partially fixed this bug via modifying Matjis' jsfiddle code a little bit. I moved img tags position to left.
.gallery a img {
...
position:relative;
left: 2px;
}
This solution may work if you set different radius values for image and the link.