Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
"Eric Meyer's Strengthening the links" alternative fix
Hi all,
I was looking the Eric Meyer’s Strenghtening the links at Listamatic. It’s a CSS-styled vertical menu.
The browser support chart shows that this technique isnt supported by IE6 and IE5. In IE6, there is a `_big_ gap between each “a” in the menu.
So, there is also a IE HACK for Eric Meyer’s Strengthening the links that uses those hacks like <code>\width: 160px; w\idth: 158px;</code> that I really dont like to use and that I avoid instantly when I see them.
So, going back to the original technique (the first link in this post), and while trying to avoid any kind of hack, I have found that a simple <code>height: 1em;</code> applied in the stylesheet to the “a” element seems to be valid solution for IE6/WinXP (I dont know if it works for IE 5.0, but I have left that one behind).
What I think it’s weird is that Eric Meyer didnt arrived to this ¿solution? when developing the original vertical menu. And I would bet that I’m not the first one noticing that a simple <code>height: 1em;</code> would fix the gap in IE6.
So, I’m starting to think that ¿my? fix (i dont think it’s mine) should have a terrible secret, an horrible side that I didnt figure out yet.
I’m scared when I found a simple fix for something that the CSS beasts didnt suggested (in this case, Eric Meyer) and that really freaks me out.
So, drop some light on me, if I’m doing a big mistake in this one.
Thanks,
ps: sorry if you see this cross-posted in another CSS forums/list, like CCS-d.
Last edited by maniqui (2005-11-01 15:26:49)
Offline
Re: "Eric Meyer's Strengthening the links" alternative fix
When using an unordered list with block displayed <code><a></code> tags, by simply setting a width to the <code><li></code> tags, I’ve found that it almost always fixes that height displacement issue.
Also of note, if you form your list like this…
<code>
<ul><li><a href=”“>something</a></li><li><a href=”“>another thing</a></li></ul>
</code>
with no whitespace in the code, IE plays nice with the design… (crazy IE)
Offline
Re: "Eric Meyer's Strengthening the links" alternative fix
Thanks for replying, paularms
<blockquote><code><ul><li><a href=”“>something</a></li><li><a href=”“>another thing</a></li></ul></code>
with no whitespace in the code, IE plays nice with the design… (crazy IE)</blockquote>
This is something nice to know. Crazy IE.
I have also found this article at Andy Budd’s blog.
It is a similar workaround, that it seems to work also in IE5.
He added <code>display:inline</code> to the “li” element.
Offline
Re: "Eric Meyer's Strengthening the links" alternative fix
ew… by having an inline element, all items inside of that element should also be <code>display:inline</code>
Offline
Re: "Eric Meyer's Strengthening the links" alternative fix
<blockquote>ew… by having an inline element, all items inside of that element should also be display:inline</blockquote>
I dont know if I understood what you mean.
Applying <code>display:inline;</code> to <code><li></code> element is overrided by setting <code>display:block</code> to the <code>a</code> element (or am I wrong?).
So, it is:
<code>
#menu li {
display: inline;
}</code>
<br />
<code>
#menu li a {
display: block;
height: 1em:
}
</code>
Last edited by maniqui (2005-11-01 16:52:48)
Offline