wordpress causing floated element in html banner to clear


I have done a site that is working great (mostly):


in the banner there is a buy now speech bubble and 2 sponsor logos that are transparent png files and are floated and positioned with margins.

In IE 7 for some reason, the speech bubble and then sponsor logos are being cleared so the bubble goes beneath the main logo (over top of nav) and the sponsor logos remain on the right but are cleared beneath the speech bubble. I have been trying all sorts but can't figure out why this is happening. It is only happening on the blog section of the site, the main html pages this does not happen and they are displayed as they should be in IE 7.

Any ideas why as this is driving me crazy!

I have actually removed the sponsor links off the blog side of the site for now until I figure it out with the speech bubble first but you can see the css etc off the main site link.

Thank you



Relevant code below:

<div class="Banner">
         <a href="index.html"><img class="logo" width="281" height="178"  src="images/W+P-logo.png"  alt="War &amp; Piste logo" /></a>
         <a href="buy_book.html"><img class="buyNowBanner" src="images/buyBook.png" alt="buy book here" /></a>
        <a href="http://www.relentlessfreeze.com/" onclick="window.open(this.href); return false;"><img class="sponsorLogo2" src="images/RelentlessFREEZE2011.png" alt="" width="90" height="79" alt="Freeze Logo" /></a>
         <a href="http://www.dare2b.com" onclick="window.open(this.href); return false;"><img class="sponsorLogo" src="images/dare2b.png" width="131" height="33" alt="Dare 2B logo" /></a>
</div><!-- End of Banner -->

.Banner {width: 1024px;height:200px;text-align: left;margin: 0;background:url(http://warandpiste.com/images/banner.jpg) no-repeat;}

.logo {width:281px;height:178px;float:left!important;margin:21px 0 0 21px!important;}

.buyNowBanner {width:154px;height:61px;float:left!important;margin:10px 0 0 75px!important;position:relative;}

.sponsorLogo {width:131px;height:33px;float:right!important;margin:110px 30px 0 0px!important;position:relative;}

.sponsorLogo2 {width:90px;height:79px;float:right!important;margin:75px 30px 0 0px!important;position:relative;}

Open in new window

Who is Participating?
Another alternative would be to position both images inside the banner absolutely.  Then you would just have to set the .Banner class to position:relative.  This is an alternative to clearing your floats
Try adding a <div style="clear:both;"> </div>  inside of the <div class="Banner"> at the very end after everything.
igloobobAuthor Commented:
ok cheers trying these suggestions now...

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

igloobobAuthor Commented:

the absolute positioning worked thank you!
The other clearing method didn't.

Any idea what could have been causing this? I guess something to do with the header being separate in wordpress whereas the regular html pages it's all the same document hence why the regular pages worked fine but not the wordpress ones?

Bloody IE!!
The best explanation I can give you is : It's IE. I usually use the absolute positioning trick only when I need too. The clearing method comes from clearing your floats properly.

Glad you got it though!!!
igloobobAuthor Commented:
Your welcome! Thanks for the points
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.