ansaurus

Question

Right border not displaying on google chrome

Answer 1

+3 A:

I can't tell you the reason why this is happening, but I think I have a fix for you. You have spaces padding your link content, and apparently Chrome isn't handling this very well.

If you remove the extra spacing around the contents of the <a> tags, the problem disappears (I did this in the Chrome inspector tool). So, change:

<a href="pclark-hacker-news-karma"> 4,481 </a>

to:

<a href="pclark-hacker-news-karma">4,481</a>

Chrome must handle the space in an odd manner when dealing with a float (if you remove the float property on the search_data class, the border appears as well).

zombat 2010-01-17 20:39:25

Nice find, was staring at it and couldn't see that. I think it's related to .search_data being floated without specifying a width (add that and this also goes away).

Roger Pate 2010-01-17 20:47:27

Wow... am I doing something wrong (invalid, non-spec, non-standard, etc)? Is it a bug in chrome?

Paul Tarjan 2010-01-17 22:09:57

Answer 2

+3 A:

Test case: Included so this question still makes sense after the content at the given URL changes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html><head><style type="text/css">
div {
  float: left;
  clear: left;
  margin: 3px;
}
span {
  border: 1px solid;
}
</style></head><body>

<!-- does not show right border -->
<div><span>With trailing space, no width </span></div> 

<!-- does show right border -->
<div><span>No trailing space, no width</span></div>
<div style="width: 40ex;"><span>With trailing space, has width </span></div>
<div style="width: 40ex;"><span>No trailing space, has width</span></div>

</body></html>

Verified in Google Chrome 4.0.266.0 (Official Build 33992) with WebKit 532.6.

Roger Pate 2010-01-17 21:40:31

Yikes. Chrome bug? Did you file it?

Paul Tarjan 2010-01-17 22:12:57

https://bugs.webkit.org/show_bug.cgi?id=33858

Paul Tarjan 2010-01-19 20:56:57

Since it is a bug in webkit, how should I change my HTML to achieve the same effect, but avoiding the bug?

Paul Tarjan 2010-01-28 18:26:38

@Paul: What do you mean? I gave three different examples that show the right border.

Roger Pate 2010-01-28 18:44:38

ansaurus

tags:

views:

answers:

Right border not displaying on google chrome

related questions