Trying to move css to external css file

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 :slight_smile:

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

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

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

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.

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

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

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

Looks good Eric:)

Thanks Paul! I’m pretty stoked on it. It’s so clean and seemingly as fullproof as cc’s. Doesn’t tarnish your HTML at all. And only ie gets a class on the body. This makes writing ie rules a total breeze. I’m going to see if I can put together the same ease with all browsers…

Thanks Eric and Rayzur. Eric it appears that the solution you kindly suggested is

It is overkill for serving IE an alternate style sheet. So, pick and choose what you need for your project.
so I’m going to implement what Rayzur and Paul suggested.

So to implement that I am going to:
1.Delete the IEstyles.css
2.Delete the conditional css code on the html page
3.Add this code to my only style sheet index5.css:

#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:" ";
}

How does that look? Thanks all!

Looks good from here :tup: and the sticky footer is in place :slight_smile:

Fantastic! Thank-you very much everyone!! CSS validates, html validates, I am going to do some testing cross browser but it is looking good! One last question please, the height of the divs inside the #wrapper div, do these divs have to be height 100% as well? When I start to put info in the divs then different pages will be different sizes so 100% will expand correclty I assume? http://copywritecolombia.com/index3.html

Since min-height is set on the wrapper, it will always put the footer at the bottom, however if you have a lot of content then the footer will be pushed down accordingly. You don’t need the inners to be 100% height :slight_smile:

Hi,
You don’t need the overflow:hidden on the #wrapper now either, it can cause problems in Opera. The #wrapper:after block will now serve as a float containment mechanism.

Sorry, I should have caught that in my last reply. :slight_smile:

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

[B]#wrapper:after[/B] {[COLOR=Blue]/*contain floats and fix ie8*/[/COLOR]
clear:both;
display:block;
height:1%;/*fix IE8 min-height:100% bug*/
content:" ";
} 

OK perfect, so I can set the divs inside the wrapper div to have % or px sizes depending on what I want?

Yes but realize that % heights need the parent to havea set height, and min-height doesn’t count as setting a height :).

Pixel heights are fine though you shouldn’t use them because on text size increase the content may be a greater height then the px height you specify. If you must try and specify in em units for content sections :slight_smile:

Hi,
You still need to remove the overflow:hidden on the #wrapper as per my last post.

Your sticky footer is broken in Opera due to the overflow:hidden. :wink:

Drag the browser window down by the bottom only and you will see the footer hang.

Thanks Rayzur I got rid of the overflow:hidden.

Thanks Ryan I understand what you mean with the ems instead of px heights, but I am unsure as to how to implement them. At present I have two divs with two background images which are the same height (441px) and for design reasons I want them to be showing completely:

http://copywritecolombia.com/index3.html

These two background images are nav.jpg in #leftnav and leftsmall.jpg in bonusinfo div. At present they are showing with 441px but I have been testing with lower values and the images are still appearing so it is vitally important that this is change to ems. How do I do that?
Thank you

You can set a min-height on the elements with the image (to match the image height). Youc an’t set a height and min-height because all you will get is the height :).

That way the image will still show and it will allow for more content/text resize :slight_smile: