Center horizontal rule in IE8

I have a simple web site that I designed with the hope that it would render consistently across multiple browsers and up to this point it has. The problem is that with the release of IE8 a horizonal rule on my main page is no longer centered and I can't figure out why. Any help or insight would be greatly appreciated.

First off here is my doctype:

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

My page is built using nested div containers so that my page is centered with a smal margin on the left and the right.

The horizontal rule is contained in a table cell and I applied a "text-align: center;" to the HR element. I probably could do without this since the entire div is centered but it's in there anyway.

I just can't figure out why the hr isn't centered along with all of the other content. And like I said it's only in IE8 that it appears this way.

Here are my body and html elements:

html {height: 100%; width: 100%;} /* Set parent element to 100% */

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;/* Set body element to 100% height */
background-color: #b0c4de;
}

Here is my div container and the nested div with the margins:

div.container {
height: 100%;/* Set div container to 100% height and center */
width: 100%;
text-align: center;
}

div.topmid {
width: 75%;
height: 99%;
background-color: #4682b4;
margin: 1% auto 0 auto; /* Set left & right margin auto, to center the div */
min-width: 750px;
width:expression(document.body.clientWidth < 850? "750": "75%" ); /* Min-Width for IE6 */
}

Here is the table and the cell that the hr is contained in:

table.top {
width: 100%;/* Header Table contained in "topmid" div */
height: 16%;
padding: 0px;
margin: 0px;
border-collapse: collapse;
font-family: "andale mono", manaco, arial;
}
td.horow {
width: 100%; /* Main row of Header Table (table.top) */
height: 10%;
padding: 0px;
margin: 0px;
}
And here is the hr element itself:

hr {
width: 90%;
text-align: center;
margin-bottom: 3px;
padding: 0px;
border: 1px solid #b0c4de;
color: #b0c4de;
background-color: #b0c4de;
}

Thanks again for any assistance you might be able to provide!

Center horizontal rule in IE8

pboak81

marcel

pboak81

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week