css hack for IE: is using the * acceptable

Discussion in 'HTML' started by windandwaves, Oct 22, 2005.

  1. windandwaves

    windandwaves Guest

    Hi Gurus

    Someone taught me that using the following is like an IE hack:

    div#mydiv {padding: 10px; * padding: 12px;}

    meaning that Internet Explorer has 12pixels padding and the rest 10pixels.

    Can I use this hack or is this too easy?

    TIA


    - Nicolaas
    windandwaves, Oct 22, 2005
    #1
    1. Advertising

  2. windandwaves

    Toby Inkster Guest

    windandwaves wrote:

    > Someone taught me that using the following is like an IE hack:
    > div#mydiv {padding: 10px; * padding: 12px;}


    I've never seen this, and don't know whether it works, but it's invalid.
    Better to do something like:

    DIV#mydiv
    { padding: 10px; }
    HTML>BODY DIV#mydiv
    { padding: 12px; }

    which works and is valid.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 23, 2005
    #2
    1. Advertising

  3. windandwaves

    windandwaves Guest

    Toby Inkster wrote:
    > windandwaves wrote:
    >
    >> Someone taught me that using the following is like an IE hack:
    >> div#mydiv {padding: 10px; * padding: 12px;}

    >
    > I've never seen this, and don't know whether it works, but it's
    > invalid. Better to do something like:
    >
    > DIV#mydiv
    > { padding: 10px; }
    > HTML>BODY DIV#mydiv
    > { padding: 12px; }
    >
    > which works and is valid.


    It works fine. Your example I think works the other way. It works in all
    browsers but IE

    What I do is that I work out using php what browser it is and then serve a
    different stylesheet.

    However, I noticed that the asterix works fine. Just try it. It is
    invalid, but that is the exact reason you do it. So that firefox, etc... do
    not go for the padding 12px, while IE ignores the * and applies padding
    12px.

    Ta

    - Nicolaas
    windandwaves, Oct 23, 2005
    #3
  4. windandwaves wrote:

    > Toby Inkster wrote:
    >> windandwaves wrote:
    >>
    >>> Someone taught me that using the following is like an IE hack:
    >>> div#mydiv {padding: 10px; * padding: 12px;}

    >>
    >> I've never seen this, and don't know whether it works, but it's
    >> invalid. Better to do something like:
    >>
    >> DIV#mydiv
    >> { padding: 10px; }
    >> HTML>BODY DIV#mydiv
    >> { padding: 12px; }
    >>
    >> which works and is valid.

    >
    > It works fine. Your example I think works the other way. It works in all
    > browsers but IE


    The problem with your 'hack' is that there is not well-defined, correct way
    to parse it - because it is invalid. Which browser parses it this or that
    way is even more random then with the valid hacks.

    And with the upcoming IE7, which will fix most parser bugs, but not all CSS
    bugs, such hacks are not a good idea anymore. Seems like conditional
    comments are the least evil way to do thing like this...

    --
    Benjamin Niemann
    Email: pink at odahoda dot de
    WWW: http://www.odahoda.de/
    Benjamin Niemann, Oct 23, 2005
    #4
  5. windandwaves

    Toby Inkster Guest

    windandwaves wrote:

    > However, I noticed that the asterix works fine. Just try it. It is
    > invalid, but that is the exact reason you do it. So that firefox, etc... do
    > not go for the padding 12px, while IE ignores the * and applies padding
    > 12px.


    No -- it's invalid, which is why you *shouldn't* use it.

    Proper browsers (Opera, Firefox, etc) might ignore the second padding
    value today, but future versions might start to apply the second padding
    value. You've used an invalid contruct, so "proper" behaviour is
    undefined -- the browsers can do what they like.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 23, 2005
    #5
  6. windandwaves

    windandwaves Guest

    Toby Inkster wrote:
    > windandwaves wrote:
    >
    >> However, I noticed that the asterix works fine. Just try it. It is
    >> invalid, but that is the exact reason you do it. So that firefox,
    >> etc... do not go for the padding 12px, while IE ignores the * and
    >> applies padding 12px.

    >
    > No -- it's invalid, which is why you *shouldn't* use it.
    >
    > Proper browsers (Opera, Firefox, etc) might ignore the second padding
    > value today, but future versions might start to apply the second
    > padding value. You've used an invalid contruct, so "proper" behaviour
    > is undefined -- the browsers can do what they like.



    You be pleased to know I have retrieved the items with * from my stylesheet,
    placed them in ie.css and added the following code to my page:

    function styler() {
    $v = '';
    $b = browser_detection('browser');
    $file = 's/'.$b.'.css';
    if(file_exists($file)) {
    $v .= '<link rel="stylesheet" type="text/css" href="'.$file.'">';
    }
    return $v;
    }

    Thank you.
    windandwaves, Oct 24, 2005
    #6
  7. windandwaves

    Rossz Guest

    windandwaves wrote:

    > What I do is that I work out using php what browser it is and then serve a
    > different stylesheet.


    Browser sniffing is not an exact science. I wouldn't trust it.

    --
    Rossz
    God kills a kitten each time someone uses Internet Explorer
    Rossz, Oct 24, 2005
    #7
  8. windandwaves

    windandwaves Guest

    Rossz wrote:
    > windandwaves wrote:
    >
    >> What I do is that I work out using php what browser it is and then
    >> serve a different stylesheet.

    >
    > Browser sniffing is not an exact science. I wouldn't trust it.


    So what should I trust instead? Your claim about the kittens (pretty
    funny!)?
    windandwaves, Oct 25, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. altamir

    Nice CSS rollovers: IE hack

    altamir, Nov 17, 2003, in forum: HTML
    Replies:
    1
    Views:
    478
    e n | c k m a
    Nov 17, 2003
  2. CSS hack for IE 6?

    , Dec 23, 2003, in forum: HTML
    Replies:
    3
    Views:
    511
  3. nicolacantalupo

    css hack for ie

    nicolacantalupo, Jan 21, 2008, in forum: HTML
    Replies:
    0
    Views:
    346
    nicolacantalupo
    Jan 21, 2008
  4. Bogdan
    Replies:
    1
    Views:
    571
    Cowboy \(Gregory A. Beamer\)
    Mar 14, 2008
  5. Replies:
    13
    Views:
    438
    Jorgen Grahn
    Jun 15, 2010
Loading...

Share This Page