igloobob
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:
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 & 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;}
Try adding a <div style="clear:both;"> </div> inside of the <div class="Banner"> at the very end after everything.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ok cheers trying these suggestions now...
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!!
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!!!
Glad you got it though!!!
ASKER
thanks!!
Your welcome! Thanks for the points