Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    100
    Thanks
    14
    Thanked 1 Time in 1 Post

    Question Rounded corners not working in IE8

    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;

    Code:
    	-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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    If everything works in IE7, then adding the following meta tag would fix it in IE8.
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Mechphisto (08-04-2010)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    100
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    If everything works in IE7, then adding the following meta tag would fix it in IE8.
    Code:
    <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!!

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Can one emulate IE6 with this code? Could save me having multiple installations of IE at the office
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by timgolding View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Posts
    100
    Thanks
    14
    Thanked 1 Time in 1 Post
    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:

    Code:
    .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?

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Posts
    100
    Thanks
    14
    Thanked 1 Time in 1 Post
    Wait, if I take out the lines:
    Code:
    	position:relative;
    	left:50px;
    	top:0px;
    it works, sort of. Instead of just the top 2 corners being rounded, as decreed by
    Code:
    	-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!

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Mechphisto (08-04-2010)

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Posts
    100
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    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.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    But even if I take out the positioning lines,
    The default value for position property of all elements is static.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Regular Coder
    Join Date
    Mar 2009
    Posts
    100
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    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.

  • #12
    New Coder
    Join Date
    Jan 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by VIPStephan; 02-13-2012 at 12:43 PM. Reason: removed fake signature

  • #13
    Regular Coder
    Join Date
    Mar 2009
    Posts
    100
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by richF View Post
    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.

  • #14
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    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
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •