Primary links a:first-letter looks buggy in IE6/7
hswong3i - July 1, 2008 - 04:10
| Project: | Interactive Media |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | hswong3i |
| Status: | won't fix |
Description
This is one of the minor bug in IE6/7... The first letter of primary links is style as below:
#primary-links ul li a:first-letter {
border-bottom: 1px dotted #4B5761;
padding: 0 0 3px;
}It looks fine in both Firefox2/3, Opera9.2/9.5 and Safari3; BTW, the color is not render correctly for IE6/7. From the report of Bugs in MSIE 7 for Windows and you may understand how helpless for fixing such minor bugs in layout for IE7... This bug is similar as http://www.cs.tut.fi/~jkorpela/test/border.html
I have no idea about how to fix it right now, and have no plan to fix it. Please feel free to contribute if you have some good solution.
#1
To give everyone a non-source-code-view of this problem, i've posted two screenshots. I'm helpless about that. "Interactive Media" would be a very nice theme - in a world without IE. So take a look.
#2
Thanks ckoester :)
On the other hand, I would like to quote the original design implementation as reference. The HTML code based as:
<ul id="nav"><li><a class="current" href="." accesskey="h"><span class="akey">H</span>ome</a></li>
<li><a href="#" accesskey="a"><span class="akey">A</span>bout</a></li>
<li><a href="#" accesskey="m"><span class="akey">M</span>edia</a></li>
<li><a href="#" accesskey="r"><span class="akey">R</span>eferences</a></li>
<li><a href="#" accesskey="c"><span class="akey">C</span>onsulting</a></li>
<li><a href="#" accesskey="t">Con<span class="akey">t</span>act</a></li>
</ul>
And for CSS:
/* main navigation */
#nav {
float:right;
border:none;
padding:0;
margin:47px 10px 60px 0;
}
#nav li {
float:left;
list-style:none;
margin:0 4px 0 0;
padding:0;
font-size:1.1em;
}
#nav li a {
display:block;
padding:10px 12px 15px;
color:#768998;
text-decoration:none;
border:0;
margin:0 1px 0 0;
}
#nav li a:hover,#nav li a.current {
background:url(../images/barbg.gif) no-repeat bottom center;
color:#fff;
}
.akey {
border-bottom:1px dotted #4B5761;
}
Therefore there is no problem for IE6/7 in original design: it is not using CSS first-letter, but wrapped with a special
<span>element. So yes, I change the original design.Should we rollback as original design? I don't really think so, since that is no point to make the primary link generation become too complicated. In case of Drupal, we may need to wrap the primary links with a theme function, trip the first letter, and wrap it with a special span class.
#3
Any else update? Or I will set this issue as won't fix if have no optimal solution better than existing implementation :-)
#4
Assume as won't fix since no more feedback for improve the existing implementation.