Top border off by one pixel sometimes

[RyanReese]

Originally Posted by d_vmn

Thanks a million!
Your code is at: css2g.webatu.com/css2o.shtml and mine at: css2g.webatu.com/css2p.shtml
They work well in FF 3.0 and IE 8.0. I'll check Safari and IE 7 tomorrow.

So basically I think you are saying background images should all be inside one wrapper. My motivation for doing this is mostly to reduce my total page byte size for faster page loads and a better text to code ratio.

Actually his main point is to use a 100% high wrapper instead of putting an image on the body, which can cause jogs

By the way what tools do you use? I am using DreamWeaver 2004 but tracking css issues is a challenge with it.

Personal preference. I use notepad

There's two pieces of your css magic I would love an explanation on:
1) the inner class as in height:1%:

* html #wrapper {height:100%;}
.inner{
padding: 0 23px;
min-height:0;
}
* html .inner{height:1%;}

.inner needs haslayout to avoid an IE bug and min-height:0; sets haslayout for IE7, and since IE6 doesn't support min-height Paul has fed height:1%; via the star html hack. He could have also just given .inner zoom:1; (though it isn't valid)

2) and why the rounded corner borders had to have -1 pix as in:
The image is indeed 776 pixels wide.

#bdrt {
background: url("/pix/bdrt_776.gif") no-repeat -1px 0;
height:41px;
}
#bdrb {
background: url("/pix/bdrb_776.gif") no-repeat -1px 0;
height:41px;
}

He is just telling it to start -1px from the left