Vertical align headache

How inheriting font sizes and line heights makes it difficult

[thesheep]

At the top of a page I have a horizontal list of links, 3 of which are links to resize the text for accessibility reasons. These links consist of 3 different sized letter 'A's.

Now, it seems to be quite difficult to line everything up vertically, and I think it's maybe due to my lack of understanding about how line-height and font-size interact and are inherited. Any help appreciated.

The markup looks like this:

<ul id="topnav">
<li><a href="help.html">Help</a></li>
<li><a href="about.html">About</a></li>
<li id="resize">
<a href="#" id="smalltext"><span>A</span></a>
<a href="#" id="mediumtext"><span>A</span></a>
<a href="#" id="largetext"><span>A</span></a>
</li>
</ul>

At first I tried to be clever and have another nested OL inside this list for the 3 resizing links, but anyway, that made things even worse. My CSS is like this:

#topnav {
float: right;
}
#topnav li {
float: right;
padding: 0 0.4em;
  line-height: 1.5em;
}
#topnav a {
display: inline;
  vertical-align: bottom;
}
#topnav li#resize a {
display: block;
  width: 1.1em; 
  float: left;
text-align: center;
  height: 1.5em;
  line-height: 1.5em;
}
#topnav li#resize span {
  vertical-align: bottom;
}
#smalltext span { font-size: 80%; }
#largetext span { font-size: 120%; }

The idea is that the line-height of all the LIs should be the same, and that any inline child elements should all be 'vertical-align: bottom', which should make everything line up vertically. But it doesn't. What's more, it behaves differently in IE from FF. In IE, in particular, the 3 As are all over the place.

As far as I understand, the line-height of each SPAN is unaffected by the font-size because it's fixed in ems. Maybe it's just too much to expect to make all this work when floats are involved?

[SuzyUK]

As far as I understand, the line-height of each SPAN is unaffected by the font-size because it's fixed in ems.

that's just it, it's not unaffected, line-height is inherited so the span is inheriting the 1.5em value for their line height however 1.5em (150%) of 120% is not the same as 1.5em (150%) of 80%.

em's aren't 'fixed' they're relative - 1em is the width of a Capital letter 'M' at your chosen font size and family.

..maybe linked graphics with the font-size as alt text be?

Suzy

[thesheep]

Yes, thanks I see what you're saying.

But I also tried it with

line-height: 1.5;

(without the ems) and it still messed up, which I think should not cause a value to be inherited?

Anyway, in the end I went back to using a P tag instead and putting everything inline... I know it's a bit of a shame but sometimes there's just no time!

Thanks.