www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: round corners IE7

  1. #1
    Join Date
    Jan 2006
    Posts
    148

    round corners IE7

    I have round corners working in firefox but not in IE 7.

    My CSS:
    Code:
    #right {
    	font-align:left;
    	background-color:#edf5e0;
    	-moz-border-radius-bottomright: 10px;
    	-webkit-border-bottom-right-radius: 10px;
    	-moz-border-radius-bottomleft: 10px;
    	-webkit-border-bottom-left-radius: 10px;
    	padding: 0px;
    	-moz-border-radius-topleft: 10px;
    	-webkit-border-top-left-radius: 10px;
    	-moz-border-radius-topright: 10px;
    	-webkit-border-top-right-radius: 10px;
    }
    What tag will work in IE7?
    Thanks!!!

  2. #2
    Join Date
    Mar 2008
    Location
    Da 'Burgh
    Posts
    183
    can you please post a sample page where i can see what your trying to completely accomplish-
    thanks
    GoverNment

  3. #3
    Join Date
    Jan 2006
    Posts
    148
    no place to put it.
    copy paste the example code:

    Code:
    <html>
    <head>
    <style type="text/css">
    #right {
    	font-align:left;
    	background-color:#edf5e0;
    	-moz-border-radius-bottomright: 10px;
    	-webkit-border-bottom-right-radius: 10px;
    	-moz-border-radius-bottomleft: 10px;
    	-webkit-border-bottom-left-radius: 10px;
    	padding: 0px;
    	-moz-border-radius-topleft: 10px;
    	-webkit-border-top-left-radius: 10px;
    	-moz-border-radius-topright: 10px;
    	-webkit-border-top-right-radius: 10px;
    	background-color: #cccccc;
    }
    </style>
    </head>
    <body>
    	 <div id="right">
    	make everything in this have a background and also make it have round corners
    	</div>
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    You're using a CSS3 and IE doesn't even fully support CSS2 yet. You might be able to 'trick' IE7 into thinking it is IE8 though, by adding this:

    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    <![endif]-->
    exactly as typed (copy & paste), add just before the "</head>"

    This 'fix' corrects many problems with IE-less-than-8
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    border-radius is a yet to be finalised css3 property, and I doubt that IE would support it for another 5 years or so after css3 is finalised....

  6. #6
    Join Date
    Apr 2008
    Location
    Seattle, WA
    Posts
    19
    Do you want to have only the top and bottom of your website to be rounded?

    If yes, you could also create two images that have rounded corners and place those images at the top and bottom of your website. You can check the website I'm building - http://mattjennings.net/002natalie/ - for an example.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Firefox and Opera (current versions) both support border-radius for roundy-edges.

    And oh btw I forget to mention it last night:

    #right {
    font-align:left;
    background-color:#edf5e0;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    padding: 0px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    background-color: #cccccc;
    }
    No such property in CSS. You want text-align:left;"
    Last edited by WebJoel; 05-30-2008 at 06:44 AM.
    I build for: Firefox and tweak for IE

  8. #8
    Join Date
    Dec 2009
    Posts
    5
    You can have a look as well at FlexiPanels CSS - a Dreamweaver extension that makes rounded corner CSS boxes without coding. Works on IE 6, 7 and u

  9. #9
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Or use my rounded corner generator: http://www.svidgen.com/rcg.php. I'm 90% sure it works down to IE6 ... possibly earlier. You're just not going to find a fully cross-browser compatible CSS-only solution.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  10. #10
    Join Date
    May 2010
    Posts
    17
    I usually do the same as risingPhoenix. Sucks I know, but welcome to the world of IE and css

  11. #11
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    My generator uses a single image to create the effect. Saves you a lot of HTTP requests ..
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  12. #12
    Join Date
    May 2011
    Posts
    1

    Rounded corners - Working on IE

    I've been checking this one, and it's working in all those:

    - IE
    - Firefox
    - Chrome
    - Safari
    - Opera

    Demo: http://oritzio.com/pages/demos/CssRoundedCorners/

  13. #13
    Join Date
    Jun 2007
    Location
    Washington D.C. Metro
    Posts
    76
    javascript+vml:
    http://www.dillerdesign.com/experiment/DD_roundies/

    css+htc:
    http://css3pie.com/

    I like css+htc solution because I don't have to use javascript to fix presentation.

  14. #14
    Join Date
    May 2011
    Posts
    4

    Rounded corners work, but...

    Quote Originally Posted by oritzio View Post
    I've been checking this one, and it's working in all those:

    - IE
    - Firefox
    - Chrome
    - Safari
    - Opera

    Demo: http://oritzio.com/pages/demos/CssRoundedCorners/
    This works, but my problem is with a nested DIV and margin or padding. It breaks the javascript rendering.

    <div class="rounded">

  15. #15
    Join Date
    May 2011
    Posts
    4
    Quote Originally Posted by syntel View Post
    This works, but my problem is with a nested DIV and margin or padding. It breaks the javascript rendering.

    <div class="rounded">
    Example:

    <div class="rounded"><div class="padded>
    Text
    </div></div>

    Shawn Zernik
    Internetwork Consulting

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles