Link to home
Start Free TrialLog in
Avatar of igloobob
igloobobFlag for United Kingdom of Great Britain and Northern Ireland

asked on

wordpress causing floated element in html banner to clear

hello,

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

http://warandpiste.com/index.html

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

:)

http://warandpiste.com/index.html
http://warandpiste.com/blog/

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

Avatar of LZ1
LZ1
Flag of United States of America image

Try adding a <div style="clear:both;"> </div>  inside of the <div class="Banner"> at the very end after everything.
ASKER CERTIFIED SOLUTION
Avatar of LZ1
LZ1
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of igloobob

ASKER

ok cheers trying these suggestions now...

LZ1,

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!!!
thanks!!
Your welcome! Thanks for the points