Grow your CSS skills. Land your dream job.

Another IE rounded corners problem

  • # August 16, 2008 at 8:14 pm

    I’ve been following the video for making rounded corners and I’ve been using the ‘Box-two’ method with four .png files for the corners.

    As usual everything works in Firefox, but not in IE (at least not in IE6)

    I know the issue has to do with padding, and I think I did things right by creating the ‘inside’ class and applying the padding to that (I’m in wordpress, so I created the class ‘inside’ within the class ‘post’).

    Here’s the problem:
    IE6
    [img]http://www.unitedsound.us/pics/IECorners.png[/img]

    Firefox 3
    [img]http://www.unitedsound.us/pics/FFoxCorners.png[/img]

    If I remove the 20px padding then IE will put the left hand corners in the right position, but the text moves over as well and the corner and text show up on top of each other.

    But, there is also the problem with the bottom corners. Even with the padding removed, they show up below the bottom of the post (and if you look at the top of the IE pic you can see that the above post has no bottom corners. I think they are covered up by the next post down)

    here is the css:

    Code:
    /*
    Theme Name: Starkers
    Theme URI: http://elliotjaystocks.com
    Description: The totally nude WordPress theme. Phwoar!
    Version: 1.0
    Author: Elliot Jay Stocks
    Author URI: http://elliotjaystocks.com

    Colors:
    light blue – #c2d3e1
    */

    /* ************************************************************************************************************************************************************

    Obviously feel free to change the info above once you’ve added your own styling

    ************************************************************************************************************************************************************ */

    * {margin: 0;padding: 0;}
    /* ************************************************************************************************************************************************************

    And now it’s over to you…

    ************************************************************************************************************************************************************ */
    body{
    margin:0 auto;
    font-family:Arial,Helvetica,Georgia,Sans-serif;
    background:url(images/body-bg.png) repeat-x top #000000;
    color:#ffffff;
    }

    ul {
    list-style: none;
    }
    p, li {
    font-size: 10pt;
    line-height: 20px;
    margin-bottom: 10px
    }

    h2, a {
    font-size: 14pt;
    margin-bottom: 10px;
    color: #c2d3e1;
    }

    a {
    outline: none;
    }

    .clear { clear: both;}

    .post {
    background: #334351;
    position: relative;
    margin: 10px 0;
    }
    .post .tl {
    position: absolute;
    width: 14px;
    height: 14px;
    background: url(images/tl.png) no-repeat;
    top: 0px;
    left: 0px;
    }
    .post .tr {
    position: absolute;
    width: 14px;
    height: 14px;
    background: url(images/tr.png) no-repeat;
    top: 0px;
    right: 0px;
    }
    .post .bl {
    position: absolute;
    width: 14px;
    height: 14px;
    background: url(images/bl.png) no-repeat;
    bottom: 0px;
    left: 0px;
    }
    .post .br {
    position: absolute;
    width: 14px;
    height: 14px;
    background: url(images/br.png) no-repeat;
    bottom: 0px;
    right: 0px;
    }
    .post .inside {
    padding: 20px;
    }
    div#wrapper{
    width:800px;
    margin: 0 auto;
    text-align:left;
    }
    div#slide {
    height: 173px;
    width: 350px;
    padding-left: 300px;
    padding-top: -50px;
    color: #c2d3e1;
    }

    ul#nav {
    height: 215px;
    background: url(images/header-bg.jpg) no-repeat;
    list-style: none;
    padding-left:125px;
    }

    ul#nav li {
    display: inline; /* Prevents “stepdown” */
    }

    ul#nav li a {
    display: block;
    width: 100px;
    float: left;
    margin-top: 9px;
    color: #c2d3e1;
    font-size: 14pt;
    text-decoration: none;
    }

    ul#nav li a:hover, ul#nav li a:active, ul#nav li:focus{
    color: white;
    }

    div#main-content{
    padding-bottom: 50px;
    padding-left: 50px;
    padding-top: 50px;
    }

    div#main-content div#left-column {
    float: left;
    width: 450px;
    text-decoration: none;
    }
    div#main-content div#left-column a {
    text-decoration: none;
    }
    div#main-content div#sidebar {
    float: right;
    width: 250px;

    }
    div#main-content div#sidebar li{
    font-size: 12px;
    }

    div#main-content div#sidebar li a{
    font-size: 12px;
    }

    div#sidebar p,div#sidebar li {
    font-size: 12pt;
    line-height: 14px;
    margin-bottom: 10px
    }

    div#footer {
    color: #c2d3e1;
    padding: 10px 0 10px 0;
    text-transform: uppercase;
    border-top: 2px solid #c2d3e1;
    text-align: center;
    }

    and the php

    Code:

    < ?php if (have_posts()) : ?>
    < ?php while (have_posts()) : the_post(); ?>

    ” rel=”bookmark” title=”Permanent Link to < ?php the_title_attribute(); ?>“>< ?php the_title(); ?>

    < ?php the_time('F jS, Y') ?>

    # August 19, 2008 at 3:01 pm

    I’ve found that it works fine in IE7, but not in IE6.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".