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.
Related
I have a simple html page using font awesome css. Can anyone see why my font awesome check mark is not displaying, I cannot get the check mark to display and I cannot seem to figure out why.
I am using the .min.css link in my <Head> as such:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LoopLAB Theme</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
When I want to inject it into a <i> element in the DOM, I simply use this:
<i class="fa fa-check"></i>
As you can see above, the check mark does not display. Do you see anything obvious that I am doing wrong? This seems like a beginner's error but I can't find the problem.
Check your CSS. There are a few ways you can do that!
Simply check if font-awesome.min.css is indeed under your CSS folder. If it is, check your folder structure. Can your HTML access this folder using css/font-awesome.min.css? The CSS folder must be a child from the folder you are currently storing your HTML file. Finally, are you using the latest version of font-awesome-min.css? This specific icon might not be included in your CSS file if it's an older version.
Inspect your site using your favorite browser inspect tool and locate your CSS file on inside the inspector. Clicking on it should open your CSS code. The code should be minified. If there is nothing inside of it or some kind of error your website is failing to find your file on your server or computer.
Plus you can also add from a CDN, for example, https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css and import directly to your code.
This page doesn't get the table styles from the style sheet. If I put the same styles in the page itself, they are applied. What could cause this? The css file name is correct and is read by other pages.
<!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>Pagelinks | Known Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="pagelinks_windows.css" />
<!-- style>
#known_issues th, #known_issues td {
font-size: 13px;
text-align: left;
}
</style -->
</head>
<body>
<h1>Known Issues</h1>
<p>
Known bugs and issues are listed here.</p>
<table id="known_issues">
<tr><th>Tracking No.</th><th>Category</th><th>Description</th><th>Status</th><th>Workaround</th></tr>
<tr><td>plt001</td><td>Site</td><td>Site navigation broken on Internet Explorer 8</td><td>Closed</td><td>None. That browser version has a major bug involving javascript objects. Users must upgrade to Internet Explorer 9.</td></tr>
<tr><td>plt002</td><td>Site</td><td>Saints and feasts do now show description</td><td>Open</td><td>None. The description data for the Saints and the feasts is being compiled.</td></tr>
</table>
<br/>
<br/>
Test if the content of the css file is visible.
Try to open it in the browser.
Common possible error when letters-case (A\a and so on) in file-names differs - this willn't work on *nix hosting servers, ever if it worked localy on windows.
Another common situation: when is error in path to file from current file-directory.
Are your stylesheets in the same root directory as this html file? Common practice is to put stylesheets, js, includes, etc into different directories. Perhaps you follow this convention and simply forgot href="css/pagelinks_windows.css"? Hard to find the answer to your problem without much more information but it's usually something small you're missing. One of those that you end up with a forehead-slap once you find it :)
What does your stylesheet look like?
I think you might have some conflicting css, try adding your table style at the VERY bottom of pagelinks_windows.css
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.
I want to fit my website in IE .I want to know how i give the name of css selector in IE like firefox.Please help me!
i did'nt undersatnd your question "name of css selector in IE",but if you have to assign the css on selector p use like (<p>hello everyone</p>) this
p {
border:1px solid red;
font-size:24px;
}
always call your ie css file AFTER any other css so it overwrites any previous methods.
if you're still having problems, you can force a css definition to take priority with !important.
Without important, the div background would be blue, because that's the last declaration made
#mydiv{
background-color:green;
}
#mydiv{
background-color:blue;
}
now, using !important, you can force priority. the background will be green regardless of the order of declaration:
#mydiv{
background-color:green !important;
}
#mydiv{
background-color:blue;
}
if you're looking for css hacks for IE (not recommended, though sometimes essential), you can get more information from this excellent article.
hope this helps!
There is nothing wrong with the CSS code that you have shown so far, so repeating it in a style sheet specific for IE will not make any difference at all.
Generally you don't need a separate style sheet for IE. There are some rendering bugs in IE that you may have to circumvent, but that can almost always be done by tweaking the current CSS and HTML.
To find out what you need to do to make it work in IE, you should try to find the reasons for the differences. Most CSS is exactly the same, so if you don't see the effect in the page it's usually because the element is not where you think it is or doesn't have the size that you think it has. If for example the height of an element is zero, you will obviously not see it's background color.
First make sure that the page has a proper doctype, so that it doesn't render in quirks mode. This is important to make it work as close to the standards as possible in IE.
Open the error console in Firefox and view the page. It will tell you if you have any errors in the CSS code. There are standards for how to render correct code, but there is no standards for how to handle incorrect code, so if you have any errors you will get widely different results between browsers.
The plugin FireBug in Firefox is useful for seeing exactly which styles affect each element in the page, and you can even edit the CSS and see the result immediately. There is a similar tool built into IE 8 called Developer Tools. For IE 7 you can install Developer Toolbar that gives you some of this functionality. Each tool will allow you to select an element in the code and shows you exactly where it is on the page.
To fix your website in firefox and IE you can use the below methods.
Method 1:
You can use the "if condition" that you have used. You need to mention the version of IE in the if statement. See the code below
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser Detection Example</title>
<style type="text/css">
body{ background:blue}
</style>
<!--[if IE 6]> <!-- for ie 6 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
<!--[if IE 7]> <!-- for ie 7 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
</head>
<body>
</body>
</html>
Method 2:
You can use the css hack inside the css code itself. No need to use a separate css file. You can code in the same css. See the example below
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{ background:blue; _background:orange;}
</style>
</head>
<body>
</body>
</html>
Note : prefix "_" before the css code it will get render in ie6...
Check out !!!
regards,
Logesh Paul
I have an XHTML strict page that has an invisible div that is controlled by Javascript. The div is set to transparent and visible by the script and a mouseover event to make the div opaque on hover.
When someone using a browser (or firefox with noscript) without javascript the div simply remains invisible. The problem with this is that I do not want the content to be inaccessible. I also do not want to leave the div visible then use the script to make it transparent as the div is located at the bottom of the document and it causes a noticeable flicker whenever a page loads.
I have tried using noscript tags to embed an additional style sheet that is only loaded for people without the luxury of Javascript but this fails the XHTML strict validation. Is there any other way to include extra styling information inside a noscript block that is XHTML valid?
Ed:
With a simple test case I get a validation error of: document type does not allow element "style" here.
This is with an empty XHTML Strict document with a style element inside a noscript element. The noscript is inside the body.
noscript in head is valid HTML5. It wasn't valid before. I just tested it, it works in current Firefox, Safari, Chrome, Opera and IE.
<!doctype html>
<html>
<head>
<noscript>
<style>body{background:red}</style>
</noscript>
</head>
<body>
<p>is this red? it should <script>document.writeln("not");</script> be. <noscript>indeed.</noscript></p>
</body>
</html>
To clear up the validation issue: noscript is only allowed in the body element, style only allowed in the head. Therefore, the latter is not allowed within the former.
On the general issue: you'll want to make the div element visible by default, then hide it via CSS + javascript. This is the 'progressive enhancement' model. I notice you say you "don't want to do this because of the flicker", but I'm not sure exactly what's causing this - chances are you can fix it, so maybe you should post that as a question.
Note about my answer
I wrote this post after realizing it was dating from 2008
Since I had a similar problem, I thought continuing answering with a current answer.
My actual answer
Like Boby Jack said, style tag is not allowed in body. I myself did the exact thing as you (Joshua) about it. But Jack's "progressive enhancement" made me without non-abstract solution but then I realized a solution that I did not find answers on this thread.
It all depends of your styling structure.
My suggestion is to plainly use something like modernizr in the very begining of the head and use Paul Irish's HTML5Boilerplate recommendations.
Long story short
Html tag has a class attributes with no-js
Head tag includes a first modernizr javascript as the first
CSS has the element (.hide-me) with display:none on its proper place
Then .no-js .hide-me { display:block }
In detail
See Paul Irish's HTML5boilerplate, and adapt it to XHTML if you want :)
1. Html has a class attributes with .no-js
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
quoting from html5boilerplate.com
2. Head tag includes a first modernizr javascript as the first
Modernizr execution will build html attributes with what's supported.
Will build something similar to this:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">
Note this is from Google Chrome modernizr tests.
The first is js but if Modernizr did not run (no javascript) the no-js would stay there.
3. CSS has the element (.hide-me) with display:none on its proper place
... you know the rest :)
Use a script block in the head to add a style element with document.write:
<head>
...
<script type="text/javascript">
//<![CDATA[
document.write('<style type="text/css">.noscript{display:none}</style>');
//]]>
</script>
...
</head>
UPDATE for 2016:
From w3school:
Differences Between HTML 4.01 and HTML5
In HTML 4.01, <noscript> tag can only be used inside the <body>
element.
In HTML5, the <noscript> tag can be used both inside <head> and
<body>.
Differences Between HTML and XHTML
In XHTML, the <noscript> tag is not supported.
My solution for having expanded menus (lists, etc..)
I've put in the header like this
<header>
<noscript>
<link rel="stylesheet" href="assets/css/x_no_script.css">
</noscript>
</header>
In the x_no_script.css I set the selectors that I wanted to
max-height: 9999px;
overflow: visible;
In this way, I have expanded menus when JavaScript is disabled or not exists.
What validation error do you get? <noscript> should be allowed in XHTML but it's block level, so make sure it's not in a <p>, <span>, etc
In case XHTML is used, the trick is to use two CSS files. One global one and one js-one tweaking the global one for JavaScript-enabled browsers.
style.css:
.hidden {
visibility:hidden;
}
style-js.css:
.hidden {
visibility:visible;
}
test.html:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test page</title>
<link href='css/style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript">
//<![CDATA[
//document.write("<link href='css/style-js.css' rel='styleSheet' type='text/css' />");
//is not legal in XHTML, we do the long way:
var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
l.setAttribute("rel", "stylesheet");
l.setAttribute("type", "text/css");
l.setAttribute("href", "/css/style-js.css");
document.getElementsByTagName("head")[0].appendChild(l);
//]]>
</script>
</head>
<body>
<div class="hidden">
<p>Only displayed at JavaScript enabled browsers</p>
</div>
</body>
</html>
Main idea by tutorials.de. XHTML validity tip by Estelle Weyl's Blog. createElementNS tip by CodingForums.