5 Replies Latest reply on Feb 5, 2010 5:35 PM by brightbelt

    IE 8 seems to be less help for a rounded table corner...

    brightbelt Level 1

      Hi, I'm using DW CS3 on an intel iMac and first, 2 things: I use tables to build my sites (there's some CSS around here and there + a couple of external style sheets etc) and secondly, the problem I'm asking about here does not seem to occur at all on Firefox and Safari - only IE 8.

       

      Also, I make simple 30 x 30 pixel Gifs (with transparency) to manufacture rounded table corners without CSS.

       

      Simply put, the bottom right part of the main white table is missing its smooth white line near the corner on some pages, so that there's a chopped off part near the corner.

       

      A couple of the pages look fine in IE 8, but the others have that chopped area.  And that is what perplexes me because I'm using a DWT Dynamic Web template for all the pages (except the single photo rendering pages in the DW-FW-generated photo Gallery). So why would some pages appear cohesive and the others cut out?

       

      Here's the site url: Http://www.clairefrazier.com

       

      Anyways, I appreciate any help on this. Many Thanks, Frank B.

        • 1. Re: IE 8 seems to be less help for a rounded table corner...
          Nancy OShea Adobe Community Professional & MVP

          CSS Rounded Borders + filter work arounds for IE

          http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: IE 8 seems to be less help for a rounded table corner...
            brightbelt Level 1

            Thanks Nancy,

              I appreciate the reference - I've tried the code and I'm not 'getting it' yet. This would be awesome to learn and know finally so I don't have to be manufacturing Gifs all the time.

             

            I've got the following code in the head, but I'm unsure whether this has to be an ID or class or how to refer to this from the avtual table in the <body>. Also, I guess it has to be a div...Anyways, here's what i've got on the <head>

             

            <title>Testing CSS page</title>
            #div, table {
            /**ROUNDED CORNERS FOR MOZILLA, WEBKIT, LINUX, OPERA**/
            -moz-border-radius: 12px;
            -webkit-border-radius: 12px;
            -khtml-border-radius: 12px;
            border-radius: 12px;
            }
            /**ROUNDED CORNERS FOR IE ONLY - REQUIRES THE BORDER RADIUS.HTC FILE**/
            .curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 /
            behavior: url(border-radius.htc);
            }

             

            I do appreciate your help in this. Many Thanks, Frank B.

            • 3. Re: IE 8 seems to be less help for a rounded table corner...
              brightbelt Level 1

              Here's a better effort, but it's still not working:

               

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>Untitled Document</title>
              #wrapper, table {
              /**ROUNDED CORNERS FOR MOZILLA, WEBKIT, LINUX, OPERA**/
              -moz-border-radius: 12px;
              -webkit-border-radius: 12px;
              -khtml-border-radius: 12px;
              border-radius: 12px;
              /**ROUNDED CORNERS FOR IE ONLY - REQUIRES THE BORDER RADIUS.HTC FILE**/
              behavior: url(border-radius.htc);
              }

               

              </head>

               

              <body>
              <div id="wrapper">
              <table width="70%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td bgcolor="#006699"> </td>
                </tr>
                <tr>
                  <td bgcolor="#006699"> </td>
                </tr>
                <tr>
                  <td bgcolor="#006699"> </td>
                </tr>
              </table>
              </div>

               

              </body>
              </html>

              • 4. Re: IE 8 seems to be less help for a rounded table corner...
                Nancy OShea Adobe Community Professional & MVP

                Try this and don't forget to get the HTC file for IE.

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <title>Cross-Browser CSS Rounded Corners</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
                
                /**zero out default browser values on everything**/
                * {margin:0; padding:0; line-height:100%; border:0}
                
                /**PAGE LAYOUT**/
                body {
                font-family: Verdana, ariel, helvetica, sans-serif;
                font-size: 100%;
                width: 100%;
                margin:0 auto;
                background: silver;
                text-align: center;
                color:#FFF;
                line-height: 1.5em;
                }
                /**IE Only**/
                *body {font-size:76%}
                *wrapper {zoom:1}
                
                #wrapper {
                overflow:hidden;
                background: #004A6F;
                width: 800px;
                margin:10px auto; /**centers page**/
                border:10px solid #FFF;
                padding: 20px;
                text-align: left; 
                }
                
                #wrapper, table.RC {
                /**ROUNDED CORNERS FOR MOZILLA, WEBKIT, LINUX, OPERA**/
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;
                -khtml-border-radius: 12px;
                border-radius: 12px;
                /**ROUNDED CORNERS FOR IE ONLY - REQUIRES THE BORDER RADIUS.HTC FILE**/
                behavior: url(border-radius.htc);
                }
                /**ROUNDED CORNER TABLE STYLE**/
                table.RC {
                float:right;
                width:400px;
                font-size: 0.75em;
                color: #000;
                border:10px solid #99CCCC;
                background-color: #E5E5E5;
                margin: 1em;
                }
                table.RC td {
                width: 50%;
                padding: 12px;
                font-weight: bold;
                font-size: 14px;
                line-height: 1.2;
                }
                table.RC th {
                border-bottom:medium double #FF6600;
                padding: 20px 0  5px 0;
                text-align: center;
                }
                /**TEXT STYLES**/
                h1 {
                font-size: 2.5em;
                color: #EAE4C4;
                text-transform: capitalize;
                margin-bottom: 1em;
                }
                h2 {
                font-size: 1.5em;
                color: #CCFF00;
                text-transform: uppercase;
                margin-bottom: 1.8em;
                line-height: 1.5;
                }
                h3 {
                font-size: 1.3em;
                color: #FF6600;
                letter-spacing: 3px;
                border-top: 2px solid #FF6600;
                margin-bottom: 1em;
                line-height: 1.5;
                padding-top: 20px;
                }
                p {
                font-size: 1em;
                line-height:1.5;
                margin-bottom: 1em;
                }
                </style>
                </head>
                <body>
                <div id="wrapper">
                <h1>CSS Rounded Borders</h1>
                <h2>Now With Cross browser support for IE!</h2>
                <h3>Tested and works in Safari, Chrome, Firefox, Opera, Linux, and IE 6, 7, 8</h3>
                <table class="RC" cellspacing="3" cellpadding="5">
                <tr>
                <th colspan="3"> SUPPORTING FILES </th>
                </tr>
                <tr>
                <td>Border-Radius Behavior for IE</td>
                <td><a href="http://code.google.com/p/curved-corner/">GET THE .HTC FILE</a> and upload it to your web server</td>
                </tr>
                </table>
                <p>This page demonstrates how you can easily add rounded corners to all your
                web pages without the need for image slices, complicated  CSS, JavaScripts
                or bloated mark-up. </p>
                <p>Using  the CSS <strong>Border-Radius</strong> properties for the major browsers
                that support it, along with an ingenious workaround for Internet Explorer,
                now you can have fully flexible division boxes or tables
                with rounded corners whenever you need them.</p>
                </div> <!--end wrapper -->
                </body> <!--end body -->
                </html> <!--end document -->
                

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                www.alt-web.com/
                www.twitter.com/altweb
                www.alt-web.blogspot.com

                1 person found this helpful
                • 5. Re: IE 8 seems to be less help for a rounded table corner...
                  brightbelt Level 1

                  Thanks Nancy,

                    Thanks to you, I'm using that as a CSS Template for my site. I've yet to upload it - I'm still leaning on tables here & there.

                   

                  I'll have to do a separate post about it - but some of my text is running off the page. I'm well-versed in some CSS syntax but overall, I lack some grasp of the bigger picture but I am quite okay in other areas.

                   

                  Thanks again, Frank B.