Creating layout for a specific browser - html

I have an asp.net-mvc3 website.
I created all the layout using css. The layout is exactly how I want it on firefox and Chrome, but on internet explorer it is in a big mess.
So now i am trying to fix it.
But the problem is that I want to fix it without messing it on firefox or chrome.
Do I have to restart from scratch and rebuild the layout? or is there a way to specify a certain layout for a specific browser.
Something like this:
If Internet Explorer then use this css sheet or style, else use what I allready have.

use these(put it on the head):
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

You have to identify the problem(s) (which likely have something to do with using Quirks mode) and address them.
There isn't a magic bullet that solves all IE woes, and providing a completely different stylesheet is usually much more work then you need to do.
You can provide code specifically for IE using conditional comments, but in the vast majority of cases this should be applied with a light touch.

You need conditional IE stylesheets.
Create your stylesheets that you want only IE to use, and put them in the document head inside IE specific code. For example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
This will call the all-ie-only.css stylesheet on any version of IE, but you can change the code to be specific versions, or even a group of versions, e.g. "less than IE9"
This is a great resource that has all the info - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ (Dan has copied and pasted exact content in this answer for you)

I've managed to be able to get very consistent design across IE, Safari, Opera and Firefox by using a complete reset.css stylesheet.
The reset.css will "0 out" the differing preset standards for each browser and then load your actual stylesheet on a clean slate.
Only after testing the reset.css and stylesheet-name.css do I create browser specific hacks. This is the best practice for consistent display across multiple browsers.
The following link is a good example: http://meyerweb.com/eric/tools/css/reset/

What you're asking for is an <!--[if IE]> tag. This website goes through it in detail.
However, in the future you can build a site to work cross platform without the need for If IE tags. It all depends on your CSS and markup.

Related

Valid conditional comments to target non-IE browsers and specific IE versions

How do you use conditional comments to target
Internet Explorer only
Certain IE versions
Certain IE versions and all other browsers
No IE, just other browsers
in a way that validates? (validator.w3.org/)
I tested these and they're valid HTML.
IMPORTANT: Only IE 5 through 9 support conditional comments.
<!-- 1. IE 5-9 only: -->
<!--<![if IE]>
<link rel="stylesheet" type="text/css" href="ie-5-through-9.css">
<![endif]>-->
<!-- 2. Some IE versions -->
<!--<![if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8-and-9.css">
<![endif]>-->
<!-- 3. Some IE versions, plus all non-IE browsers -->
<!--[if gte IE 8]>-->
<link rel="stylesheet" type="text/css" href="ie-gte8-and-non-ie.css">
<!--<![endif]-->
<!-- 4. All browsers except IE 5-9 -->
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="modern-ie-and-non-ie.css">
<!--<![endif]-->

Conditional comment for !IE breaks for old versions of Firefox

I am in a situation where I need to load one of two stylesheets based on what browser is accessing the page:
if anything but IE then load the "new" stylesheet
if IE >= 9 then load the "new" stylesheet
if IE < 9 then load the old stylesheet
This is the code used to achieve that:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This works well in all modern browsers, and old versions of IE correctly load the old styles. However in old versions of Firefox (3.6) and potentially others, the new css is not loaded and instead --> is printed to the web page. This is because of the line that states !IE - <!--> has to be added, otherwise IE 11 does not load the stylesheet. If I take that out it works properly in Firefox 3.6.
What is the proper way to set up these conditional comments to ensure it will work properly for the various browsers and versions?
I believe the problem lies in one of the <!-- delimiters, specifically the one in your IE9 conditional statement just before its corresponding <![endif]-->. The <!--[if gte IE 9]> comment hasn't been terminated yet, so it's actually invalid to have another <!-- delimiter there since it's not possible to nest comments in HTML. While current versions of Firefox behave as expected, I wouldn't be surprised if this was the reason Firefox 3.6 handled it differently.
If you get rid of that, Firefox 3.6 behaves correctly:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
In fact, you can make your code much DRYer by giving your IE9 conditional statement the <!--> treatment, like so:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This eliminates the extra reference to the "new" stylesheet altogether while still allowing all browsers as well as IE9 to access it. Note that no other version of IE beyond 9 actually supports conditional comments anymore, so you could go further and change gte IE 9 to just IE 9, and it would still work in newer versions of IE (along with other browsers). Of course, you are welcome to keep it that way for the sake of clarity.
On a side note, although I said that it's not valid to have a <!-- sequence within a comment, the <!--> is interpreted as <! followed by the end delimiter --> rather than a <!-- followed by a >, which is why that bit is fine.

IE 8 - 9 Conditional Stylesheet not triggering

I've added the following to get IE8 and IE9 to use my ie8.css but doesn't seem to be using it at all when I emulate being on IE8 or IE9. (Don't have them installed so I am using IE11 developer tools to do this as normal.)
<!--[if !IE]><!-->
<link rel="stylesheet" href="<?php HTTP_HOST; ?>/Styles/global-en.css" type="text/css" media="screen" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="<?php HTTP_HOST; ?>/Styles/ie8.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="<?php HTTP_HOST; ?>/Styles/ie8.css" type="text/css" media="screen" />
<![endif]-->
Live URL: http://bit.ly/1r4dvw5
The emulator of IE11 is abit screwed up, check this post:
http://www.impressivewebs.com/ie11-emulation-conditional-comments/
What i would suggest is to install something like IEtester:
http://www.my-debugbar.com/wiki/IETester/HomePage
Or for a better experience install VM's via http://www.modern.ie

IE8 and lower comment doesn't work

I have some trouble with IE. I have set the following comment in my pages in the head section:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
But IE doesn't detect that css file. Does anyone known the problem?
Thank you.
Casper
You're targetting <= IE7 currently.
Preface:
lte - less than, or equal to
gte - greater than, or equal to
This will target <= IE8
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Which is equivalent to:
[if (gte IE 1) & (lte IE 8)]>

Browser Conditional CSS Stylesheets

Im trying to use conditional stylesheets to target different versions of IE.
I have the following
<!--[if IE 7]>
<link href="_includes/css/ie7.css" rel="stylesheet">
<![endif]-->
<!--[if gte IE 7]>
<link href="_includes/css/ie7.css" rel="stylesheet">
<![endif]-->
<!--[if lte IE 7]>
<link href="_includes/css/ie6.css" rel="stylesheet">
<![endif]-->
Which works okay, but in IE8 it seems to pickup ie6.css and I cant for the life of me figure out why. Has anybody any idea?
Thanks
Ive also used
<!--[if IE 8]>
with no luck
lte means less than or equal to, therefore you probably want:
<!--[if lte IE 6]>
<link href="_includes/css/ie6.css" rel="stylesheet">
<![endif]-->
I'd guess it's possible IE 8 is identifying as IE 7 because it's in compatibility mode. Check your DOCTYPE is correct.
Ahhh I figured it out!
<!--[if IE 6]>