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

CSSWordPress

Avatar of undefined
Last Comment
LZ1
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

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of igloobob
igloobob
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

ok cheers trying these suggestions now...

Avatar of igloobob
igloobob
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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!!
Avatar of LZ1
LZ1
Flag of United States of America image

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!!!
Avatar of igloobob
igloobob
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

thanks!!
Avatar of LZ1
LZ1
Flag of United States of America image

Your welcome! Thanks for the points
CSS
CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo