Hi all
I tried to move the css from on the page to my external css file but it doesn’t seem to work- why is that the conditional css? How can Ido it? Thank you http://bit.ly/bPhoJi
Hi all
I tried to move the css from on the page to my external css file but it doesn’t seem to work- why is that the conditional css? How can Ido it? Thank you http://bit.ly/bPhoJi
the url you have posted shows error
“The requested URL /index3.html was not found on this server.”
vineet
sorry, it should work now!
You need to remove the CSS within your HTML document head as well.
The conditional css? So move the conditional css inside the closing style tag? have it like this ?
<!–[if (lte IE 6)|(gte IE 8)]>
<style type=“text/css”>
#outer {height:100%;display:table;}
</style>
<![endif]–>
</style>
</head>
No, sorry, I meant your embedded styles in the head of your HTML document:
<style type="text/css">
html,body{height:100%;}/*Allow for 100% height*/
#wrapper
{
min-height:100%;/*Min-height instead to allow for expansion*/
height:auto;/*just remove the height you set*/
margin-top:-52px;/* -72px;total footer height*/
overflow:hidden;/*contain floats*/
padding-bottom:0;
}
* html #wrapper{height:100%;}/*IE6 min-height*/
#header
{
border-top:52px solid transparent;/* 72px;total footer height*/
overflow:hidden;/*contain floats*/
width:100%;/*IE6 contain floats*/
}
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
</style>
Since you’re using these in your external file, they no longer need to be embedded in your HTML document. 
EDIT: Hold on! You have not transferred all your CSS to your external CSS file. Please do that and make sure you don’t have your CSS rules spread in multiple places as that will likely cause unnecessary chaos and problems.
Your external CSS file works by the way.
Conditional comments are html and cannot go in a css file or within style tags.
Create a normal external css file with appropriate name for IE and then link to it from within the head as per normal files/
<link media="screen" href="[index5.css](http://www.sitepoint.com/forums/view-source:http://copywritecolombia.com/index5.css)" type="text/css" rel="stylesheet" />
<!--[if (lte IE 6)|(gte IE 8)]>
<link href="ie6and8.css" rel="stylesheet" media="all" type="text/css" />
<![endif]-->
Thanks for the answers, Paul what I don;t want is to have seperate css files but I suppose there is no getting around it. Surelt thebest solution is to get rid of the conditional stuff and just have proper css the first time round (ok i know conditonal css is ‘proper’ but if i could get rid of it it would stip this headache!) How do I do that? Thanks
If you don’t want a separate css file for IE then you could implement one of these methods…
http://www.visibilityinherit.com/code/target-ie.php
http://www.killersites.com/forums/topic/2962/php-to-detect-browser-and-operating-system/
You can’t target IE8 any other way (reliably) and would mean adding hacky code to existing clean mark up.
You could target IE6 with the star selector (* html .test{ect…}) but then you’d also need special rules for IE8 which may be unreliable and who knows what else they might affect and indeed you won’t remember what they are doing some down the road.
CCs are much easier and keep the hacky code out of the way. One extra stylesheet is neither here nor there and most sites have multiple stylesheets anyway.
That ie8 hack also targets ie7. I found one in my link above that only targets ie8.
Yes that one targets ie6 as well and you’d need to redefine ie6 and 7.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {background/*\\**/: red\\9}/* ie8 and under*/
* html p {background:blue}/* ie6*/
*+html p {background:green}/* ie7*/
</style>
</head>
<body>
<p>If this is blue then you are IE6</p>
<p>If this is all green then you are IE7</p>
<p>If this is all red then you are IE8</p>
</body>
</html>
Very messy and why CCs are better
Thank-you very much for the answers Paul and Eric, I was trying to stop another http request hence not having another css file to imporve load times but that is just a couple of milseconds I will have to sacrifice A lot to be working with in those answers so I’ll have a crack at implementing them.
http://bit.ly/bPhoJi
Hi I’ve been able to move all the css apart from the css for div wrapper. How can I rewrite this so it works on the external css?
What does the outer div code below acutally do? I don’t even have a div called outer! Mabye it should be wrapper? Thanks:
<style type=“text/css”>
#wrapper
{
min-height:100%;/Min-height instead to allow for expansion/
height:auto;/just remove the height you set/
margin-top:-52px;/* -72px;total footer height*/
overflow:hidden;/contain floats/
padding-bottom:0;
}</style>
<!–[if (lte IE 6)|(gte IE 8)]>
<style type=“text/css”>
#outer {height:100%;display:table;}
</style>
<![endif]–>
Place this code in an external CSS file called style.css (or whatever)
#wrapper
{
min-height:100%;/*Min-height instead to allow for expansion*/
height:auto;/*just remove the height you set*/
margin-top:-52px;/* -72px;total footer height*/
overflow:hidden;/*contain floats*/
padding-bottom:0;
}
Call it
<link rel=“stylesheet” href="style.css type=“text/css” />
Then for IE place this code in a styleshet called IEstyles.css
#outer {height:100%;display:table;}
Then use a CC to call it
<!--[if (lte IE 6)|(gte IE 8)]>
<link rel="stylesheet" href="IEstyles.css type="text/css" />
<![endif]-->
Looks like you copied my code incorrectly from somewhere
You can use this sticky footer version instead which doesn’t need another rule for Ie8 and all styles can be in one stylesheet as you wanted.
Hi Ryan I tried it but no luck :
http://bit.ly/bPhoJi
I have three css files now, my original index5.css, iestyles.css, outer.css
Shall I change the div name in the iestyles.css to wrapper? Sorry getting confused now!!
You forgot a quote here
<link rel="stylesheet" href="IEstyles.css type="text/css" />
After IEstyles.css. Even though if I go to the IEstyles.css on your site it is a 404 which means it isn’t there. It should have a file here with what I posted above.
I don’t see why you have all these sytlesheets.
Erase your #wrapper part from the index5.css and place hte s tyle.css contents into the index5.css
Lets do this one step at a time :).
[edit]
http://copywritecolombia.com/iestyles.css
File names are case sensitive. Make it IEstyles.css not iestyles.css[/edit]
OK please bear with me: Deleted style.css and transfered css to index5.css, got rid of style.css link on html page.
Then I changed the name of the div from iestyles.css to IEstyles.css and the name of the only div on that page from #outer to #wrapper {height:100%;display:table;}
This is the result: http://copywritecolombia.com/index3.html what is the next step to make the footer work again and get rid of the margin at the top? Thanks