[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 184
  • Last Modified:

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

0
igloobob
Asked:
igloobob
  • 4
  • 3
1 Solution
 
LZ1Commented:
Try adding a <div style="clear:both;"> </div>  inside of the <div class="Banner"> at the very end after everything.
0
 
LZ1Commented:
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
0
 
igloobobAuthor Commented:
ok cheers trying these suggestions now...

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
igloobobAuthor Commented:
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!!
0
 
LZ1Commented:
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!!!
0
 
igloobobAuthor Commented:
thanks!!
0
 
LZ1Commented:
Your welcome! Thanks for the points
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now