Incorrect BG color on dashed border in IE

sford999 · May 23, 2007

I have the problem where the dashed border is incorrect in IE, but works fine in Firefox.

The problem is that its taking the background color (#333333) from the main body and using that as the background on the dashed border (see screenshots for better description).

Firefox (correct)

IE (Incorrect)

The CSS is below:

body {
background-color: #333333;
padding:0;
}

#header {
background-image: url(../images/header.jpg);
height:339px;

}

#topfooter {
background-image: url(../images/topfooter.jpg);
padding: 5px;
}

#footer {
background-image: url(../images/footer.jpg);
height:28px;
}

#maintable {
border-collapse:collapse;
}

#advtable {
border-collapse:collapse;
}

.content {
width: 450px;
padding-left:10px;
margin-top: 5px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
background-color:#CFC;
vertical-align: top;
/*
Dashed Border
*/
border-right: 1px #339900 dashed;
padding-top: 10px;
padding-bottom: 10px;
}

.content h2 {
font-size:24px;
color:#090;
font-family:Tahoma, Arial, Helvetica, sans-serif;
}

.content h3 {
font-size:20px;
color:#090;
font-family:"Trebuchet MS", Verdana, SansSerif;
text-align: center;
font-weight: 900;
}

.content h4 {
font-size:14px;
color:#090;
font-family:Arial, Helvetica, sans-serif;
text-align: left;
}

.content p {
color:#333;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

.content div {
color:#333;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}

#adverts {
margin-top: 5px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
background-color:#CFC;
vertical-align: top;
/*
Dashed Border
*/
border-bottom: 1px #339900 dashed;
padding-top: 10px;
padding-bottom: 10px;
}

.tablesidebar {
background-color:#CCFFCC;
margin: 5px 0 0 5px;
width:199px;
}

#sidebar {
float:left;
margin: 5px 0 0 10px;
width: 199px;
}

#sidebar .sidebar_item{
margin-top: 5px;
}

#sidebar .sidebar_item h3{
margin-bottom: 0;
color:#090;
font-size:15px;
font-family:"Trebuchet MS", Verdana, SansSerif;
}
#sidebar .sidebar_item ul{
padding: 0;
margin: 0;
}

#sidebar .sidebar_item li{
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333;
padding-top: 0;
}

#sidebar .sidebar_item li a{
text-decoration:none;
border-left: 1px #090 solid;
font-size:10px;
color:#333333;
padding-left: 4px;
display:block;
width: 100%;
}

#sidebar .sidebar_item li a:hover{
background-color:#6C6;
color:#333;
text-align:left;
padding-right: 8px;
width:98%;
}

#footer p {
margin:0;
padding: 5px 16px;
font-size:12px;
color:#6C6;
font-family:"Trebuchet MS", Verdana, SansSerif;
font-weight:bolder;
text-align: center;
}

#footer p a {
color:#6C6;
text-decoration:none;
}

#footer p a:hover {
color:#FFF;
}
a,
a:active,
a:visited {
color:#000;
text-decoration:none;
}

a:hover {
color:#090;
text-decoration:none;
}

#page {
width: 700px;
padding-bottom:5px;
background-color:#CFC;
margin: 0 auto;
border-top: 8px #6C6 solid;
border-bottom: 8px #6C6 solid;
display:table;
}

#header h1 {
font-size:32px;
font-family:"Trebuchet MS", Verdana, SansSerif;
color:#090;
letter-spacing:-3px;
padding-left: 10px;
}

.h1_emp {
font-size:30px;
color:#6C6;
font-weight:bolder;
letter-spacing:-2px;
}

#header_img {
width:700px;
height:248px;
background-image:url(../images/home_img.jpg);
}

#left{
width:480px;
float:left;
/*
Dashed Border
*/
border-right: 1px #339900 dashed;
margin-top:5px;
}

Anyone have any ideas on how to fix this as I`ve been trying for the past few hours.

ToonMariner · May 24, 2007

what doctype are you using?

I have noticed before that ie and ff handle backrounds differently...

IE seems to apply your background from when the border ends ff seems to place the background from the actual start of the element - so it looks like the border has been placed on top of the background..

I didn't explain that very well but if you put a 10 px border on an element I think you will see what I mean....

sford999 · May 24, 2007

Doctype is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I know what you mean about the backgrounds, but I can't figure this out.

Site is http://www.carpfishinguk.co.uk if that helps?

Sign In

Incorrect BG color on dashed border in IE

Recommended Posts

sford999

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

sford999

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information