IE gap between div when using unitPNG

[bzmillerboy]

I have a gap appearing between two divs floated left and a clear div before my main content div begins and it is only appearing in IE6. I believe it is being caused by unitPNG being applied to an <a> tag with a .png background image just above the clear div.

I’ve validated the page with XHTML 1.0 Strict, everything looks good except for some iframe stuff (I’m ignoring). I’ve also confirmed IE6 is rendering in standards mode.

Live Site: http://entertaincincy.com/3.0/chris/chris.html

Here is the HTML.

Code:

FREE INSTANT QUOTE

Give us a few pieces of information about you and your event and our system will return an instant quote for you to review, print, or continue on to booking today. You’ll receive an email including your quote details as well as a printable version. Dates are guaranteed upon contract receival.

GET QUOTE

Here is the CSS

Code:

#callout-left { float:left; background:url(images/callout-left-bg.jpg) no-repeat; width:479px; height:251px; color:#FFFFFF; position:relative; }
#callout-right { float:right; background:url(images/callout-right-bg.jpg) no-repeat; width:500px; height:251px; }

#callout-left h2 { text-transform:uppercase; margin:96px 0 10px 10px; }
#callout-left p {margin:10px 0 10px 10px; width:449px;}
#callout-left a {float:right; margin-right:50px;}

#main { background:url(images/main-bg.jpg) no-repeat; padding:33px 10px; }

.button {background:transparent url(images/btn-bg.png) no-repeat top left; color:#fff!Important;padding:8px 26px 9px 34px; text-decoration:none; height:12px; width:55px; text-transform:uppercase; }
.button:hover {background:transparent url(images/btn-bg-hover.png) no-repeat top left;}

.clear {clear: both; line-height:0px; height:0px; position:relative;}

Screen shot in Firefox 3.6
[img]http://i257.photobucket.com/albums/hh234/bzmillerboy/EC-firefox.png[/img]

Screen shot in IE6
[img]http://i257.photobucket.com/albums/hh234/bzmillerboy/EC-internetexplorer.png[/img]

[bzmillerboy]

I guess this is tricky one since no one replied.

I have made the gap much smaller by changing the way my buttons were coded/styled however there is still a small gap. Anyways, I basically changed my buttons from <a> with text and a background to an image (containing the text) and used sprites method. I guess the unitPNG didn’t like all the padding around the <a> or something.

Anyone else have similar issues?

[Author]

Posts