...

View Full Version : Rounded corners not working in IE8



Mechphisto
08-03-2010, 04:35 PM
So I'm trying to use rounded corners, and I found the latest file that's supposed to help with IE and so set up my CSS like this;



-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
behavior:url(/includes/border-radius.htc);


and it actually works for IE7. But in IE8 the entire box disappears!
Here's my test:

http://www.girlscoutsmoheartland.org/test/csstest.html

The box that says "Div 1" looks fine in all browsers (as well as emulated IE7) but in IE8, the box just disappears altogether.

Any suggestions would be appreciated!
Thanks,
Liam

abduraooft
08-03-2010, 04:41 PM
If everything works in IE7, then adding the following meta tag would fix it in IE8.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

Mechphisto
08-03-2010, 04:48 PM
If everything works in IE7, then adding the following meta tag would fix it in IE8.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

Holymoly! That's great!
I just added that line to the template page for the rest of the site, and that fixed a host of other annoying layout problems! That's fantastic.
Thanks!! :)

timgolding
08-03-2010, 05:17 PM
Can one emulate IE6 with this code? Could save me having multiple installations of IE at the office

abduraooft
08-03-2010, 05:36 PM
Can one emulate IE6 with this code? Could save me having multiple installations of IE at the office No way! You have to face the reality. :)

Mechphisto
08-04-2010, 03:54 PM
Ah nuts, it stopped working for some reason when I took one of the two instances of corner rounding in the CSS. Weird. Even though I still have it emulating IE7. (I went back to IE8 w/o emulation and it still doesn't work there either.)
The box itself just disappears but the content remain with this CSS:



.roundedcontainedbar {
width:250px;
position:relative;
left:50px;
top:0px;
border:1px solid #666;
background:#999;

-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
behavior:url(/includes/border-radius.htc);

}


*sigh* I really don't want to have to use images to make this rounded corner thing to work, but 75% of my visitors still use IE.
Any ideas?

Mechphisto
08-04-2010, 04:12 PM
Wait, if I take out the lines:


position:relative;
left:50px;
top:0px;

it works, sort of. Instead of just the top 2 corners being rounded, as decreed by


-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;

the whole box is rounded. (And I don't have the benefit of relative positioning.)
Freakin' IE!

abduraooft
08-04-2010, 04:20 PM
FYI, left/right or top/bottom properties don't play well with relative/static positions. You might need margin-right/left and margin-top/bottom there.

Mechphisto
08-04-2010, 04:25 PM
FYI, left/right or top/bottom properties don't play well with relative/static positions. You might need margin-right/left and margin-top/bottom there.

OK, fairnuff. Maybe that prevents the box from showing at all, and I guess I can work around that.
But even if I take out the positioning lines, it makes all 4 corners rounded instead of 2. That won't work for the layout.

abduraooft
08-04-2010, 04:29 PM
But even if I take out the positioning lines, The default value for position property of all elements is static.

Mechphisto
08-04-2010, 04:39 PM
The default value for position property of all elements is static.

Well, OK, that's fine. Regardless, if I have to use margin settings to place this box, I guess I can work around that. Annoying, but doable.
But current issue is why all 4 corners are round and not the top 2 like I'm trying to have it set as. :(

richF
08-05-2010, 09:09 AM
Regarding your request for someone to look at your site in another version of IE, check out this website: http://spoon.net/Browsers/

I use it quite regularly to be able to emulate environments in different browsers rather than having to set up different workstations/vm's with them all!

Hope it helps!

Mechphisto
08-05-2010, 02:44 PM
Regarding your request for someone to look at your site in another version of IE, check out this website: http://spoon.net/Browsers/

I use it quite regularly to be able to emulate environments in different browsers rather than having to set up different workstations/vm's with them all!

Hope it helps!


Er, thanks, but I never requested for anyone to look at it in another browser. I have all relevant browsers already, and I described the behavior I saw in my original post.
But thanks for replying, though. :)

jfreak53
08-05-2010, 02:48 PM
The reallity is not even inside Microsoft are they standard, they couldn't even keep standards across IE7, IE8, and IE9. So expect things to keep changing with them, they like change, go Obama ha ha ha



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum