SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to move css to external css file

    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

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    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

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, it should work now!

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You need to remove the CSS within your HTML document head as well.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    No, sorry, I meant your embedded styles in the head of your HTML document:

    Code:
    <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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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/

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

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    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/

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That ie8 hack also targets ie7. I found one in my link above that only targets ie8.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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.

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

  14. #14
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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]-->

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Place this code in an external CSS file called style.css (or whatever)
    Code:
    #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;
    }
    Call it
    <link rel="stylesheet" href="style.css type="text/css" />

    Then for IE place this code in a styleshet called IEstyles.css
    Code:
    #outer {height:100%;display:table;}
    Then use a CC to call it
    Code:
    <!--[if (lte IE 6)|(gte IE 8)]>
    <link rel="stylesheet" href="IEstyles.css type="text/css" />
    <![endif]-->
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    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.

  18. #18
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!
    Last edited by Bayliss Trevor; Feb 19, 2010 at 17:06. Reason: changed css name

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You forgot a quote here
    Code:
    <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
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  20. #20
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    #wrapper {
    background-color:#FFFFFF;
    margin:-52px auto 0;
    min-height:100&#37;;
    overflow:hidden;
    padding:0 10px;
    text-align:left;
    width:845px;
    }
    NOT this
    Code:
    #wrapper { 
    padding: 0px 10px 10px 10px;   
    margin: 0px auto; 
    width: 845px; 
    height: 100%; 
    background-color: #fff; 
    text-align: left
    }
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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]-->
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  23. #23
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  24. #24
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    #wrapper {
        background-color:#FFFFFF;
        margin:-52px auto 0;
        min-height:100&#37;;
        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:" ";
    }

  25. #25
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Look what me and Krillz just worked out!!! Well, mainly just Krillz. Now that's a clean solution!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •