Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Send different styles to IE, Firefox, & Safari with just CSS

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #22694
    daGUY
    Member

    I was recently working on a page where the layout was perfect in IE6 and Safari, but an element was off by 1px (to the left) in Firefox. The problem was that if I added "margin-left: 1px" to the element, then it was 1px too far to the right in IE6 and Safari, and this had the effect of messing up the whole layout – an entire div that made up part of the layout no longer fit in its container, and so was bumped down to the next line.

    So, somehow, I needed to apply the "margin-left: 1px" ONLY to Firefox. I came up with this solution:

    Code:
    table.content {
    margin-left: 1px !important; /* Firefox */
    margin-left: 0px; /* IE */
    }
    body:first-of-type table.content { /* Safari */
    margin-left: 0px !important;
    }

    Here’s how it works:

    In the first selector, margin-left is specified twice. Normally, the browser would take the second value (0px) because it comes later in the stylesheet. However, I added "!important" to the first line, which tells the browser to use that value (1px) above all others. Firefox adheres to this and uses the 1px. IE6, which does support "!important," just so happens to ignore it in this context (for whatever reason), and so it reads the 0px instead.

    That took care of Firefox and IE6. However, Safari also saw the "margin-left: 1px !important" line and used the 1px value as well, but I wanted it to use 0px instead.

    Here’s where the second selector comes in. The ":first-of-type" pseudo-selector matches the first occurrence of any element of a particular type in the document. Since you only ever have one body element, "body" and "body:first-of-type" are equivalent, but Safari is the only browser that recognizes the latter – other browsers will skip it. So inside here I added "margin-left: 0px !important". The "!important" is needed because it overrides the "margin-left: 1px !important" from before (since both use "!important," they are equivalent, so the second one takes precedence because it occurs later in the stylesheet).

    Whew! So the end result is that IE6 sees this:

    Code:
    table.content {
    margin-left: 0px; /* IE */
    }

    Firefox sees this:

    Code:
    table.content {
    margin-left: 1px !important; /* Firefox */
    }

    And Safari sees this:

    Code:
    body:first-of-type table.content { /* Safari */
    margin-left: 0px !important;
    }

    Note that this won’t work with IE7, because it supports "!important" correctly. Also note that this method isn’t "future-proof" because other browsers can (and probably will) add support for ":first-of-type" in later versions.

    However, for the time being, this is an easy, CSS-only way to direct three different styles to IE6, Firefox, and Safari simultaneously. It also validates as CSS3 :)

    #47560

    i didnt read all of this but its exactlly why i design for FF first and then go back through for IE as i go. you can add .margin:whatever for all ie or _margin:whatever for ie6. if you get it right in FF first most likely it works in safari. especially if youre as semantic as possible and you dont use a ton of mark up thats not needed.

    #47564
    pab
    Member
    "Adam" wrote:
    I also design for FF, then fix for IE. I don’t bother with hacks though, separate IE specific style sheets are also what I use.

    same here.

    #47575
    koewnet
    Member

    Design for Firefox (with Firebug) and then the rest of the mainstream browsers. Indeed it’s good to make stylesheets without hacks.

    Though it is a good workaround, daGUY. You’ve clearly seen the way of dealing with IE6 and FF/IE7 in the same ‘sheet.

    #110275
    sonusmac
    Member

    How can I define different height for an element for Chrome and FF?
    This trick isn’t working for me.

    #110276
    Paulie_D
    Member

    Why would you want to?

    #110293
    Kitty Giraudel
    Participant

    Thanks for the Safari trick. It’s interesting.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.