- This topic is empty.
-
AuthorPosts
-
May 23, 2008 at 11:08 am #22694daGUYMember
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 :)
May 24, 2008 at 3:33 pm #47560Digital SkrapsMemberi 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.
May 25, 2008 at 4:49 am #47564pabMember"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.
May 26, 2008 at 9:21 am #47575koewnetMemberDesign 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.
September 18, 2012 at 11:58 am #110275sonusmacMemberHow can I define different height for an element for Chrome and FF?
This trick isn’t working for me.September 18, 2012 at 12:09 pm #110276Paulie_DMemberWhy would you want to?
September 18, 2012 at 4:16 pm #110293Kitty GiraudelParticipantThanks for the Safari trick. It’s interesting.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.