Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

IE 7 Float Bug fix WordPress

  • SOLVED

Hi friends,

it looks like I'm getting an IE 7 float bug, or some other common IE 7 bug, and I am not familiar enough with how to fix this one to solve it.

Here's a link to the site: http://www.thetechhusband.com/

When viewed in IE 7 (I'm looking at it with IE Tester), the "Get a Free Video Course" sign up div is getting pushed down below the video on the homepage, rather than staying right next to the video as it appears in all other browsers.

Here's a screenshot of what's happening in IE 7:

http://screencast.com/t/UHnLd3ZyjVtn

I'd love some help finding a css fix here for IE 7.

Perhaps I've got the layout wrong, with both the iframe element (the video) and the sign up div width defined, and then floating the sign up div right.

Whatever the cause, IE 7 is borking the layout.

Thanks much for any help with this little bug!

Cheerio,
Forest

2012-02-02 by Forest Linden

Answers (3)

2012-02-02

Luis Abarca answers:

add this code to your styles.css


.wistia_embed {
float: left;
}


Or for IE7 only


<!--[if IE 7]>
<style>
.wistia_embed {
float: left;
}
</style>
<![endif]-->

Forest Linden comments:

That worked like a charm, Luis!

Thank you!!

2012-02-02

Giri answers:

<!--[if IE 7]>
#featured { position:relative;}
#sign-up {position:absolute; top:0px;}
<![endif]-->

Can you try that code and let me know. Backup your file before change anything

Giri comments:

Add that code between <head> and </head>

Giri comments:

I think you are using wordpress. So you need to edit your header.php file add then add that code between <head> and <head> tag

Forest Linden comments:

Hi Viruthagiri,

that's not working.

You forgot some html in there, but even adding the missing style tag didn't work.

I put this in to my header.php file:

<!--[if IE 7]>
<style type="css/text">
#featured { position:relative;}

#sign-up {position:absolute; top:0px;}
</style>

<![endif]-->

Any other ideas?

Thanks for your help with this :)

Forest

Giri comments:

Oh yes i forgot style tags. Sorry about that

Giri comments:

Hey sorry can you try one more time?

<!--[if IE 7]>
<style type="css/text">

.slider-container { position:relative !important;}
#sign-up {position:absolute !important; top:0px !important;}

</style>
<![endif]-->

2012-02-02

Jeffri Hong answers:

Hi!

You can try to float the iframe too, and then clear it. If you don't want an additional empty clear div, using overflow in your case will work as well.

Here is the CSS that you can use right away:


#content .slider-container #featured
{
overflow: hidden; /* prevent floated elements to float outside the container, you can't use this if you expect some elements to appear outside of container, but should work fine in your case :) */
}

#content .slider-container #featured iframe.wistia_embed
{
float: left; /* add float left to the iframe */
}



Hope that help.. :)

-----------------------------

Oops, I'm late by a few minutes. Luis answer is basically the same, a little different approach though than mine. Glad to know it worked at least. :)


Cheers,

Jeffri

Forest Linden comments:

Thanks for offering a fix, Jeffri.

The one Luis offered works well, so I'm going to move on and launch the site in a few minutes.

Cheers!

Forest