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.

CommentFileSizeAuthor
#1 interactive_media_ff_shot.png70.65 KBckoester@drupal.org
#1 interactive_media_ie_shot.png62.28 KBckoester@drupal.org

Comments

ckoester@drupal.org’s picture

ckoester@drupal.org commented
Assigned: hswong3i » ckoester@drupal.org
StatusFileSize
new interactive_media_ie_shot.png62.28 KB
new interactive_media_ff_shot.png70.65 KB

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.

hswong3i’s picture

hswong3i commented

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.

hswong3i’s picture

hswong3i commented

Any else update? Or I will set this issue as won't fix if have no optimal solution better than existing implementation :-)

hswong3i’s picture

hswong3i commented
Assigned: ckoester@drupal.org » hswong3i
Status: Active » Closed (won't fix)

Assume as won't fix since no more feedback for improve the existing implementation.