SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry <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.
    HTML Code:
    <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?
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    There is a lot of outdated and deprecated code in your snippet.

    All of this should be redone in your stylesheet:

    Code:
    <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

  3. #3
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <i> tag is not appropriate here. If you keep it, do this
    Code:
    #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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •