Login/Register
Hyperlinks showing URL with Blueprint
Asked Answered
Solved cssblueprint-css
B

1

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.

Brucebrucellosis answered 23/11, 2010 at 16:37 Comment(10)
highly unlikely that this is related to blueprint, namely as css can't add characters in that manner. – Sempiternal
FYI: You can save us a lot of time by just providing the source code. – Funky
@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 <a> tags, as reflected in my new example. – Brucebrucellosis
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 – Oriflamme
@Brucebrucellosis - showing us a hyperlink is pretty much useless without showing us the code to the page. That is, unless Ms Cleo is on Stackoverflow. – Funky
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. :-) – Brucebrucellosis
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. – Funky
The above code exhibits the problem. That is what makes the unwanted part 'unwanted'. See my solution above. – Brucebrucellosis
Was the issue just blueprint generating :after { content:"(", etc? That's the only reason I can think of. – Funky
@Ross, that's not correct. See Larsenal's answer... – Belva
K
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.

Kauffmann answered 23/11, 2010 at 17:48 Comment(6)
Thanks. That might be what was in the print.css sheet; when I took it out the problem cleared up. – Brucebrucellosis
The <link> 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. – Metathesize
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. – Brucebrucellosis
@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. – Metathesize
@jnpcl, why not post your answer as an answer, so that I can accept it? – Brucebrucellosis
@ProfK: Because the answer that my comment was placed under is the answer you should accept. :) – Metathesize

© 2022 - 2024 — McMap. All rights reserved.