float right image pushes down text in table below in IE9 [migrated]
- by Cheers and hth. - Alf
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).
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 – 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 – 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 – 02.
Musikk: «Mister West», Steinar Aarsnes, Andøya. CC.
Salg av øl/vin og snacks.
</div>
VEL MØTT — SKITT FISKE!
And the resulting HTML served to a browser (only the relevant first part):
<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>
The 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?
