Another IE rounded corners problem

[KingZeph]

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:

” rel=”bookmark” title=”Permanent Link to “>

‘); ?> Posted in |

Not Found

Sorry, but you are looking for something that isn’t here.

[KingZeph]

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

[Author]

Posts