Trying to move css to external css file

[Bayliss Trevor]

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

[Bayliss Trevor]

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

[vinpkl]

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

[Bayliss Trevor]

sorry, it should work now!

[kohoutek]

You need to remove the CSS within your HTML document head as well.

[Bayliss Trevor]

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&#37;;display:table;}
</style>
<![endif]-->
</style>
</head>

[kohoutek]

No, sorry, I meant your embedded styles in the head of your HTML document:

<style type="text/css">
html,body{height:100&#37;;}/*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.

[Paul O'B]

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" type="text/css" rel="stylesheet" />
<!--[if (lte IE 6)|(gte IE 8)]>
<link href="ie6and8.css" rel="stylesheet" media="all" type="text/css" />
<![endif]-->

[Bayliss Trevor]

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

[PicnicTutorials]

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/to...rating-system/

[Paul O'B]

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.

[PicnicTutorials]

That ie8 hack also targets ie7. I found one in my link above that only targets ie8.

[Paul O'B]

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

[Bayliss Trevor]

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.

[Bayliss Trevor]

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&#37;;/*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]-->

[RyanReese]

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]-->

[Paul O'B]

http://bit.ly/bPhoJi
What does the outer div code below acutally do? I don't even have a div called outer! Mabye it should be wrapper? Thanks:

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.

[Bayliss Trevor]

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!!

[RyanReese]

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

[Bayliss Trevor]

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&#37;;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

[RyanReese]

You still have a missing quote in the conditional commetn for IE8..

Either way, you deleted hte wrapper CSS that I wanted you to keep! The wrapper CSS should be as followed

#wrapper {
background-color:#FFFFFF;
margin:-52px auto 0;
min-height:100%;
overflow:hidden;
padding:0 10px;
text-align:left;
width:845px;
}

NOT this

#wrapper { 
padding: 0px 10px 10px 10px;   
margin: 0px auto; 
width: 845px; 
height: 100%; 
background-color: #fff; 
text-align: left
}

[RyanReese]

You also need to capitalize this file name
http://copywritecolombia.com/iestyles.css

That should be IEstyles.css

Please listen and follow what I say exactly because I hate being repetitive .

Then fix the missing quote here

<!--[if (lte IE 6)|(gte IE 8)]>
<link rel="stylesheet" href="IEstyles.css type="text/css" />
<![endif]-->

[Bayliss Trevor]

http://copywritecolombia.com/index3.html
OK Ryan I think that is all working now- I am going to put the one line of css from IEstyles.css back into the main page it seems a bit pointless having it there. Thanks

[Rayzur]

I am going to put the one line of css from IEstyles.css back into the main page it seems a bit pointless having it there.

You don't even need to use display:table; for IE8 anymore, if you will use the method that Paul gave in post#17 you can just add this to your css without needing any IE CC's.

#wrapper {
    background-color:#FFFFFF;
    margin:-52px auto 0;
    min-height:100%;
    overflow:hidden;
    padding:0 10px;
    text-align:left;
    width:845px;
}
* html #wrapper {height:100%;}/*IE6 min-height*/

#wrapper:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;/*fix IE8 min-height:100%  bug*/
    content:" ";
}

[PicnicTutorials]

Look what me and Krillz just worked out!!! Well, mainly just Krillz. Now that's a clean solution!