CODEWITHSUNDEEP
cssgoogle-chromewebkit
AlfaTeK
AlfaTeK

Reputation: 7775

chrome css problem: border (right) around link not displayed

I have this small testcase: http://jsfiddle.net/sV8js/

You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.

Browsershots: http://browsershots.org/http://top3skills.com/1.html

Also "buggy" on Safari (so it's webkit related?)

Anyone knows what's the problem with this approach or how to solve this? (or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?

Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?

Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add
after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.

Upvotes: 1

Views: 3324

Answers (3)

Dan
Dan

Reputation: 10351

You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.

See updated link here http://jsfiddle.net/sV8js/12/

Dan

Upvotes: 2

stephenmurdoch
stephenmurdoch

Reputation: 34633

you need to add display: block to .referencesSkills

Upvotes: 0

Blender
Blender

Reputation: 298402

Try giving those links a display: inline-block or display: block property, as links are inline elements.

Upvotes: 1

Related Questions