wordpress causing floated element in html banner to clear

Posted on 2011-10-10
Last Modified: 2012-05-12

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="" onclick="; return false;"><img class="sponsorLogo2" src="images/RelentlessFREEZE2011.png" alt="" width="90" height="79" alt="Freeze Logo" /></a>
         <a href="" onclick="; 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( 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

Question by:igloobob
    LVL 30

    Expert Comment

    Try adding a <div style="clear:both;"> </div>  inside of the <div class="Banner"> at the very end after everything.
    LVL 30

    Accepted Solution

    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

    Author Comment

    ok cheers trying these suggestions now...


    Author Comment


    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!!
    LVL 30

    Expert Comment

    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!!!

    Author Comment

    LVL 30

    Expert Comment

    Your welcome! Thanks for the points

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now