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
Read more
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>
Read more
</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.
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.
Related
I am designing a site based a .NET software CMS solution that doesn't follow current best practices. It uses tables and a doctype of <!-- DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" -->. The software company doesn't let you edit .aspx files or js. They only let you edit the stylesheet and different modules, e.g. HTML module, weather module, slideshow module, etc.
Thus, IE always renders the site in quirks mode breaking the CSS. I do not have access to change the doctype or edit anything in <head></head>.
Is there a way to change the doctype without being able to access the code?
What I have to deal with:
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" -->
<html>
<head id="htmlHead"><title>
Welcome to xxx
</title>
<script type="text/javascript" language="JavaScript">
function stopError()
{
return true;
}
window.onerror = stopError;
</script>
<link href="xxx.css" rel="stylesheet" type="text/css" />
<meta name="ROBOTS" content="INDEX,NOFOLLOW" />
<link href="xxx/favicon.ico" rel="SHORTCUT ICON" />
<style id="spMenuStyle"></style>
<link id="ApplicationRoot" rel="AppRoot" href="/xxx/" /><script type="text/javascript" src="/xxx/scripts/Utility.js">
</script>
<script type="text/javascript" language="javascript" sr="cxxx/BlockIFrame.js">
</script>
<link href="/xxx/WebResource.axd?d=9IeP9KvvsN3Ik1tvDsOJspkYjKE_KnZBT8bvXX7faYYRqxbjgHhLZKgtKfFSoL4-itgpmZrgTG68lyrA-SRm95xnEdLdUHa4j1nbnB_xoc_0zNWbtGMRDJOai6Kgu4UI0Dg5lw2&t=634950712700000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />
</head>
If you're able to inject your own JavaScript you might be able to inject the X-UA-Compatible meta tag.
This code will inject the meta tag and force IE to run in edge mode, which means IE will treat it as standards mode:
var meta = document.createElement('meta');
meta.setAttribute('http-equiv', 'x-ua-compatible');
meta.setAttribute('content', 'IE=edge');
document.getElementsByTagName('head')[0].appendChild(meta);
You can learn about the meta tag here.
I am trying to link a css i created in eclipse to the jsp and when i run the project i get no results in my browser. I've tried it in multiple ways, by putting
<link rel="stylesheet" href="css/first.css" type="text/css">
<link rel="stylesheet" href="boe/WebContent/first.css" type="text/css">
<link rel="stylesheet" href="(my full path to the file)" type="text/css">
I've tried so much that i don't remember how i got it to not error out. i am getting this
Tag (link) should be an empty-element tag.
as the caution error.
i can not find any step by steps on creating the css and making it link to the jsp, so it can show up in my browser.
here is my code for both the jsp and the css.
jsp:
<?xml version="1.0" encoding="UTF-8" ?>
<%# page import="java.util.*" language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<link rel="stylesheet" href="css/first.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TestPage - Test1</title>
</head>
<body>
<div id="page-container">Hello World</div>
<%Date d = new Date(session.getLastAccessedTime());%>
this page was last viewed <%= d.toString() %>
</body>
</html>
css:
#CHARSET "UTF-8";
html, body {
margin:0;
padding:0;
}
#page-container {
width: 760px;
margin: auto;
background: red;
}
any help on finding a step by step or if you have a good explanation, it would be much appreciated. Thank you
Tag (link) should be an empty-element tag.
This error message is telling you that your link tag needs a closing slash:
<link rel="stylesheet" href="css/first.css" type="text/css" /> <-- see the closing '/'
If that doesn't fix it, my guess is that your path is not quite right.
I changed in the
<head>
<link rel="stylesheet" href="css/first.css" type="text/css">
to
<head>
<style type="text/css">
<%#include file="css/first.css" %></style>
</head>
and in my eclipse project explorer under the "WebContent" file i added a folder named "CSS" and moved first.css to that folder.
Although from what i read, this is a very inefficient way of linking it because it imports the entire css.
In the above code replace 'css' with the full path of the css file
u can get the full path by right click on .css file -> properties->location
copy that and paste in above code in place of 'css'
I've just begun to use Aptana Studio 3. I used Aptana 2 in school and it worked fine. However in Studio 3, I can't get my external css to link to my XHTML document. I've tried using absolute path, the commented part of the code. With HTML traditional doc type the css links to the document just fine. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>We Rent Checkers</title>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Owner\My Documents\Aptana Studio 3
Workspace\We Rent Checkers\rent_checkers.css" media="screen" charset="UTF-8" />
<!--<style type="text/css" media="screen">
#import url(rent_rheckers.css);
</style> -->
</head>
try to point to your CSS, where it is located relative to your XHTML, if they are in the same folder:
<link rel="stylesheet" type="text/css" href="rent_checkers.css" media="screen" charset="UTF-8" />
never use a file location like c:\
if it is in a folder (like 'css') next to your XHTML:
<link rel="stylesheet" type="text/css" href="css/rent_checkers.css" media="screen" charset="UTF-8" />
before doing that, go to the folder where your html file is located, then create folder with name "css" in same folder. this is how people link external file with each other. you don't need to give exact path/complete path of file. Relevant path works better, as it works when you upload it on online server, reply for more question and clarification.
I have written a new website template. All works fine but there is one problem:
IE8 and lower don't load my stylesheet. I have no idea why.
I have tried it on multiple computers to eliminate the possibility of cache-problems or something like that.
The stylesheet is written with SASS (http://sass-lang.com/). But I think, this isn't the problem because I've made some other websites with SASS and everything works fine.
//EDIT:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>***</title>
<link rel="stylesheet" type="text/css" href="/styles/screen.css" />
</head>
<body>
</body>
</html>
You are using <section> elements that are new and IE8 doesn't know about by default. And because it doesn't know about them they are treated sort of like a span except you can't style them either using CSS.
The trick is to create the element before the page is is loaded and the browser can style them. The easiest way is to use something like html5shim. Just make sure to add the following code to your head section as it needs to run before the HTML starts rendering:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Some problem in your path I guess..
Possibility 1 :
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
Possibility 2 :
<link rel="stylesheet" type="text/css" href="../styles/screen.css" media="screen" />
I looked around and decided to use a CSS approach rather than rely on JS... I figure the kind of corporate users stuck with IE6 might also have JS disabled by IT departments.
So In my HTML I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->
</head>
<body>
<img src="media/logo.png"/>
</body>
Then my ie6.css consists simply of:
img
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
However none of this makes the slightest difference, no transparency. I commented out all the rest of the page so it is literally that one and still no luck. I removed the default.css stylesheet and still no difference.
EDIT:
I now got it working, using the .htc method, loading that file in a conditional IE6 test block. It turned out the problem I was having was that Windows 7 had 'locked' the file (I don't even know what this means) and this blocked IE from loading/using it.
If I'm not mistaken, you must use
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png')
for every and each image, you can't make it just work for all images.
I am using the solution of following page: IE PNG support
Following the online demonstration online demonstration step by step, your pngs will be transparent also in IE.
In the HTML page you have the path to the image relative to the HTML file (media/logo.png) in the default.css you have an entry with behavior: url(iepngfix.htc); (path to the iepngfix.htc is relative to the HTML file) and in the ie6.css you have an entry with filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='media/logo.png', sizingMethod='scale'); with the path to the image relative to the CSS file. And at least you need to change the path in the iepngfix.htc (IEPNGFix.blankImg = 'media/blank.gif';)
You need to have following folder structure:
HTML file
iepngfix.htc
ie6.css
default.css
/media/logo.png
/media/blank.gif
You would probably like to take a look at http://www.dillerdesign.com/experiment/DD_belatedPNG/
It also allows you to use pngs with alpha-channel with CSS background-position property, which you can't usually, when using AlphaImageLoader.