IE7 only: float bug on elements with italic, background properties

— What do you get if you cross a float and an italic in Internet Explorer?…”

Setting font-style:italic in your CSS for elements in the vicinity of a floated element can actually trigger a float bug in Internet Explorer 7.

This is only a problem, so far as I can see, when you’re using backgrounds on the unfloated element(s), because thr background image or colour will overrun your floated element.

Want to try it? The situation is as follows:

  1. Float an element containing either an image or text
  2. Continue with unfloated elements so that under normal circumstances they wrap around the floated element
  3. Give the wrapped text a background property, such as a background colour or image

The code so far:

/* CSS */
.floated {float: right;}
p {background: #fc0;}
...
<!-- HTML -->
<div class="floated"><img src="/images/tmp.jpg" /></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos himenaeos</p>

Up to this point everything’s normal:

No bug

So far so good. Now add font-style:italic; to the rule for p.

Here’s Firefox, with no surprises:

Firefox italic float: no bug

But here’s Internet Explorer 7:

IE italic float bug

The only (il)logical answer seems to be the addition of overflow: auto to the rule with the background.

I was clued in by a slightly different issue with the same fix already discovered long ago. Just to remind you once more, this is IE7 only, folks!

Comments

No responses yet to IE7 only: float bug on elements with italic, background properties

Why not give me your comments?

You can use these tags in your comment:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(required)

See also:

jQuery .html() returns strange results in IE after other bindings

Internet Explorer: where it belongs?

Sometimes we’re stuck with junk attributes in jQuery.html() for Internet Explorer.

  • Originally published: 17 Feb 2009 in Technical

Highcharts and HTML5: IE’s innerHTML unknown runtime error

error innerhtml

Internet Explorer’s hoary old unknown runtime error comes back to haunt me in HTML5

  • Originally published: 22 Jul 2011 in Technical

CSS floats: container does not stretch to fit floated contents

Nested div float problems

Here’s a quick resolution to an almost ungooglable problem.

  • Originally published: 18 Jan 2006 in Technical

Simply monstrous: web support at Monster

Rex

Online recruitment site Monster could use a lesson in technical support when answering bug reports.

More IE woes: the curved corner DIV

IE in freefall

Rendering CSS rounded corners is still surprisingly difficult thanks to inconsistently-applied browser standards.

  • Originally published: 19 Jul 2005 in Technical

Who you gonna call?

Photo

Hello you, I'm Mike Padgett. I'm not a Princeton curator, Knoxville mayoral candidate, Kentuckian pastor or Arizona journalist, I just share the same name. In fact, I am a consultant working in user experience and information design.

I also enjoy travel, concerts, films and walking.

I'm originally from Yorkshire, England but nowadays I live in Belgium. My current favourite Belgian beer is Black Albert.

Shameless self-promotion

Dopeology.org

Over a year in the making, Dopeology.org is my latest personal project: a topology of doping in thirty years of European pro road cycling.

I collected information from thousands of sources, then I modelled and published it via a lightweight user interface.

RSS feeds