A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: CSS tricks/hacks/filters that just work.

  1. #1
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429

    CSS tricks/hacks/filters that just work.

    I dare say these tips make this thread sticky worthy.
    I've been kicking and screaming trying to figure out a solid way to debug CSS across the top browsers and have narrowed it down to a few key methods.

    First and foremost, build for Firefox! It works as intended and provides a solid base to start localizing from.

    Next, debug for IE7. There is a host of debatable ways to do this depending if you care about being standards compliant or not. Frankly, Imho, if the top competitor (microsoft) isn't going to build their browsers (ie6, ie7) standards compliant, I don't see why we should kill ourselves trying to.

    This one trick will solve 99% of your issues targeting IE7.
    Simply add a '#' before the styles you'd like only IE to see.

    Code:
    #container{
    width:800px; //all browsers will see this line
    #width:780px;  //only IE 6 and 7 will see this line
    }
    Yes, it really is that easy. I'm alarmed it's not promoted more.

    So while IE7 has made great strides to be more compliant, it still sucks, but not as bad as IE6, the great bane of my existence. If the IE filter (#) does not solve your issue in IE6 as well there is yet a another filter just for it.

    It involves a separate selector rather than additional lines inside the same one. You start this new selector with * html and then simply enter a single backslash (\) in the name of the style.

    EDIT: I want to add sticks464's correction for clarity
    Quote Originally Posted by sticks464 View Post
    One thing to add to the backslash hack, to work properly, the backslash must be positioned in the middle of the property and shouldn't appear before the letters a to f, or A to F, or numerials 0 to 9 - if it does, those characters will be treated as hexadecimal numbers.
    Code:
    #container{
    width:800px; //normal styling
    }
    
    //target only IE6 (note: Don't use comments in IE6!)
    * html #con\tainer{
    width:780px;
    }
    It's disgustingly atrocious but hey, so is the rest of the browser.

    Btw, I estimate IE6 usage to be small enough to stop supporting it by August 2009.
    Last edited by jAQUAN; 07-18-2009 at 12:38 PM.

  2. #2
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    You know if I didn't know about that little silverlight experiment you did I might be willing support you on your sticky aspiration . Nice tricks, was not aware of those.
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  3. #3
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429
    Haha, trust I'm hanging my head for that one.

  4. #4
    Senior Member
    Join Date
    May 2007
    Posts
    266
    I whole heartedly agree with you on older versions of IE. I don't design for them anymore unless specifically ask to. Another way to bring older versions of IE in compliance with IE7 specs is with javascript used in a conditional statement. Especially useful if using png image format. Google code

    Code:
    <!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
    <![endif]-->
    One thing to add to the backslash hack, to work properly, the backslash must be positioned in the middle of the property and shouldn't appear before the letters a to f, or A to F, or numerials 0 to 9 - if it does, those characters will be treated as hexadecimal numbers.

  5. #5
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    You can also use the decedent selector which is not recognized y IE6. Unfortunately for my job we still have to support 6.

    div {
    //rules for ie6
    }
    body>div{
    //overwrite specific properties for standards compliant browsers.
    }
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  6. #6
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429
    Great notes sticks. I'm kinda against using js for layout since I believe a site should be progressively enhanced and degrade gracefully.

    I did not know about the \hex thing. Very helpful. If I were a mod I'd edit my post to include that.

    I might try the reverse method you posted kortex, though it just seems wrong to give ie6 the first shot. It's styles should act like bottom feeders imo since the browser is a bottom feeder too.

  7. #7
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    I agree, I can't wait until IE6 goes away. Generally what i do with that trick is write the most general styles that apply to all browsers and then override only the specific ones that need to be reset using the decedent selector, which most often for me are margins and padding. So I am not really specifically targeting IE6 with that first block, thats where the most broad rules that apply go.
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  8. #8
    FK's Super Loquacious Randomite ad_mtk2's Avatar
    Join Date
    Jun 2001
    Posts
    1,273
    It's nice to see that Netscape has gone from the statistics, but it is unfortunate that IE6 still holds a large percentage of users. I am so glad that Firefox 3.0 has now taken on some of the accessibility features that only IE previously had, making it the most versatile browser. The most useful tool i've found to aid cross browser designing is the developer toolbar that you can download for Firefox. It doesn't give you a view of other browsers, but if you know what the differences are, you can turn off certain functions, which will give you a good idea of what's going on.

    That said, the # fix for IE is certainly a gem. I've not tried it yet, but if it works as well as you say, then it'll be the easiest and most recognized fix for css scripting when all other semantic methods fail.

    Good job.

  9. #9
    Senior Member
    Join Date
    May 2007
    Posts
    266
    A fix that I recently found after trying numerous other to no avail, for the dotted or dashed border around links when clicked (for Firefox) is to add
    outline:0; to the css of the a or a:link.

  10. #10
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,045
    This is the rule I use to remove the dotted lines in Firefox. It has worked flawlessly for me. I'm not sure where I got it from though.
    Code:
    /** No more dotted borders in Firefox! **/
    input:active, a:active
    {
    	outline: none;
    }
    
    input:focus, a:focus
    {
    	-moz-outline-style: none;
    }

  11. #11
    Junior Member
    Join Date
    Dec 2008
    Posts
    1

    Firefox Dotted Borders

    Quote Originally Posted by MyFriendIsATaco
    This is the rule I use to remove the dotted lines in Firefox. It has worked flawlessly for me. I'm not sure where I got it from though.
    Code:
    /** No more dotted borders in Firefox! **/
    input:active, a:active
    {
    	outline: none;
    }
    
    input:focus, a:focus
    {
    	-moz-outline-style: none;
    }


    where in the bloody hell do i put this code... i assume in the actionscript, but it gives me an error... so i try it in the html under the css style and it does nothing...
    Last edited by skyleranelson; 12-04-2008 at 01:36 PM.

  12. #12
    That is a great note. I believe a site should be progressively enhanced and degrade gracefully.

    I did not know about the \hex thing. It is very helpful.

  13. #13
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429
    I would just like to point out the last line of my un-edited original post.
    http://www.techcrunch.com/2009/07/14...pport-goodbye/
    I may have been dead on about that date.

  14. #14
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429
    CSS Hack for Chrome, Safari, and Internet Explorer 8
    GiantIsland CSS Hack (Affects Internet Explorer 5-8, Google Chrome, and Safari 1-4!)
    http://www.giantisland.com/Resources...ariAndIE7.aspx

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center