float right image pushes down text in table below in IE9

Question

I'm not a webmaster, not even a web developer, but I'm tasked with adding content to a Wordpress site developed by Someone Else(TM).

I don't have effective access to define new CSS rules, so it's all inline styling.

Here's a page illustrating the problem: http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/.

It shows up nice in Firefox:

But in IE9 the floated picture pushed down the text in the table below, so that it looks rather awful:

I found some related questions on the web, e.g. "CSS: Float right in IE doesn't work!" and "why does a floating DIV mess up table positioning?", and the suggestions there led me to set clear: none on the div around the table, the table itself, and then each individual tr and finally even on each individual td. I also set width="99%" on the table, and tried (but I don't know how correctly) to apply the IE6 quirk fix margin-right: -3px.

So here's the content as written in Wordpress, including the unsuccessful attempted fixes:

<h1><div style="float: right"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" width="200" height="242" class="size-full wp-image-671"/></a></div>Fiskekonkurranse i Hovden!</h1>
<div style="background-color: #FAF0F0; clear: none;"><table width="99%" style="clear: none; right-margin: -3px;">
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Dato:</td>
    <td style="text-align: left; clear: none;">Lørdag 21.juli</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; padding-left: 2em";  clear: none;>/ barn, Flytebrygga</td>
    <td style="text-align: left; clear: none;">15.00 &ndash; 16.00</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; padding-left: 2em;  clear: none;">/ voksne (over 12 år), Moloen</td>
    <td style="text-align: left; clear: none;">15.00 &ndash; 17.00 </td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Sted:</td>
    <td style="text-align: left; clear: none;">Hovden</td>
  </tr>
  <tr style=" clear: none;">
    <td style="text-align: left; clear: none;">Pris:</td>
    <td style="text-align: left; clear: none;">voksen (over 12 år) kr. 50,-, barn kr. 30,-</td>
  </tr style=" clear: none;">
  <tr>
    <td style="text-align: left; clear: none;">Arrangør:</td>
    <td style="text-align: left; clear: none;">Hovden Grendelag</td>
  </tr>
</table></div>

Velkommen til den årlige Fiskekonkurransen i Hovden lørdag 21. juli!

<a href="http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/fiskekonkurranse-2011-bilde-nedskalertjpg/" rel="attachment wp-att-672"><img src="http://www.reginedagan.no/wp-content/uploads/2012/03/fiskekonkurranse-2011-bilde-nedskalertjpg.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011"  width="400" height="267" class="alignleft size-full wp-image-672" /></a>Det blir stangfiske fra moloen og egen barnekonkurranse fra flytebrygga.

Premiering for størst fisk, størst antall kg og flest antall stk. Premiering for barn kl. 16:30 på moloen. Alle premieres. Premiering for voksne på festen om kvelden.

Salg av pølser og brus, vafler og kaffe, samt sluker.

<div style="clear: left; border: 1px dashed gray; padding: 1em;">
Fest på Hovden samfunnshus kl. 21 &ndash; 02. 
Musikk: «Mister West», Steinar Aarsnes, Andøya. CC.
Salg av øl/vin og snacks.
</div>

VEL MØTT &mdash; SKITT FISKE!

And the resulting HTML served to a browser (only the relevant first part):

<h1>
<div style="float: right;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div>
<p>Fiskekonkurranse i Hovden!</p></h1>
<div style="background-color: rgb(250, 240, 240); clear: none;">
<table style="clear: none;" width="99%">
<tbody><tr style="clear: none;">
<td style="text-align: left; clear: none;">Dato:</td>
<td style="text-align: left; clear: none;">Lørdag 21.juli</td>
</tr>

I'm able to reproduce the effect with simpler code by setting clear: right on the table. However, I'm unable to reproduce the effect with default styling or with clear: none (as above). So it seems maybe it's something Wordpress does, or maybe it's something the theme thing or whatever it is does – but it's very similar to what others have observed, so there is strong indication that it's also a quirk in IE.

Help?

(Perhaps also help with the tags, I've never asked web-developer questions before?)

Answer 1

Use absolute positioning instead.

Take the floating div and put it inside the div with the table in it, so you have

<div style="background-color: rgb(250, 240, 240); clear: none;">

    <div style="float: right;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div>

    <table style="clear: none;" width="99%">
    ...
    </table>

</div>

then change up the css styles a bit so it looks like this. (Edited to reflect my most recent comments)

<div style="background-color: rgb(250, 240, 240); clear: none; position:relative;">

    <div style="position:absolute;right:0px;top:-120px;z-index:50;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div>

    <table style="clear: none;" width="99%">
    ...
    </table>

</div>

and give your h1 tag a style property as well

<h1 style="padding-right:200px;"> ... </h1>

Making the div absolute position is more stable, the div containing your image gets position completely independent of the other content, using coordinate-style positioning (the right and top properties)

Setting the div that contains the table to position:relative; ensures that the image div is positioned relative to the container.

Padding the h1 tag will make sure your text breaks where it did before.

Let me know if that works.

Cheers.