No replies
SpaceDan
Offline
newbie
Last seen: 15 years 18 weeks ago
Joined: 2006-01-05
Posts: 1
Points: 0

Hi people.

I'm having some trouble with some boxes with curved corners on IE. My site can be accessed at http://danhoc.freefronthost.com/ .

I have stacked some divs with different background images on top of the update boxes to create curved corners and a border around each one. You can see how the effect is supposed to look on the menu boxes on the left.

There is a div called .news beneath each stack that dictates properties of each box such as the width, background color, bottom margin etc.

I have used the same classes for the borders and corners on the menuboxes and the updateboxes (.br .tl .tr etc....) but when viewing the site with IE I get what looks like 10px of padding down the right hand side of the update boxes.

I've been working for hours trying to work this one out but in the end I've had to cave and ask for some help. Tongue

body {
	background-color: #86aeff;
  }
a:link { 
	color: #004ade;
	text-decoration: none;
	font-weight: normal;
  }
a:visited { 
	color: #004ade;
	text-decoration: none;
	font-weight: normal;
	}
a:hover { 
	color: #ffffff;
	background-color: #ff00cc;
	text-decoration: none;
	font-weight: normal;
	}
a:active { 
	color: #333333;
	font-weight: normal;
	}

input { 
 background-color: #ffffff;
 border: 1px solid #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}

select { 
 background-color: #ffffff; 
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;	 
}

textarea { 
 background-color: #ffffff; 
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 12px;
 border: 1px solid #000000;
 
}
.commentlink a:link { 
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
  }
.commentlink a:visited { 
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
	}
.commentlink a:hover { 
	color: #ffffff;
	background-color: #ff00cc;
	text-decoration: none;
	font-weight: normal;
	}
.commentlink a:active { 
	color: #ffffff;
	font-weight: normal;
	}
.BodyText {
	color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}
.smallbody {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
}
.smallestbody {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.smallerbody {
	font-family: tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.textborder {
     padding-top: 10px;
     padding-left: 10px;
}
.br{ 
     background: url(update/img/boxcornerbr.gif) 100% 100% no-repeat;
     padding: 7px;
}
.tl {
      background: url(update/img/boxcornertl.gif) 0 0 no-repeat;
}
.tr {
      background: url(update/img/boxcornertr.gif) 100% 0 no-repeat;
}
.bl {
      background: url(update/img/boxcornerbl.gif) 0 100% no-repeat;
}
.bot {
      background: url(update/img/boxbordert.gif) 0 0 repeat-x;
}
.bob {
      background: url(update/img/boxborderb.gif) 0 100% repeat-x;
}
.bol {
      background: url(update/img/boxborderl.gif)  0 0 repeat-y;
}
.bor{
      background: url(update/img/boxborderr.gif) 100% 100% repeat-y;
}

.barrcorner{
       background: url(update/img/barcornerl.gif) 0 0 no-repeat;
       float: left;
       padding-left: 6px;
       padding-top: 1px;
}
.barlcorner{
       background: url(update/img/barcornerr.gif) 100% 0 no-repeat;
       float: left;
       width: 100%;
}

.frame {
	color: inherit;
	margin: 1em auto;
	width: 777px;
	text-align: justify;
}
.menu {
    	float: left;
	width: 100px;
	text-align: justify;
}
.content {
        float: right;
        width: 500px;
}
.title {
	color: inherit;
	background-image: url(update/img/title.jpg);
	background-color: #004ade;
	background-repeat: no-repeat;
	width: 777px;
	height: 170px;
	text-align: justify;
}
.menubox {
        background-color: #ffffff;
        float: left;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 11px;
        width: 150px;
        margin-bottom: 10px;
}
.menulinks {
        clear: left;
        padding: 5px;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 11px;
        margin-bottom: 4px;
        color: #ffffff;
	text-align: left;
}
.section {
        background: #004ADE;
        width: 135px;
        float: left;
        color: #ffffff;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
        padding-bottom: 2px;
}
.newstitle {
        background: #004ADE;
        float: left;
        color: #000000;
        font-family: Verdana, Helvetica, sans-serif;
	padding-bottom: 1px;
        font-size: 12px;
        
}
.news {
        background-color: white;
        text-align: left;
        margin-bottom: 15px;
        float: right;
        color: #000000;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
        width: 600px;
}
.heading {
        text-align: left;
        float: left;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 2px;
        margin-bottom: 2px;
        color: #ffffff;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
}
.date {
        text-align: left;
        width: 100px;
        float: left;
        margin-left: 5px;
        margin-top: 4px;
        color: #ffffff;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
}
.comments {
        text-align: left;
        float: right;
        color: #ffffff;
        margin-top: 3px;
        margin-right: 3px;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
}

.picture {
        margin-top: 30px;
	margin-left: 80px;
        color: #000000;
        text-align: center;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
        width: 400px;
}

.commentbox{
        background-color: #ececff;
        text-align: left;
        padding: 10px;
        margin-bottom: 30px;
        float: right;
        color: #000000;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
        width: 570px;
}

.posted{
        text-align: right;
        color: #000000;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
        width: 570px;
}

.commentmade{
        background-color: #004ade;
        color: #ffffff;
        border: 4px dotted #ffffff;
	margin: 1em auto;
        text-align: center;
        padding: 10px;
        margin-bottom: 30px;
        font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
        width: 300px;
}