CSS Help - For the 'Pro'

[nodaa90]

http://www.sureo.com/borderLine/borderLine/

I consider myself to be pretty adept at CSS, but this problem i havnt been able to get around

The problem is the repeating background. I have it set so that the sides will extend as far as the users resolution/browser allows

http://www.sureo.com/borderLine/borderLine/images/body_bg.png
^ is the repeating background

http://www.sureo.com/borderLine/borderLine/images/border.png
^ is the set border, that cannot be repeated

I have the repeating background made so that the diagonal line pattern lines up with eachother

As you can see, where the repeating background and set borders meet there is a little problem with the diagonals lining up, which creates the illusion of a dotted line.

http://img508.imageshack.us/img508/2792/yo9he.jpg

Ideally, the repeating background would line up with the sides IF they were set right next to eachother. The problem is, the margins arent the same as the repeating background size, so the whole image isnt shown, thus the diagonal lines do not lineup :(

HELP! Thanks :)

P.S.: As you can see, I like to code standard table-style designs ^ in CSS just to prove how much better it is !

[gaz545]

You problem only occurs in IE, and it looks perfect in FF

The best solution is to create another style sheet just for IE, and then add a top-margin of about 1 or 2 px to the whole document to shifts down. then link that style sheet to your documents using this code.


<!--[if lte IE 6]>
<style type="text/css">

@import url("stylesie.css");

</style>
<![endif]-->
replacing the location of the style sheet to match yours.

Hope this helps