SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    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)

    IE6 position fixed: Is this the best solution or no?

    Here is the best solution with the easiest amount of code to deal with that I have found. Is there a better way to do position fixed for IE6 for the nav? I like the limited amount of code but I don't like the javascript jump. Here is the page and code in question. I tried other pure css methods but I could not get them to work with my layout for some reason. Any suggestions? I put it in this thread because I would prefer to find a css method that works for me. Thanks

    PS. normally I don't like fixed navs and etc, but I think it works here.

    http://www.littleaboutalot.com/conte...man-speech.php

    #nav {
    position: fixed;
    top: 205px;
    left: 136px;
    width: 80px;
    border-top: #EEEEDF solid 3px;
    border-bottom: #EEEEDF solid 3px;
    }
    * html #nav {
    position: absolute; /* position fixed for IE6 */
    top: expression(188+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
    left: expression(36+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
    }

  2. #2
    SitePoint Zealot stikkybubble's Avatar
    Join Date
    Sep 2006
    Location
    Pluto
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't know you could do 'position fixed' in IE6.

  3. #3
    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)
    Yup! There are a couple ways to do it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You do realize that its broken in all browsers except IE

    Remember that position:fixed applies always from the viewport and not the nearest position ancestor. If you open and close your page the menu will stay exactly in the same place and overlap the content or move outside the area. It will never be in the right place unless by some freak chance we have our pages open at the same width that you have

    You need to do something like this instead.

    Code:
    #nav {
        position: absolute;
        top: 205px;
        left: 25px;
        width: 80px;
    }
    #nav ul{
        position:fixed;
        border-top:    #EEEEDF solid 3px;
        border-bottom: #EEEEDF solid 3px;
        width: 80px;
    }
    * html #nav { 
     position: absolute; /* position fixed for IE6 */
     top: expression(188+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
     left: expression(36+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
    }
    The nav is absolutely placed into position so that it occupies the correct position relative to the wrapper. You then apply position fixed without co-ordinates which means that they are auto and will just stay wherever inside the absolute element even though it has been moved with the rest of the page.

    I'll show a CSS method for IE in the next post although The css methods are a bit hacky but they won't jump.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Because your page is centred then it becomes too complicated a method to use for IE so I would advise against using this but I'll show it anyway

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>LITTLEABOUTALOT.com</title>
    <link href="../styles.css" rel="stylesheet" type="text/css" media="all">
    <link href="../print.css" rel="stylesheet" type="text/css" media="print">
    <style>
    /* ----------------------------------------------------
    Screen Stylesheet for http://www.littleaboutalot.com
    
    Updated: 03/20/08
    author: Eric Watson
    website: http://www.discountsitedesign.com
    ------------------------------------------------------- 
    : Site Colors : 
    Tan ..... #F1F1E4;
    Tan2 .... #EEEEDF;
    White ... #FEFEF8; 
    Black ... #333333;
    
    : Table Of Contents :
    Resets
    Defaults
    Typography
    Layout
    Links
    Menus
    Global Classes
    Content
    ---------------------------------------------------- */
    
    /* -------------------- Resets --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
        margin: 0;
        padding: 0; 
    }
    fieldset, table {
        border: none;
    }
    a {
        outline: 0;
        }
    /* --------------- Document Defaults -------------- */
    html {
        font-size: 100.01&#37;;
        height: 100%;
    }
    body {
        margin: 0 auto;
        height: 100%;
        font: 62.5%/1 "Times New Roman", Times, serif;
        background-color: #FEFEF8;
        color: #333;
    }
    /* ------------------ Typography ------------------- */
    h1 {
        font-size: 1.2em;
        text-align: center;
        padding: 23px 0 33px;
        letter-spacing: 1.5px;
        font-weight: normal;
    }
            .small { 
            font-size: 1.2em; 
            }
            .medium { 
            font-size: 2em;
            }
            .large { 
            font-size: 2.8em;
            }
    h2 {
        font-size: 1.6em;
        text-align: center;
        margin: 0 0 1em;
    }
    h3, h4 {
        font-size: 1.2em;
        margin: 0;
    }
    h5 {
        font-size: 1.2em;
        font-weight: normal;
        margin: 0 0 1em;
        }
    p { 
        font-size: 1.2em;
        margin: 0 0 1em;
    }
    #content ul {
        margin: 0 0 1em 40px;
        font-size: 1.2em;
    }
    /* -------------------- Layout --------------------- */
    * html #wrapper {
        height: 100%;
    }
    #wrapper {
        position: relative;
        margin: 15px auto 0;
        width: 800px;
        min-height: 100%;
        border: #666 solid 1px;
        background-color: #FEFEF8;
    }
    #header {
        margin: 6px 6px 0;
        background-color: #EEEEDF;
    }
    #nav {
        position: absolute;
        top: 205px;
        left: 25px;
        width: 80px;
    }
    #nav ul{
        position:fixed;
        border-top:    #EEEEDF solid 3px;
        border-bottom: #EEEEDF solid 3px;
        width: 80px;
        margin-left:20px;
    }
    #content {
        margin: 5em 150px 11em;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.4;
    }
    #footer {
        position: absolute;
        bottom: 6px;
        left: 6px;
        height: 6em;
        width: 788px;
        background-color: #EEEEDF;
        text-align: center;
        overflow: auto;
    }
    /* ------------------- Links ---------------------- */
    #content a {
        color: #333;
        text-decoration: underline;
    }
    #content a:visited {
        color: #333;
    }
    #content a:active, #content a:focus, #content a:hover {
        text-decoration: none;
        background: #EEEEDF;
        padding: 0 0 2px;
    }
    /* --------------------- Menus ---------------------- */
    /* Main Menu */
    #nav ul {
        list-style: none;
        text-align: center;
    }
    #nav li {
        font-size: 1.4em;
        margin: 8px 0;
    }
    #nav li a, #nav li a:visited {
        text-decoration: none;
        color: #333;
    }
    #nav li a:active, #nav li a:focus, #nav li a:hover {
        text-decoration: underline;
    }
    /* ContentNav Menu */
    #contentnav ul {
        list-style: none;
        margin: 6em 0 12em;
        text-align: center;
    }
    #contentnav li {
        font-size: 1.4em;
    }
    #contentnav li a {
        position: relative;
        height: 1em;
        color: #333;
        text-decoration: none;
        padding: 0 0 1px;
        margin: 0 6px;
        display: block;
        letter-spacing: 1px;
    }
    #contentnav li a:visited {
        color: #333;
    }
    #contentnav li a:active, #contentnav li a:focus, #contentnav li a:hover {
        background-color: #EEEEDF;
    }
    /* Footer Menu */
    #footer ul {
        padding: 1.3em 0 .5em;
        list-style: none;
    }
    #footer li {
        display: inline;
        word-spacing: 5px;
        font-size: 1.4em;
    }
    #footer a, #footer a:visited {
        text-decoration: none;
        color: #333;
    }
    #footer a:active, #footer a:focus, #footer a:hover {
        text-decoration: underline;  
    }
    /* --------------- Global Classes --------------- */
    .center {
        text-align: center;
    }
    .nomargin { 
        margin: 0;
    }
    .margin {
        margin: 1em 0;
    }
    .largerfont {
        font-size: 1.4em;
        } 
    .clear {
        clear: both;
        padding: 0;
        margin: 0;
        line-height: normal;
    }
    .floatleft {
        float: left;
    }
    .floatright {
        float: right;
    }
    .hidden {
        display: none;
        visibility: hidden;
    }
    .inline {
        display: inline;
    }
    /* ----------------- Content/Pages ----------------- */    
    
    /* ie only styles below */
    /* mac hide \*/
    * html, * html body{
        overflow:hidden;
        height:100%;
    }
    #fixed{display:table;height:100%;margin:auto}
    * html #fixed{
        height:100%;
        overflow:auto;
        position:relative;
    }
    #nav {
        position: absolute;
        top: 205px;
        left: 0px;
        width:100%;
    }
    #nav #iefix{
        width:800px;
        margin:auto;
        position:relative;
    }
    
    
    /* end hide*/
    
    
    </style>
    </head>
    <body>
    <div id="fixed">
        <div id="wrapper">
            <div id="header">
                <h1><span class="small">LITTLE</span><span class="medium">ABOUT</span><span class="large">ALOT</span><span class="small">.com</span></h1>
            </div>
            <div id="content">
                <h2> Best Man Speech</h2>
                <p>Please excuse the paper. I had to write it all down because there is so much I wanted to say here tonight.</p>
                <p>This is an especially happy occasion for me today, not only because Dean has been my best friend for the last ten years, but because Liz is also my cousin and friend.</p>
                <p>I was there the night Dean and Liz met. We were in a club up in riverside dancing all night. I remember the whole drive home back down to Carlsbad Dean and I were like two giddy little school girl’s talking about how cool it would be if we were not only best friends but family two. Which brings us to today, and I personally could not be happier with the way things have turned out.</p>
                <p>Dean when you asked Liz to marry you, you made the best decision of your life. I’ve never seen you happier and more content than you’ve been since the day you found Liz. Liz is a beautiful, loving, self-assured, passionate woman whose attributes will keep your marriage full of life and most importantly help to keep it interesting. I am so happy for you buddy!</p>
                <p>And Liz you didn’t do so bad yourself. You’ve married a great man - a man of amazing inner strength and integrity, a compassionate man who truly loves you. He’s earned my unreserved respect and admiration. And I consider it a privilege to be standing here today. The two of you complement one another so well, all in part to make the amazing couple that you are.</p>
                <p>I love you both and I lift this toast to you Dean and Elizabeth ingle. May your lives be filled with the same joy and happiness you feel here today.</p>
            </div>
            <div id="footer">
                <ul>
                    <li><a href="../index.php">Home</a> • </li>
                    <li><a href="../about.php">About</a> • </li>
                    <li><a href="mailto:ewwatson@gmail.com">Contact</a></li>
                </ul>
                <p><a href="copyright.php">Copyright 2007 - 2008</a> <a href="http://www.discountsitedesign.com">Site Design by DiscountSiteDesign.com</a></p>
            </div>
        </div>
    </div>
    <div id="nav">
        <div id="iefix">
            <ul>
                <li><a href="../index.php">Home</a></li>
                <li><a href="../about.php">About</a></li>
                <li><a href="mailto:ewwatson@gmail.com">Contact</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    The nav is fixed in both firefox and ie and doesn't jump like the expression method. However it means a lot of extra css and a moving the html around so I would recommend you stick with the fixed version.

    In my site I just let good browsers have the fixed left nav and IE6 just gets the normal scrollable nav.

  6. #6
    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)
    Ahhh! No I did not even realize that it was broke. Thanks for pointing that out! I thought that was a little easy. Thanks a lot for the information Paul. I'll get to work on it ASAP!

    On a completely different note Paul. I took this page from your layout examples (really good stuff by the way) and made it 100&#37; height and positioned the footer absolute at the bottom. It seems to work absolutely perfect in all browsers. But is there anything you see on your end that could pose a problem for me? I sort of want to know if the layout is do-able as is before I start really getting into it. Thanks Paul!

    Here is your example
    http://www.pmob.co.uk/temp/min-max-3col.htm

    Here is my slightly changed example
    http://www.discountsitedesign.com/dean.html

  7. #7
    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)
    Also back to the original thread. I did it and it works great "but" when I increase text size the placement of the nav gets all out of whack in comparison to the rest of the content. Should I just mess with (margin-top: em) until I find the right combo or is there a different way that I have not realized? Thanks!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Should I just mess with (margin-top: em) until I find the right combo or is there a different way that I have not realized? Thanks!
    I think you'll have to mess with em measurements for top and left on the absolute container until it fits where you want. Remember that ems are based on the parents font size so it could be a little tricky but I think you should be able to get close.

    But is there anything you see on your end that could pose a problem for me?
    The only problem will be if you want all those columns to be 100&#37; height as it gets a little complicated because 100% height can't be passed down onto any other elements in a usable way. The reason for this is that we use min-height:100% for the first wrapper which effectively means that any other nested elements cannot also be min-height:100% because the 100% is based in height and not min-height. The height of a min-height element is effectively auto (if not set to a specific measurement).

    You would need to use a technique shown in this demo which uses an absolutely placed background to provide column colours and borders. Don't worry that its absolutely placed because it holds no content and just matches the inners height. This article explains the method.

    If you don't need equal columns then it doesn't matter anyway

    I should also point out that when using a 100% height layout it;s best not to make it bigger than 100% or you will get a vertical scrollbar when none is needed. For example if you have a 100% high outer and you add borders to it then it becomes 100% + 2px and triggers a scrollbar for the odd 2px. This really isn't a big problem but isn't quite right.

    If you wanted a border at top and bottom then simply apply the top border to the header and then a bottom border to the footer for the same effect.

    Hope that helps - Back tomorrow now.

  9. #9
    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)
    Alright! Thanks a lot Paul for all the invaluable info! Here is the new and Paul O'B improved version. http://www.littleaboutalot.com/conte...man-speech.php
    I still need to sit down and get real obsessive with it in order to find the right margin-top combo - but it works perfect. Awesome - take care!

    EDIT - now it is perfect - increase the text size - the nav stays right with the content - this is where perfectionism pays off!
    Last edited by PicnicTutorials; Mar 24, 2008 at 07:51.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you sorted it

  11. #11
    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)
    So I just noticed my palm pilot butchers my new fixed nav. I was meaning to do a handheld style sheet anyways. So I was reading up on best handheld style sheet practices today and I came across this displeasing info.

    http://www.unintentionallyblank.co.u...d-style-sheet/

    http://www.christianmontoya.com/2007...the-mobile-web

    So with this new info in mind, do you guys have any suggestions on how to fix my nav? I was originally thinking I could just give the #nav and the #nav ul a position static in the handheld version and that would fix the problem, but now I have this new info to absorb also.

    I tried floating the nav instead of absolute positioning and my mobile still makes a mess of it. In my head of the pages I have these two css links below. So if I add a media="handheld" into the mix I pretty much have to do a whole style sheet for the handheld version because my below css link is dubbed media="all". So along with any other suggestions should I change media="all" to media="screen"? I was originally told by someone to do it this way, therefore you don't have a lot of redundant rules.

    <link href="../styles.css" rel="stylesheet" type="text/css" media="all">
    <link href="../print.css" rel="stylesheet" type="text/css" media="print">

    This site in question is pretty much just a content site, so it doesn't have to look pretty - when viewing on a mobile just readable. So, is there anyway to just feed raw html to mobiles void of any css? Also while keeping my media="all". Because if I change that to media="screen" then I have to change the whole print version as well. What to do? What to do? Thanks for any info!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You've found my 'achilles heel' with CSS as I don't even own a mobile phone so have never bothered to look at this.

    There are lots of comments on this around so it will be a matter of trying to find relevant information but judging from the article you posted there won't be one reliable solution.

    I'm not sure I agree with changing your existing code just to accommodate mobiles anyway. If some mobiles ignore the handheld stylesheet then it sames a waste of time to implement them especially if you then need to apply various media queries as well . Also the mobile world changes very quickly and what you do today will probably change by the time you get it out there. I'm guessing that eventually mobiles will be trying to access the web as it is without being given reduced content and layout styles.

    As I said I've never really paid this much attention because I don't even own a mobile phone and I don't know anyone who has actually accessed the web via phone either. I know it's a growing market especially with the iphone etc so it would be good to hear from others who have tackled this subject.

  13. #13
    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)
    Hello guys, you may have come across this before, but if not I thought you might find this very interesting!

    So you know how when you use an IE expression it's resource intense, and in can for instance make what ever element you've applied the expression to be slow to respond or jumpy? Well my fixed nav was just like that - really jittery and jumpy. Well no more I found a fix! I found the idea here http://www.webmasterworld.com/css/35...htm#msg3611741
    It calls for the use of a transparent image among others. Well I don't have photoshop yet so I was brain storming how else I could apply the image - and then it donged on me!

    I realized I could just as easily use the * html hack for the html itself. Here is the code that makes my nav as smooth as butter!

    * html { /* keeps the nav from jumping in IE6 */
    background-image: url(image.jpg);
    }
    * html #nav {
    position: absolute; /* position fixed for IE6 */
    top: expression(114+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
    left: expression(35+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
    }

    And heres a working version - http://www.littleaboutalot.com/content/modeling.php Just make sure you look at it in IE6, because it has always worked perfect in the others.

  14. #14
    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)
    Also Paul, I just finally had a look at your pure css fixed in ie method and ran a few test runs on it - Impressive! I have no idea how that is accomplished - but impressive none the less!

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, thanks for the link and it looks like a useful discovery.

    It seems to be based on an old method used for making dotted borders redraw properly in IE as mentioned in the faq.

  16. #16
    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)
    Hello,

    My css does not validate anymore. It has 7 errors and they are all due to the IE expressions. Is it the * html or the expressions that don't validate? What do you guys do? Do you just deal with it or do you put your ie expresions/hacks in a separate css file? Thanks!

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is it the * html or the expressions that don't validate?
    It's the expressions that are not valid as they are proprietary ie code and do not form part of the CSS specifications.

    * html is 100&#37; valid (if nonsense)

    I usually put expressions in an IE only stylesheet using conditional comments which will also hide it from the validator and your page will appear to be valid (although in reality its not).

    Or just accept that its not valid and live with it

  18. #18
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You've found my 'achilles heel' with CSS as I don't even own a mobile phone so have never bothered to look at this.
    Curse my good memory! http://www.sitepoint.com/forums/show...74#post3139174 (there's a lot of links to some mobile device emulators you can use, Paul).

    Quote Originally Posted by ewwatson View Post
    Hello,

    My css does not validate anymore. It has 7 errors and they are all due to the IE expressions. Is it the * html or the expressions that don't validate? What do you guys do? Do you just deal with it or do you put your ie expresions/hacks in a separate css file? Thanks!
    You have two choices, both of which are perfectly acceptable. Ok, three (the third may not work however). The first is to leave it alone, the second is to use a conditional comment for the expressions, and the third (this is the tricky one) is to @import the expressions via an external stylesheet right into your main one. If I recall correctly, the internal @import has to come first in the stylesheet or else it won't work.

  19. #19
    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)
    Hey thanks guys,

    Dan good memory - those are some good links in there for mobile testing!

    I haven't quite decided what I'm going to do yet (leave expressions in or put them in another .css). There's never a clear-cut answer is there? Reason being I read this post http://virtuelvis.com/archives/2004/...le-ie-problems explaining that conditional comments do not work with multiple IE's. Well I have multiple IE's - and I sure as heck at this point in my learning curve do not need another thing to consider while testing. I guess I'm pretty much done testing this site for now, but who really knows?

    Then I came across this site http://www.positioniseverything.net/...s/multiIE.html explaining how to alleviate the conditional comments problem and make the multiple IE's work with them - seems a little too involved for me though.

    However, if I decide to go that route I simply put this in my head of each doc right?

    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
    <![endif]-->

    Should this go before or after my other style sheet links (ie screen, print, handheld)? Also because IE6 will be the only one reading this particular style sheet I can safely remove all the * html hacks in those rules right?

    Alright, slowly but surly I'm getting there - thanks guys!

  20. #20
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd target IE 5 with them as well just to be on the safe side. And so you know, the IE standalones from Tredosoft.com (http://tredosoft.com/Multiple_IE) don't suffer from the problem you described (Tredosoft also fixed a lot of other problems with the IE standalones as well).

    Pick one or the other, but pick something. Knowing me, I'll probably be going with a combination of the two (a conditional comment for anything older than IE 8, and the hacks to separate the IE 5/6 stuff from IE 7 inside the IE stylesheet fed via the CC).

  21. #21
    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)
    Awesome! I guess that was probably an old article I read. Cool I'll just do the conditional comments in my head of the doc then.

    I simply put this in my head of each doc right?

    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
    <![endif]-->

    Should this go before or after my other style sheet links (ie screen, print, handheld)? Also because IE6 will be the only one reading this particular style sheet I can safely remove all the * html hacks in those rules right?

    Alright, slowly but surly I'm getting there - thanks guys!

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Should this go before or after my other style sheet links
    The IE stylesheet follows your other stylesheets otherwise the styles will be overwritten by the normal stylesheet. You can still specify media="screen" etc in the IE stylesheet also.

    As Dan said you will most likely want those styles applied to ie5.x as well so use [if lte IE 6] (which means less than or equal to).

  23. #23
    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)
    I think I am choosing not to style for IE5 anymore, or rather in my case ever, since I've only been doing this 5 months or so.

    The order is important because of the cascade - Ok I understand that. But what I don't understand is why it would matter, because IE6 is the only one that will read that style sheet right - the only one that can even see it right?

    Also in those expressions I used the *html hack. I can safely do away with those right, now that only IE6 will read them? Thanks!

    Here is my order - does this look right? Or should it go at the very bottom? Thanks Paul - appreciate it!

    <link href="../screen.css" rel="stylesheet" type="text/css" media="screen">
    <!--[if IE 6]>
    <link href="../ie6.css" rel="stylesheet" type="text/css" media="screen">
    <![endif]-->
    <link href="../print.css" rel="stylesheet" type="text/css" media="print">
    <link href="../handheld.css" rel="stylesheet" type="text/css" media="handheld">

  24. #24
    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)
    This is a weird one! while testing locally IE6 won't except my CC's - well sort of - it's so weird.

    I uninstalled/reinstalled just to be sure.

    This makes no sense to me! If I don't use the CC's and link to ie6.css then it works in IE6 regardless of where I put it (above or below the others).

    If I use CC's and put it below the others then it does not work in IE6.

    However, if I use CC's and put it above the others then it works as it should in IE6. Very weird uh?

    I want to use CC's because I want to validate but I don't want to loose my testing grounds - ya know? It's never clear-cut is it?

    EDIT - I didn't change a single thing I swear - and now all of a sudden it miraculously works - even more weird?

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I want to use CC's because I want to validate but I don't want to loose my testing grounds - ya know? It's never clear-cut is it?
    You must have done something wrong because the CC's work fine on my system (assuming you have the updated versions of the IE standalones from tredosoft).

    Do you have an example of a page that's not working for you?


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
  •