<i></i> kills my IE JS navigation buttons

[Tigers!]

(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.

<div id="outer">
<div id="hdr" align="center"><img src="images/banner800.jpg" alt="Welcome to Petals &amp; Patches" border="0" width="361" height="154" />
<h1>Applique</h1>
</div>
<div id="bodyblock" align="right">
<div id="l-col" align="left">
<script type="text/javascript" src="js/navigation.js"></script> 
</div>
<div id="cont">
<p style="font-size:12px"><i>When sewing the term appliqu&eacute; (or 
..
Hastings (UK) in 1066 AD.</i></p>
<p style="font-size:14px"> Site content here ..
..
</p>
..
</div>
..
</div>
..
</div>

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.
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?

[Black Max]

There is a lot of outdated and deprecated code in your snippet.

All of this should be redone in your stylesheet:

<div id="hdr" align="center"><img src="images/banner800.jpg" alt="Welcome to Petals &amp; 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&eacute; (or ... Hastings (UK) in 1066 AD. </i></p>
<p  style="font-size:14px"> Site content here ... </p>

rendering all these center-aligns, left-aligns, image sizes/borders/etc, and style formattings (including the italics) moot.

Also, you have 13 validation errors, most of them in your form, which might make it tough for some people to submit purchase orders.

http://validator.w3.org/check

[gary.turner]

The <i> tag is not appropriate here. If you keep it, do this

#cont {   /* petalsan...ayout.css (line 51) */
  background: #FFFFDF none repeat scroll 0 0;
  color: #333333;
  overflow: hidden;   /* Creates new block formatting context for modern 
                         browsers; it defines the rectangle that encloses 
                         its content. */
  text-align: left;
  zoom: 1;   /* Sets hasLayout for IE<8; added for IE6 's sake. */
}

If you want that paragraph to be italic, give the <p> a class or id token, for example, <p id="summary">, then set its font-style to italic.

cheers,

gary