SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <!--[if IE]> Conditions

    Hi I am currently developing a site but naturally I need some IE specific css to make it look good in mozilla and also render correctly in IE. At the moment I have the site working in both but I want to further build upon the style so that people using mozilla/firefox get the most out of the site, but also IE users get the most out of the site (that they can handle that is).

    The couple of questions I have are below:
    1. If I use the IF IE conditions and I have defined say the width of an ID in the stylesheet that mozilla/firefox users will be using. Then an IE user comes to the site and gets the IF IE stylesheet. Will the width defined in the generic mozilla/firefox stylesheet be overwritten by the width defined in the IE stylesheet?
    2. Since these IF IE conditions are only IE, my assumption is that there is no way to say give one stylesheet for mozilla and one stylesheet for IE using solely these conditions. Because mozilla would read it as just comments?
    3. Am I trying to solve my problems with the wrong method? should I be concentrating on the one stylesheet with a few IE hacks and settle with an overall good style for both browsers instead of the best I can do for IE and the best I can do for mozilla?


    Thanks in advance for anyone who replies, I had a search around the forums but only came up with a few posts from 2004.

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be brutally honest, I'm increasingly of the opinion that if you have to use a conditional to 'hide' CSS from certain browsers, you are probably using the wrong CSS and/or HTML in the first place.

    It is not only entirely possible to write an entire site in most any concievably layout without resorting to them, if you do the odds of it working on Quijada browser or gobozo browser or any other "pull a name out of my backside" browser that might be tomorrows new fad goes up exponentially - case in point, I've yet to have even ONE of my sites need any sort of conditional hack to work with IE7 - while it seems people are resorting to them left and right for the silliest of layout issues.

    My advice, open up Opera, IE, FF - design to Opera, but make sure it appears correctly in all three... Opera is the strictest of the browsers on code, and generally what works in it, works in the other two (and safari!) with very rare exceptions.

    But then, I don't consider setting a parameter that can be passed safely to all browsers to be a hack - that's proper variable initialization. (look up my recent posts, you'll see that mentioned a lot)

    The more 'hacks' you use, the more complex your CSS ends up resulting in the need for... you guessed it... more hacks. Dangerous cycle that. It also plays into the 'magic bullet' philosophy of patching broken code into working instead of rewriting it to work right in the first place... Simple fact is a LOT of times you're better off throwing it all out and starting over from scratch.

    ... and once you learn to write code that works right out of the gate with no conditionals, you never have to worry about it again.
    Last edited by deathshadow; Sep 22, 2006 at 19:45.

  3. #3
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    To be brutally honest, I'm increasingly of the opinion that if you have to use a conditional to 'hide' CSS from certain browsers, you are probably using the wrong CSS and/or HTML in the first place.

    It is not only entirely possible to write an entire site in most any concievably layout without resorting to them, if you do the odds of it working on Quijada browser or gobozo browser or any other "pull a name out of my backside" browser that might be tomorrows new fad goes up exponentially - case in point, I've yet to have even ONE of my sites need any sort of conditional hack to work with IE7 - while it seems people are resorting to them left and right for the silliest of layout issues.

    My advice, open up Opera, IE, FF - design to Opera, but make sure it appears correctly in all three... Opera is the strictest of the browsers on code, and generally what works in it, works in the other two (and safari!) with very rare exceptions.

    But then, I don't consider setting a parameter that can be passed safely to all browsers to be a hack - that's proper variable initialization. (look up my recent posts, you'll see that mentioned a lot)

    The more 'hacks' you use, the more complex your CSS ends up resulting in the need for... you guessed it... more hacks. Dangerous cycle that. It also plays into the 'magic bullet' philosophy of patching broken code into working instead of rewriting it to work right in the first place... Simple fact is a LOT of times you're better off throwing it all out and starting over from scratch.

    ... and once you learn to write code that works right out of the gate with no conditionals, you never have to worry about it again.
    That bears repeating.
    Ed Seedhouse

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, some very good points indeed.

    For the most part I agree with what your saying that it is entirely possible to make a working accessable and overall well presented site that works well in all browsers without resorting to any specific conditions/hacks.

    I also agree that it, more than likely (in my case especially) relates directly back to CSS ability and overall knowledge.

    Having said that when specifically talking about the use of conditions (eg. browser specific CSS), you have to ask yourself is this a 'bad practice' or simply making use of whats available to achieve the desired outcome.

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pineapple
    Having said that when specifically talking about the use of conditions (eg. browser specific CSS), you have to ask yourself is this a 'bad practice' or simply making use of whats available to achieve the desired outcome.
    That is ALWAYS the question - and one any developer has to ask themselves... and something each must find in their own way.

    A lot of it depends on your programming background (if any) - I cut my teeth in an age where RAM was measured in single digit kilobytes (or less) and cpu speeds were measured in khz, meaning I know all about making tight efficient code - while at the same time my first high-level language was modula, meaning I fully appreciate how instantly bug-free well formatted verbose code can be... Finally, I've seen so many things come and go...

    Drawing on those things, I lean towards rejecting them outright:

    First, because they are not 'tight' code - using a conditional when you don't HAVE to is one of the things leading to 'spagetti code'. It IS bad programming practice in any other programming language, so why make an exception to that here?

    Secondly, the conditionals tend to be cryptic at best (looks like some hardcore BASH scripter sticking his nose in where it doesn't belong), though that could just be the bad formatting used in most of the 'snippets' people just copy wholesale... They don't even come CLOSE to matching the flow of the rest of the document specification - never a good sign.

    Finally, look at what's happening with IE7 - you have all these 'hacks' to make IE6 work that may or may not function in IE7 - so do you rip the hacks out for code that works across all browsers to begin with, or layer YET ANOTHERTM layer of hacks upon it... Are you going to keep hacking when Mozilla 3, Opera 10, Safari 2.5 and Opera 10 all break your layout? When does it END? Where do you draw the line? If you can make code that works identical (or at least close enough for gov't work) in IE 6 & 7, Firefox 1.x and 2.x, Opera 8.5 and 9.x, Safari 1.x and 2.x, and the current Konqueror WITHOUT a single browser conditional, how likely do you think it is that website is going to be broken in future versions...

    Meanwhile take a website designed for firefox, with conditionals for IE 5, 6, 7, Opera 8.5, 9.x and Safari... Probably a LOT more likely that when a new version comes along, guess what? You need a new hack.

    NASTY cycle to get into, especially when a little work 'up front' can prevent you from having to nursemaid your code every six months.

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I don't know about anyone else, but you have convinced me. I scrapped the idea of IE conditionals/hacks and started from the top and am working my way down the page getting the best overall outcome without browser specific conditionals/hacks.

    I am about a third through and seem to be making ok progress.

    Although the site was functional and decently looking in FF, IE and Opera to start with, I was going to use extra conditions/hacks to add to the overall polish.

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pineapple
    Will the width defined in the generic mozilla/firefox stylesheet be overwritten by the width defined in the IE stylesheet?
    If you put your IE conditional statement after your call to the main stylesheet, then yes.

    Quote Originally Posted by pineapple
    Since these IF IE conditions are only IE, my assumption is that there is no way to say give one stylesheet for mozilla and one stylesheet for IE using solely these conditions. Because mozilla would read it as just comments?
    Stu Nicholl's demonstrates how to use conditional comments to target both IE and non-IE browsers: http://www.cssplay.co.uk/menu/conditional.html

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Without getting in to the discussion about whether its is good or bad to use conditional comments I can tell you that ms does have a set of downlevel revealed cc's that are specifically for hiding stuff from ie.

    Unfortunately its not valid but there is a way to make it valid.

    http://www.456bereastreet.com/archiv...onal_comments/

    From my own point of view (I thought I wan't going to dicuss thiss ) a conditonal stylesheet that holds 2 or three hacks for IE is perfectly acceptable. I never see the need to have completely different stylesheets (other than for experimentation) or unless you want something specific like fixed positioning in ie6 which needs specific code for ie6.

    If your stylesheet is using advanced selectors to improve the design for mozilla and other browsers then there is no need to hide them from ie as they just don't get parsed anyway.

    In most designs you will just need to force "layout" on elements in ie to cure bugs and a lot of times this can be done without a hack by just adding a dimension. When you can't use a dimension then the height:1% hack is required. (However adding a dimension when none is necessary is a hack anyway .)

    The way I design is to view my layout at every step of the way in at least 3 browsers (IE, Firefox and Opera) and in that way as soon as something is wrong you can change the design to accomodate the differences without using a hack. If you just use one browser for checking and then wait until the end before checking again then this is when you will likely resort to a hack because its too late to change the design at ground level.

    I would not use Opera solely to check my layouts because it is still too buggy and has serious re-draw problems with floated layouts and doesn't re-draw the screen properly. Firefox is my browser of choice and more or less does everything it should in the way that it should be done.

    Most designers make the mistake of using hacks when in fact none are needed and they haven't understood the fundamental basics of css. The number of times i've seen people using negative positioning hacks to make different browsers line up the heading and p tags just because they didn't realise that the default margins are different in these browsers.

    Before you use a hack -think first! is this a known bug that needs a hack or am I simply doing something wrong

  9. #9
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I would not use Opera solely to check my layouts because it is still too buggy and has serious re-draw problems with floated layouts and doesn't re-draw the screen properly.
    Uhm, since WHEN? I've NEVER heard of or encountered that with Opera... Opera BUGGY? Compared to FF?!? Whiskey Tango Foxtrot?

    But then, people look at me like I have 8 heads when I point out that firefox cannot even redraw properly on a mousewheel scroll, and is so buggy I cannot even keep it running for more than 10-15 minutes at a stretch without having to 'kill' it.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    cannot even keep it running for more than 10-15 minutes at a stretch without having to 'kill' it.
    lol - Seems we're on opposing sides on this We'll just have to agree to disagree - I could come up with a load of buggy opera examples but then you'd probably have some buggy firefox example to counter them

  11. #11
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    lol - Seems we're on opposing sides on this We'll just have to agree to disagree - I could come up with a load of buggy opera examples but then you'd probably have some buggy firefox example to counter them
    Doesn't help that BOTH are moving targets, you can say something about them today that isn't true tomorrow.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    you can say something about them today that isn't true tomorrow
    Ok - To be fair opera 9 has fixed a lot of things that did annoy me and as you say I expect the next versions will be better still.


Bookmarks

Posting Permissions

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