I've been working on a new layout. I had it working great, then I tried to get sIFR working. I couldn't get it working and I removed the code but broke my layout in the process somehow.

I can't figure out why but the green box should have a margin to the left of it like the blue one does. It shows correctly in FF but not in IE 6.

Can anyone please take a look and see where I messed it up. The CSS and HTML are all on the same page right now.

http://74.63.67.148/~sharedsite/index.html

wait ignore what this said before.

.moduletable-orange {
 width: 32.7%;
 height: 265px;
 margin: .7% 0;
 float: left;
 background: #fc8a00 url(images/bg-orange.gif) repeat-x top left;
 position: relative;
}

should be:

.moduletable-orange {
 width: 32.7%;
 height: 265px;
 margin: .7% 0 .7% .8%;
 float: left;
 background: #fc8a00 url(images/bg-orange.gif) repeat-x top left;
 position: relative;
}

You just missed out a couple of the details on the margin for the orange box.

To save confusion i suggest you use:

margin-left: **px;
margin-right: **px;
margin-top: **px;
margin-bottom: **px;

that way its easier to tell which number does which margin, just easier to troubleshoot that way. You don't have to if you dont like that idea, just something to think about.

P.S I love the template dude.

that's not it... I was thinking the same thing, and have tried that.

margin: top right bottom left;

I'm know what the numbers mean, and my intention on the orange is to have a .7% margin on the top and bottom and no margins on the left or right. The margin is set on the green and blue for the left but not the right.

I've tried extending the margin statements but it doesn't work.

BTW, thanks for the compliment!

Here is what is REALLY weird... When I look at the page in my local browser, it works perfectly in IE and FF. When I upload it to the server and look at it there, the left margin on the green box only disappears.

That is sooo weird!

I changed the margin to go on the right of the orange and green instead of the left side for the green and the blue. It seems to be working now.

I have another question though: I tried using sIFR for the Impact font inside the offers box. It didn't work so well, and I couldn't get it working properly. I couldn't get a transparent background for the font, it stayed white. Right now I just have it set to use the Impact font but if someone doesn't have it on their system then it will look awful.

Any ideas how I can either get sIFR working correctly, or just use a different technique?

There are forums for sIFR and there is plenty of documentation. However, I suspect you just need to set wmode=transparent for the font - something like this in the sifr-config.js file:

sIFR.replace(FreestyleScript, {selector: '#header h6', wmode: 'transparent'
,css: '.sIFR-root {text-align: right;, font-weight: bold;, color: #d00000;, background-color: #ffffff;, display: inline;}'});