IE 8 Border on <th>

[unemployment]

I can't get my borders to show up correctly in IE8. IE7 and firefox handle it perfectly. Some how the background color is going on top of my borders.

 

table.search_results thead th{
padding: 6px 6px 4px;
color: #363636;
height:5px;
width: 1%;
white-space: nowrap;

/* Opera */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI0NSwyNDUsMjQ1LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjI3LDIyNywyMjcsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);

/* Firefox */
background: -moz-linear-gradient( top, rgba(245,245,245,1), rgba(227,227,227,1) );

/* Chrome & Safari */
background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(245,245,245,1) ), color-stop( 1, rgba(227,227,227,1) ) );

/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFF5F5F5,EndColorStr=#FFE3E3E3);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFF5F5F5,EndColorStr=#FFE3E3E3)";
}
table.search_results thead th.first{
border-left: 1px solid #cdcdcd;
}
table.search_results thead th.last{
border-right: 1px solid #cdcdcd;
}

[cssfreakie]

May i assume you have a valid doctype?

if so, your css for IE 8 contains an error, got a live site to see it?

[unemployment]

May i assume you have a valid doctype?

if so, your css for IE 8 contains an error, got a live site to see it?

 

FYI I fixed this using outline

[cssfreakie]

Outline? well that is the last thing i would think of with a question like:

I can't get my borders to show up correctly in IE8. IE7 and firefox handle it perfectly. Some how the background color is going on top of my borders.

..since outlines do not take up any space.