Vertical Line Different Sizes In Different Browsers

[ssbsts]

I am trying to make "vertical rule" on my webpage by repeating a 1x1 pixel image on the y-axis. It works perfectly in FF and Chrome(haven't tested in safari) but fails miserably in IE. In FF it spans the entire div 95% as specified in the css, but in IE it goes down about half an inch and stops.

Heres the link to show visually what is happening.

Here is my css for the "vertical rule"

div#vr { 
height: 95%; 
background-image: url('images/hr.jpg'); 
background-repeat: repeat-y; 
padding-top: 5px; 
padding-left: 5px; 
padding-right: 5px; 
position: absolute; 
}

Any ideas?

Thanks

[drhowarddrfine]

Just for laughs, try removing all the spaces before the doctype and see if that fixes it.

[drhowarddrfine]

If the above doesn't do anything, IE is so bad with floats that it could be the combination of the floats and positioning that's throwing this off but I can't look at it right now.

[David Laakso]

Pages that rely on absolute positioning structure are often problematic for a lot of reasons. While float based layouts can have issues too, they are a better choice (with small absolute positioned elements sometimes used within them) -- until such time as a better method may come along in the future.

If you are up for it, your current layout is easily constructed using floats [1] and a faux column [2] for the vertical rule. No absolute positioning needed at all.

[1] faux column

[2] a layout that may meet your need (adjust the widths to yours and delete #extra division.