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.
Related
Not sure if I'm doing something wrong here or whether this indeed is a Chrome rendering bug.
Here is my very small example:
.hover-test span {
opacity: 0;
transition-property: opacity;
transition-duration: 1000ms;
}
.hover-test:hover span {
opacity: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<button class="hover-test">hover me<span>hidden</span></button>
</body>
</html>
It works in all browsers I checked like expected.
It does work in Chrome as well, when I put the CSS in a style tag directly in the HTML file.
It does NOT work in Chrome (91.0.4472.101), when I put the CSS in a separate file and include it with a link tag.
With "not working" I mean, that on page load the span is shown and then faded out, without the mouse cursor being near the button.
Is this a Chrome bug, or am I doing something wrong here?
How can I achieve the desired behaviour in Chrome, which is: span is hidden on page load and only shown/hidden on hover?
It looks like it is a Chrome bug,as written here: https://www.hawkbydesign.com/weird-google-chrome-css-transition-on-load-bug/
Well, after making some further updates and refreshing the page, I noticed that the transition was firing on page load. What I mean by this is instead of being hidden on page load, as they should be, the elements were visible and would transition to their hidden state.
this is exactly the problem reported.
More:
The bug happens whenever you don’t have any script tags on the page, apparently. For whatever reason, this causes css transitions to trigger upon page load. While I was also digging, it appears that this happens sometimes with the form tag as well. What a weird bug!
The solution is to include a script tag in your page. Whenever I found the solution, they said to include a space in the script tag, but I found that it works fine even without the space.
I actually added jQuery on the page using the CDN link and the bug seems gone.
You appear to be bumping up against a timing problem.
Try this code with your styles file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="style.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<script>
function insert() {
document.body.innerHTML = '<button class="hover-test">hover me<span>hidden</span></button>';
}
window.onload = insert;
</script>
</body>
</html>
This waits for loading before putting the button in the document and on Chrome (and Edge) on Windows10 at least all is well.
Chrome/Edge seem to differ from say Firefox in whether loading is synchronous or not - or maybe it's just a lot faster writing the document.
Is it possible to use different css selector for IE(any version of ie) and chrome? Its a normal top property which appears differently in both browser and needs to explicitly adjusted according to the browser
You cannot do this in CSS alone. You need what are called "conditional comments" like the following:
<!--[if IE 8]>
<p>This is IE 8</p>
<![endif]-->
These are added to your HTML and can be used in many ways. Two primary ways that I have used them are:
To link to a wholly different CSS style sheet
To change the class on the <html> or some other parent tag and use CSS rules to select any children of it
I realize that second description may sound a bit complex but it's actually pretty simple so here's an example:
<!DOCTYPE HTML>
<!--[if IE 8]>
<html lang="en-US" class="ie8">
<![endif]-->
<![if !IE]>
<html lang="en-US">
<![endif]>
...
<body>
<div class="someClass"></div>
</body>
...
Then, in your CSS, use a selector like: .ie8 .someClass
Welcome to the club! Anyways, although you can try to set browser specific css on elements, actually you cannot guarantee that it'll work exactly like you aimed. Because it depends on how those browsers handles these css classes, and there is nothing you can do about that. You may try to set different css classes for IE like this:
<!--[if lt IE 9]>
<html class="ie">
<![endif]-->
<!--[if (!IE) | (IE 9)]><!-->
<html>
<!--<![endif]-->
Notice that these are actually comment lines, but ie reads these lines and set the user-defined css class "ie" to html element (you may notice that Chrome and Firefox ignores these statements). you can then use this css, for example;
html.ie div{
top: 0;
}
It's really annoying to deal with these cross-browser ie bs, I know. hope this helps
What you want to achieve?
If you want to compensate browsers all differences you can use for eg. modernizr
If you want to add special css file for IE you can use Conditional comments They look like this:
< !--[if IE 9]>
< link rel="stylesheet" type="text/css" th:href="ie9.csss"/>
< ![endif]-->"
If you want to fix something in css selector you can use hack(HACK! means not recommended, avoid but if you really have to and you have gun next to your head etc...) which will make properties or css class understandable only for specific browser (google this there is to many of them) eg. http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
And last option learn CSS and find where you made mistake because probably some element is diffrent size and that caused 1-2 px difference with position top
My tutorial site works fine on google chrome but when i try to open it with any kind of internet explorer i can not see some part of visul items.
All information of my design exist in css file. However being gray of right part can be observed but on the other hand i can't see navigation bar.
I put my some codes. It is high possible to have any link between these code and this situation.
At the beginning:
<!-- InstanceBegin template="/Templates/tempPage00.dwt" codeOutsideHTMLIsLocked="false" --><!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<html>
<title>Tutorials</title>
...
<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
For more you can check: http://www.soccerforecast.com/Tutorials/SFUnderCons/currentForecasts.php
I don't have 10 reputation so i can't put direct image to this site so link is: http://postimage.org/image/y94bk7afb/
I don't usualy control my site with different kind of browser, now i recommend to do this everyday. Now i don't have any idea which code make this situation. :)
Yout HTML is a little messed up.
Fix these things and it might help:
Place your HTML tag before the HEAD tag but after the DOCTYPE tag.
Place a closing HTML tag at the very end of your document.
In the TABLE you have towards the end of your page you have an extra closing TR tag.
The comment before your DOCTYPE will possibly cause problems too.
Try running your site through a validator to check for errors like these.
HTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/
It's because you have a comment before your doctype declaration.
This is forcing the page into quirks mode if you remove that comment you should be ok.
<!-- InstanceBegin template="/Templates/tempPage00.dwt" codeOutsideHTMLIsLocked="false" -->
<!doctype html>
<head>
Edit... The head and html tags are the wrong way round also.
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.
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