ie7 link underlining alignment vs. superscripts

HTML & CSS
1

I am noticing a strange problem with IE7 which does not happen with IE7 (or rather it was pointed out to me by someone who is still using IE7).

http://www.sfmta.com/cms/mfares/indxfare.htm has a list of links near the bottom which, to enforce spacing between them in a case where one item, Clipper, has superscripts, all item have superscripts.

<li><a href="transfers.htm">Transfers</a><sup>&nbsp;</sup></li> 
<li><a href="Clipper.htm" title="Clipper stored value fare card">Clipper<sup>SM</sup></a></li>
<li><a href="MuniTickets.htm" title="Limited Use Muni Tickets">Muni Tickets</a><sup>&nbsp;</sup></li> 
<li><a href="tvm.htm" title="Muni Ticket Vending Machines (TVMs)">Vending Machines</a><sup>&nbsp;</sup></li> 
<li><a href="faregates.htm">Faregates</a><sup>&nbsp;</sup></li> 
<li><a href="pop.htm">Proof of Payment</a><sup>&nbsp;</sup></li> 
<li><a href="passports.htm">Visitor Passports</a><sup>&nbsp;</sup></li>

In this section, IE7 raises the underline slightly such that it clashes with the bottom of the text (that is, it intrudes into the x-height of the letters).

Compare that another page near the bottom where the <li> enclosing the link does not also enclose a <sup> tag.

<li><a href="schedules.htm">Schedules</a></li>
<li><a href="tripplan.htm">Trip Planner</a></li>

Any idea whether there is a way to make IE7 insert more distance between the underscore and the text bottom when there is a superscript within the <li> tag?

2

Hi,
In your IE7 stylesheet you are only giving a line-height of 1em to the LI.


[B]#bodytext[/B] [B]li[/B] {
    /* do not make less than 1em as IE7 will cut off the first letter */
    margin-left: 1em;
    padding-left: 1em;
    vertical-align: top !important;
    l[COLOR=Red]ine-height: 1em !important;[/COLOR]
    padding-bottom: 0.25em !important;
    max-width: none !important;
}

All other browsers are getting a line-height of 1.5 as a simple multiplier in screen4.css


#bodytext p, 
#bodytext ul, 
#bodytext ol,
[B]#bodytext li[/B],
#bodytext h1,
#bodytext h2,
#bodytext h3,
#bodytext h4,
#bodytext h5,
#bodytext h6,
#bodytext fieldset,
#bodytext blockquote,
#bodytext td {
    margin: 1em 1em 1em 0;
    max-width: 40em;
    [COLOR=Blue]line-height: 1.5;[/COLOR]
}

I would suggest removing that line-height you set for IE7, works for me :slight_smile:

This is also why I discourage the use of version specific stylesheets for IE with conditional comments. People often forget to edit the IE CSS when they make changes to the main CSS. If you must use an IE CSS then just target only the selectors that really need different rules.

Most of the time IE can be controlled via the main CSS once you get the hang of writing cross browser code.

3

Solved. I’ve removed the IE7-specific line height.

Actually, I hadn’t forgotten about the IE7 style sheet. I just never would have guessed that line height was the problem.

4

Thank you very much!

5

Actually, reaching deep into my memory, I think I added the line-height rule to the IE7-only style sheet in a vain attempt to work around the issue of mispositioned IE7 list bullets and wound up just leaving it there. The issue of the links on list items containing superscripts happened much more recently when I added list items containing superscripts, which involved doing something new in the HTML code, not the CSS.