<i></i> kills my IE JS navigation buttons
(Please don't laugh)
If you look at http://www.petalsandpatches.com/applique.htm in both IE and FF you will note that in IE the navigation buttons are missing (not quite true. The upermost button is 1/2 present).
After some investigation I discovered that it is <i>..</i> around some certain text that is doing it viz. if I remove the <i></i> the buttons are back.
There is an outer block, the header, a body block, left column and a column called cont (actually a right column). The left column is the navigation column using JS. The right column contains the site content. The text shown is a little explanatory text I put in a couple of years after the site went live. The italics in question are shown.
<div id="hdr" align="center"><img src="images/banner800.jpg" alt="Welcome to Petals & Patches" border="0" width="361" height="154" />
<div id="bodyblock" align="right">
<div id="l-col" align="left">
<p style="font-size:12px"><i>When sewing the term appliqué (or
Hastings (UK) in 1066 AD.</i></p>
<p style="font-size:14px"> Site content here ..
Why would/should the <i></i> apparently cause so much trouble, although the font size is different between the paragraphs? I will not discount that it might be the <p></p> as well.
Does anyone have any ideas or seen this before?