CSS File Selection - html

I need the browser to download the appropriate script for the client browser.
I need some kind of switch statement that would work?
I have ;
(common.css) All browsers script need this file
(ie6.css) IE 6 script
(ie7.css) IE 7 script
(ie8.css) IE 8 script
(ie9.css) IE 9 script
(other.css) Mozilla + Firefox + Safari use the same for all versions
i have (but doesnt work)
<link rel="stylesheet" href="common.css" type="text/css" />
<!--[if IE 6 ]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<!--[elseif IE 7 ]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<!--[elseif IE 8 ]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<!--[elseif IE 9 ]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<!--[else]>
<link rel="stylesheet" href="other.css" type="text/css" />
<![endif]-->
Q. Ive hacked the above code from another file but cant get it to work?
If ive got it wrong, is there a better type of switch statement that can be used?

I'm fairly certain that you have to do each condition separately, and not in a switch statement
<link rel="stylesheet" href="common.css" type="text/css" />
<!--[if IE 6 ]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7 ]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
<!--[if IE 8 ]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<![endif]-->
<!--[if IE 9 ]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->
If not IE
<!--[if !IE]> -->
<link rel="stylesheet" href="other.css" type="text/css" />
<!-- <![endif]-->

<link rel="stylesheet" href="common.css" type="text/css" />
<!--[if IE 6 ]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7 ]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
<!--[if IE 8 ]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<![endif]-->
<!--[if IE 9 ]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" href="other.css" type="text/css" />
<!-- <![endif]-->

Related

W3 validation, last leg

I'm doing some w3 validation. I've done most of the work as I started with 40 reported issues, now is only 3.
This is the page I'm validating:
<?php
session_start();
ob_start();
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<html>
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Andrew's Webpage</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/css/layout.css">
<link rel="stylesheet" href="assets/css/navcss.css">
<link rel="stylesheet" href="assets/css/map.css">
<link rel="stylesheet" href="assets/css/about.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon- 114x114.png">
</head>
<body>
<div id= "background">
<div id = "main-head" class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Advanced Internet Development A </h1>
<h5>Andrew David Dunkerley</h5>
<h6> Login</h6>
<h6> Register</h6>
<h6> Cart</h6>
</div>
</div>
</div>
</body>
</html>
and these are the errors im getting. its probably something so simple but something i keep missing.
Error Line 10, Column 6: Stray start tag html.
<html>
Error Line 66, Column 36: Stray start tag div.
</html><div class="sixteen columns">
Error Line 66, Column 36: Cannot recover after last error. Any further errors will be ignored.
</html><div class="sixteen columns">
try this
<?php
session_start();
ob_start();
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Andrew's Webpage</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/css/layout.css">
<link rel="stylesheet" href="assets/css/navcss.css">
<link rel="stylesheet" href="assets/css/map.css">
<link rel="stylesheet" href="assets/css/about.css">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">
</head>
<body>
<div id= "background">
<div id = "main-head" class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Advanced Internet Development A </h1>
<h5>Andrew David Dunkerley</h5>
<h6> Login</h6>
<h6> Register</h6>
<h6> Cart</h6>
</div>
</div>
</div>
</body>
</html>

html - if prefix doesn't seem to work

I'd like to detect if the user uses IE or another browser. So just after
<!doctype html>
but before
<html lang="pl-PL">
I put this code:
<![if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<![endif]>
<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style-ie.css" />
<![endif]-->
But it doesn't seem to work. What am I doing wrong?
The <link> tag should be a child of the <head> tag.
<html lang="pl-PL">
<head>
<![if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<![endif]>

Conditional comments don't work

I have this code with conditional comments for IE7 and IE8:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/ui.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
<link href="css/ie8fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie7fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Stylesheets in conditional comments are not working. I tested this in IE Tester.
Actually, Microsost doesnt support Conditional comments any more. I was kind of stuck myself for a while, so I wrote an an article about it:
http://www.yofiel.com/writing/essays/microsoft-s-exit-strategy
IETester is based on an unsupported hack that has incorrect behaviors in some cases. Have you tried testing in a real browser? Microsoft provides the VMs for free at http://modern.ie.

Display style for Internet explorer 8 and versions below

I am trying to style my WordPress website to be displayed properly in Internet Explorer 8 and all versions below.
I have created a separate ie.css file but I am having problems styles to be read only when opened from IE.
In the head of my document I have included:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
When viewed from IE, the website is acting as this doesn't exist.
But when I insert this in to the head, all the styles appear in IE (that are meant for IE) but also in Chrome, Mozilla, etc..
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css" media="screen" />
Any advice?!
Try
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css">
<![endif]-->
or
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css">
<![endif]-->

Change in HEAD makes site not work correctly?

I've added new meta tags and a different title tag to the head of my document, which makes the IE code that redraws the black background not work.
Any idea what I have missed? I can't see anything in the new code which would be causing this to break?
Old correct working code:
<!-- saved from url=(0022)http://internet.e-mail -->
<!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>netball</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"> <!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 9]>
<link href="ie9.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE]>
<style type="text/css">
.black_overlay {position:absolute; top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px");}</style><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.simpletip-1.3.1.min.js"></script>
</head>
None working new code:
<!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>Netball - notice board</title>
<meta name="description" content="netball description to go here." />
<meta name="keywords" content="net, ball, netball, womens" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"> <!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 9]>
<link href="ie9.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE]>
<style type="text/css">
.black_overlay {position:absolute; top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px");}</style><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="jquery.simpletip-1.3.1.min.js"></script>
</head>
It looks like your link tags are malformed. Close them and you should be good.