Question

Let me make it quick for you all :

Go to http://chetanreddy.com/chat/ in Internet Explorer 7.

Notice there is a lot of space after the single word.
Works fine in all except IE7.
Would appreciate your help.

If you want to edit it : http://jsbin.com/eribuf/3/edit

Answer 1

Ok, for starters you need a min-height on one of the background boxes, because it’s breaking your gradient:

.wBoxTall .right, .gBoxTall .right {min-height: 29px;}
.wBoxTall .bottom .right, .gBoxTall .bottom .right {min-height: 0;}

Whenever you have issues in IE7, the first thing you should try is giving the element hasLayout – it’s a weird little bug that means sometimes your styles don’t work as they should. It’s also often useful to specify a positioning. Try this:

.wBoxTall, .gBoxTall {zoom:1; position:relative}