I'm attempting to align two links below an image as text. The HTML I have works perfectly in Chrome and Firefox, but not in IE, where 90% of our internal users are.
Here is the code:
<div style="float: right;"><img src="sites/default/files/recog.png" width="419" height="465" style="border: 6px double #7a9a01;" /><br />
<p style="text-align: right;"><a href="webform/world-of-thanks">Click to Nominate Online!</a></p>
<p style="text-align: right;"><a href="hr/files/world-thanks-nomination-form/attachment/newest">Print your nomination form here.</a></p>
</div>
<h2>"A World of Thanks!" program</h2>
<p>The “World of Thanks!” program is a collection of...</p>
In Chrome, the above HTML displays the text and content on the left, with the image appearing on the right, and the link text positioned underneath the image to the right.
In IE, the links appear first on the left, followed by the text, and the image shows up on the right as intended. However, in IE, the links do not go under the image; instead, they are placed to the left of it.
Any ideas on what I might be doing wrong?
Issue in IE:
Correct display in Chrome: