6

I just converted a site to Blueprint CSS today, and suddenly all my hyperlinks are showing their URL's in brackets, e.g.

This hyperlink

<a href="Products/List.aspx">Read more</a>

Renders like this

Read More (Products/List.aspx)

I wonder if this might be related to one of the bundled plug-ins in Blueprint?

ADDED: The link renders normally, i.e. the unwanted url part is being generated client-side. Folks have asked for source code, so here it is (irrelevant text removed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/Blueprint/screen.css" rel="stylesheet" type="text/css" />
    <link href="Styles/Blueprint/print.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]><link rel="stylesheet" href="Styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
    <a href="Products/List.aspx">Read more</a>
</body>
</html>

SOLVED: By removing the 'print.css' sheet that all tutorials suggest including, I was able to solve the problem in this example and my whole site. I'm still very curious as to why the venerable 'print.css' is acting up like this.

ProfK
  • 49,207
  • 121
  • 399
  • 775
  • highly unlikely that this is related to blueprint, namely as css can't add characters in that manner. – Ross Nov 23 '10 at 16:39
  • FYI: You can save us a lot of time by just providing the source code. – meder omuraliev Nov 23 '10 at 16:40
  • @meder, no source code I can provide has anything to do with this. Although my previous example was data based, it's the same with hard coded tags, as reflected in my new example. – ProfK Nov 23 '10 at 17:24
  • Please show the generated source code in the browser. Also, does blueprint bring any Javascript modules? This could be a Javascript based extension adding the href to the visible text – Pekka Nov 23 '10 at 17:28
  • @ProfK - showing us a hyperlink is pretty much useless without showing us the code to the page. That is, unless Ms Cleo is on Stackoverflow. – meder omuraliev Nov 23 '10 at 17:32
  • OK, @meder, this is 'textbook' source code, i.e. all the tutorials show this, and it still exhibits the problem. I found what is wrong, but by finding a ruby question on some site unrelated to Blueprint. I'll post the solution in a minute, I just want to see how relevant the source code is. :-) – ProfK Nov 23 '10 at 17:43
  • You have yet to show us what the unwanted part is. We basically have no context of the problem, and you want us to solve it. I suggest in the future you provide screenshots and absolute links to working demos of the issue to save everyone time. – meder omuraliev Nov 23 '10 at 17:44
  • The above code exhibits the problem. That is what makes the unwanted part 'unwanted'. See my solution above. – ProfK Nov 23 '10 at 17:51
  • Was the issue just blueprint generating `:after { content:"("`, etc? That's the only reason I can think of. – meder omuraliev Nov 23 '10 at 17:53
  • @Ross, that's not correct. See Larsenal's answer... – Zack The Human Nov 24 '10 at 16:48

1 Answers1

12

It's likely you have something like this in your CSS:

a:link:after { content:" (" attr(href) ") "; }

That will produce the behavior you describe.

Typically, you would only use this kind of style for the print version of your stylesheet.

Larsenal
  • 49,878
  • 43
  • 152
  • 220
  • Thanks. That might be what was in the print.css sheet; when I took it out the problem cleared up. – ProfK Nov 23 '10 at 18:05
  • 2
    The `` for your `print.css` should be set to `media="print"` .. The HTML you posted shows that it was defaulting to `media="screen"`, which would make all of those "for printing only" styles to apply to your browser display. – drudge Nov 23 '10 at 18:44
  • Thank you @jnpcl. I've never even looked at the media attribute because I've always always coded purely for screen, i.e. intranet LOB apps. – ProfK Nov 23 '10 at 19:18
  • @ProfK: If you ever have a page that you expect users to print, it's good to provide a `print.css` to remove unnecessary colors/backgrounds/etc. – drudge Nov 23 '10 at 19:54
  • @jnpcl, why not post your answer as an answer, so that I can accept it? – ProfK Nov 24 '10 at 03:53
  • @ProfK: Because the answer that my comment was placed under is the answer you should accept. :) – drudge Nov 24 '10 at 17:58