Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts

    CSS hack or am I dreaming?

    When I'm coding for Firefox, I get really lazy and use the javascript one line comments in my css "//" to turn off a certain statement temporarily. However it might be more handy than I imagined because IE doesn't pay attention to it at all. Thus the following works in IE, but not Firefox.
    Code:
    body {
    //background-color: red;
    }
    CSS hack or CSS blunder?

    Here's a little extension to the code to add in support for a background-color for Firefox, but it doesn't work for some reason.
    Code:
    body {
    //background-color: red; !important  /* background color for IE */
      background-color: black;  /* supposed background color for Firefox */
    }
    Edit: Proper code as follows (ala stymie):
    Code:
    body {
      background-color: black;  /* background color for Firefox */
    //background-color: red;  /* background color for IE */
    }
    Last edited by Antoniohawk; 07-12-2005 at 08:00 PM.

  • #2
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try reversing the order...
    and lose the '!important'.
    Last edited by stymie; 07-12-2005 at 07:47 PM.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Very good point lol.

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Better use the universal selector with hjtml and parent>child selector , because that will validate.
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    New Coder
    Join Date
    Jul 2005
    Location
    US
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dual slashes works properly with ie 6 when used before the the selector.class.
    e.g. body will be commented
    Code:
    //body {
    property:value;
    }
    When the dual forward slashes are used inside of the brackets IE doesn't parse it properly. So until IE fixes this issue it can be used as a CSS hack...
    Code:
    body {
    property:value; /* standard all browsers */
    // property:value; /*IE only*/
    }
    This is more of an IE blunder.....
    I believe this does validate, just need to use /* */ for comments so IE doesn't get confused.
    a perfect imperfection
    www.hilands.com

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I just saw this post. Pretty neat. Looking at Vsim's post above he said IE6. Does this mean that if I write some thing like:

    Code:
    id {
    property:value; 
    // property:value;
    }
    id[id] {
    property:value; 
    }
    IE lt 6 will write the first property, IE6 will write the second and everything else will write the third?

    I don't have IE5 installed anywhere so I can't check it out.

  • #7
    New Coder
    Join Date
    Jul 2005
    Location
    US
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically with CSS
    if you have a property.value duplicated, the latter in the listing will take precendence *see notes*. Your background-color would take #eee with any browser.
    e.g.
    Code:
    body {
      background-color:#fff;
      background-color:#eee;
    }
    With the usage of dual forward slash ("//") comments the browser should exclude that statment and read the background-color as #fff *see notes*
    Only Internet Explorer 6 (possibly others??) will read the background-color as #eee
    e.g.
    Code:
    body {
      background-color:#fff;
    //background-color:#eee;
    }
    not sure where ya came up the second id tag id[id] {.....

    anyways if you have to do a "hack" with css its probably not worth the effect.

    * notes or extra stuff*
    the double properties, as far as I know is just bad CSS. I don't know if there are any reason(s) for the second in the list to be used besides looking at how the order the parser reads it, the last overwriting any before it.....

    for the double forward slashes ("//"), I don't know anywhere on the w3c of dual forward slashes being an acceptable way to comment anything in css. I've only seen the /* */ and <!-- --> comments for inline html with docs.
    http://www.w3.org/TR/CSS21/syndata.html#comments
    Last edited by Vsim; 07-14-2005 at 04:40 AM.
    a perfect imperfection
    www.hilands.com

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    excuse me if I dont use the right term here:

    the [id] and [class] are selectors(?) IE doesn't read them and thus ignore the whole line.

    Code:
    #main {
    width: 200px;
    }
    #mian[id] {
    width: 210px;
    }
    IE will render #main as 200px wide and everything else willuse the 210px attribute.

    Thus written like that as the latter takes precedence. Since IE will ignore the latter the former that everything else writes will be over written by the latter.

    examples:

    http://www.rammstein.com/
    http://home.earthlink.net/~harbingerofthevoid/

    those use the [id] to use the fixed hack for excluding IE.

    anyways if you have to do a "hack" with css its probably not worth the effect.
    well the reson I was asking the validity of the hack was that I do a web site for some folks that although they like the look of it, I don't. I could use a few PNGs to make it more apealling. i know I could use the pngs for non-ie and IE6 but I was wondering if anyone had tested it for IE5x and IEmac. If my little example works than I could easily feed IE-non-6 the usual image and use the hack and the {} fix to feed the right pngs to the others.

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV
    excuse me if I dont use the right term here:

    the [id] and [class] are selectors(?) IE doesn't read them and thus ignore the whole line.
    They are attribute selectors

    http://css.maxdesign.com.au/selectut..._attribute.htm

    so using a[href] {wouldn't be read by IE, yes :P} That's a neat idea to use over this backslash idea.
    Last edited by mrruben5; 07-14-2005 at 08:24 AM.
    CATdude about IE6: "All your box-model are belong to us"

  • #10
    New Coder
    Join Date
    Jul 2005
    Location
    US
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    aah I getcha I got confused..
    I re-read what you wrote.
    I haven't tested using // inside the brackets with anything but ie6.

    hmm never played with the
    class [id]
    class [selector]
    Interesting effects, I have no clue what the naming convention of that is.. I've been hunting around and found nothing.

    I thought these links might be of some use :
    some discussion on "css hacks"
    Oddity in Firefox...
    and a way to use html comments for specific IE versions.
    http://www.quirksmode.org/css/condcom.html
    This seems to have a little information on
    what the selector.class {property: value} naming convention stuff.
    http://www.w3schools.com/css/css_pseudo_classes.asp

    I'm still edumacating myself on alot of this so the lingo I use might be way off...
    also harbingerofthevoid the about section. Soo true about the paper, I finally found the drive just have to find a way to get by... but you can go to school living on the street might get a grant that way. *sigh*
    a perfect imperfection
    www.hilands.com

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    okay I played alittle but don't know for sure if it works or not.

    Like I posted earlier, I want to load pngs to make a site look better. I do know for a fact that one of the stores patrons uses Win/IE5.x . I can leave the regular jpgs for him. But for moz/ff & IE6 users I'd like to pretty it up some.

    heres my possible solution:

    Code:
    .buttend {
    f\ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./layout/endflowie.png',sizin
    gMethod ='image');
    background /**/: url(../layout/endflow.jpg) bottom center no-repeat;
    }
    .buttend[class] {
    background: url(../layout/endflow.png) bottom center no-repeat;
    }
    using http://dithered.com/css_filters/css_only/index.php as my source it appears that it will work this way:

    the f\ilter: shows to WinIE6 and IEmac but hides from WinIE lt 6.
    the background /**/: hides to WinIE6 but shows to WinIE5.x and MacIE.
    the .buttend[class] hides from all versions of IE.

    I have tried it on IE6 and Mozilla so far so good. I need to upload something to see if it works on IE5's.

    If by chance your trying to do something similar feel free to try this out and see if it works for you.

    In my solution it has to be written in this order otherwise the wrong things will be overwritten.

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Location
    Nottingham NH
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good stuff guys
    I can use this.

    Mike


  •  

    Posting Permissions

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