Solved

Adding a style sheet to affect only IE8

Posted on 2013-11-22
30
319 Views
Last Modified: 2013-11-26
Hello I want to add a stylesheet that will only affect IE8 browsers.

What's the best way to do that.

I know I need to add that to my (Joomla) template.  But please include the "sniffers" that detect IE8.

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 15
  • 8
  • 6
  • +1
30 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39670109
there are a couple of ways of doing thst:

if you want to include a whole separate stylesheet just for IE8, put this in the head of your document:

<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

Open in new window


ref: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/


if you want to include IE specific styles in your main style sheet, you can add some conditionals to the top of your file like this:


<!DOCTYPE HTML>

<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en" class="nojs" > <!--<![endif]-->

Open in new window


and then in your css, preface the selector with .ie8:

.ie8 .myClass{
   color:red;
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39670159
Hi  kozaiwaniec.   Thanks for helping!

I will go with a separate stylesheet.  However I need some clarification on the below example in the link you included:  

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]-->

I was only planning to target 8, because my client has IE8 machines at their office.  But should I go ahead and target 9 too -- does IE9 have similar css issues??

On a side note, are there reliable online IE8 (and ie9) emulators???

Thanks!

Rowby
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 125 total points
ID: 39670245
well, the thing about any version of IE, is that it sucks :)

they are all different and have different issues... that said, they do get get better with higher versions.

My recommendation is: if you're writing a site where most of your users use one specific platform, then design/write your site for that platform. Anything IE8 can do, all the other browsers can do. So I would NOT include the conditional css file at all. just write for IE8. If it works in IE8, it will work everywhere else.

I use browserstack.com for testing, but there is a fee.

If you're using some newer version of IE, you can get IETester for free to test other versions. It's been a while since I used it, and I remember having some issues with it, but it's probably come a long way since then.


And after all that, if you still have specific issues arising out of your code, post here, and more likely than not, there will be a solution that makes things work across the different browsers w/o conditionals. The one thing I would NOT do is this: write some fancy pants shenanigans that zoom around the place in the latest version of Chrome, and then expect to polyfill for IE8.

hope that helps
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 125 total points
ID: 39670543
If you are going to be using any CSS3/HTML5 you can check support levels and often get the good workarounds at: http://html5please.com/

IE is not the only browser with issues, Chrome has actually been a little wonky since about version 22, because they push out stuff based on a timetable whether it works correct to standard or not, and many of the -webkit hacks don't implement to the final W3C recommendations.  Google does a lot of smoke and mirrors nonsense, but in the end Chrome is only marginally better than IE10.

Cd&
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39670680
Hi COBOLdinosaur.  I'll be checking your link.

kozaiwaniec, most of the site seems to display okay in ie8. It's Joomla and the core compoents seem to display okay. It's just this third party calendar at this link:

dev site

In the meantime I set up an ie stylesheet.  ie8-and-down.css

Here's the total css I have on the style  
td.extcal_daycell a, td.extcal_todaycell a, .extcal_sundaycell a, .extcal_othermonth {
    font-family: TallFilmsExpandedRegular,Arial,sans-serif !important;
    font-size: 20px !important;
    height: 22!important;
    vertical-align: middle;
	padding: 1px;
}
#extcal_minical .extcal_daycell, #extcal_minical .extcal_todaycell, #extcal_minical .extcal_sundaycell, #extcal_minical .extcal_othermonth {
    background-position: center center;
    background-repeat: no-repeat;
    color: #555555;
    font-family: "Trebuchet MS",Verdana,Arial,"Microsoft Sans Serif";
    font-size: 128px;
    font-style: normal;
    font-weight: bold;
    padding: 3px 0;
    text-decoration: none;
}

Open in new window


At the moment I am focusing on IE8 because that's the browser they have at their office.  Also they are using XP. :)

Attached is a cell phone photo they took of the calendar at ie8.  Interestingly I don't see that in the http://www.browserstack.com for ie8.   It looks fine in ie8 at browserstack.  However I also downloaded IE Tester and when I select ie7 it looks like the photo.  So maybe their XP is causing the IE8 to look like IE7.

So I guess, what I am asking is how to fix what we see in the image.  How the numbers are being cut off at the bottom -- more clearly seen in the Date "22".  Looks like there is too much padding on the top, etc etc.  Basically I need the dates in IE7/8 to look more like the Firefox / Chrome versions.    

I will stop by their office on Tuesday to have a face to face test of the page in their version of IE8.     But in the meantime maybe we can fix it before then via Experts-Exchange.
calendar-for-ie.jpg
0
 
LVL 58

Expert Comment

by:Gary
ID: 39670700
Are they maybe running in compatibility/quirks mode in their browser
I cannot replicate it or find a reason for the misalignment (other than in IE7 mode)
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39670799
Yes I bet they are running it in compatibility mode.  :)  I'll see on Tuesday when I go in.

A work around is I'll make the font a little smaller in my ie8 stylesheet.  And if I can trim some of the head padding and add a couple of pixels of padding below the number -- that might help.
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39670829
Add this to your page to force the browser (IE that is) to use the latest version and not fall into quirks mode
<meta http-equiv="X-UA-Compatible" content="IE=edge">
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671405
Hi Gary123 -- so that will override that compatibility mode?   That sounds exactly what I need here!!!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39671413
Yep
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671420
Perfecto.    I will put it on the joomla template and will be able to test it on Monday.

I was not looking forward to having to deal with IE7 headaches.

<link removed>


Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39671422
rowby

Please don't post links to SO - they are against EE's Terms of Use
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671425
Oh.  Ok.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671576
Hi, Gary, COBOLdinosaur and kozaiwaniec,

I added

<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Right before the close of the header.

I guess http://www.browserstack.com/ does not have an option to show the results of IE8 with Compatibility mode turned on -- so I can test the using the IE=edge meta tag.

IF that is the case -- then I will have to wait until Monday to call their office to see if it is looking okay now on their IE with Compatibility mode turned on.

Unless, of course there is a way to test that before Monday....??

 http://dev6.music.ucla.edu

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39671588
It should be right after your opening HEAD tag i.e. the very first meta tag.

Looks fine to me in IE8, still not working in IE7 but that's to be expected.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671619
I went in and moved it to right after the initial <head/>     I think joomla inserted some code, but please take a look and let me know if it is close enough to being "right after" <head/>

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39671628
Need to move <link href="/" rel="canonical" />
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671643
It looks like the link href="/" rel="canonical" /> is being generated on the fly by some Joomla component.  I will dig into this and see how to move or delete it.

Rowby
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39671714
you can view in compatibility view in browserstack. You have to open developer tools in IE8. Then you can select compatibility view. It looks like the numbers on the calendar are clipped at the bottom when set to compatibility.

However, when you just open in IE8, without changing the view, it looks fine.

There is a javascript error caused by maximenuckmobile.js. but it doesn't appear to have any detrimental effect. still. it sucks to have js errors pop up.

here's a screen shot of IE8:
IE8
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671724
I was able to remove the function that added the canonical code.  (FYI it was a setting on SH404sef, a 3rd party Joomla seo component.)

Now the source of the page reads like this  (I assume that it is okay???)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head><meta http-equiv="X-UA-Compatible" content="IE=edge">
      <base href="http://dev6.music.ucla.edu/" />
0
 
LVL 58

Expert Comment

by:Gary
ID: 39671725
Yep that's fine.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671771
HI kozaiwaniec
Then you can select compatibility view. It looks like the numbers on the calendar are clipped at the bottom when set to compatibility.
Thanks for the compatibility mode tip on browserstack.com

Now that I added the metatag <head><meta http-equiv="X-UA-Compatible" content="IE=edge">   and look at it in browserstack.com --IE8 selecting Compatibility mode -- the calendar renders correctly.   Which is what I want it to do -- even if the website visitor had selected Ie's infamous "Compatibility mode".  

So in essence the metatag has "overruled" the website visitor's setting and is delivering the page the way I want it to.

Could you re-check the page in browserstack.com and double check to see that in IE8, even with Compatibility mode selected that the numbers in the Calendar are no longer clipped on the bottom."

Whew!  Testing a site can get a bit tedious -- but it's great to have pros at EE steering me in the right direction.

BTW this is my 1006th question on EE since I joined way back in 1997 with my first question "Unwanted mouse grouping" :)

Rowby
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39671821
looks like the calendar numbers are no longer clipped even when I change to compatibility mode
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39671836
Great!   Thanks,  kozaiwaniec, for double checking.  On Monday I will have the client check on her machine and then we are home free!

Also, I was able to remove the javascript error in IE8

Rowby
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39671921
i noticed that . great :)
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39673597
While I await Monday's test on an IE 8 computer in compatibilty mode, I found this snippet.  Apparently this method only shows the "snippet" to IE8 pages in compatibility mode -- not all browsers.

The fix is simple enough but obviously it is not as easy as dropping in a line of HTML. The new fix will be implemented server side and to make this fix complete we need to

Fix the page validation – This is achieved by simply removing the tag
Rendering speed – Instead of waiting for the browser to see the tag and then change modes we will send the correct mode upfront as a response header
Make sure that we only show the fix for Internet Explorer – We will just use some server side browser detection and only send it to IE
PHP

To add the header in PHP we can just add this to our page

if (isset($_SERVER['HTTP_USER_AGENT']) &amp;&amp;
    (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
        header('X-UA-Compatible: IE=edge,chrome=1');


Or you could add it to your .htaccess file like so

<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>

You can change the files that are matched and doing it this way will mean the header isn’t set for every resource (images / javascript / css). That should be everything to make sure your site is running good and you are following best practices for a PHP site.

Any comments on the above snippet?

Thanks

Rowby
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39673633
hmmm . overkill?

get some sleep. :)
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39673636
OK!   Back to sleep!  Hee hee!

:)
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39678560
Thanks.  IT worked perfectly in clients IE8 with compatibility mode.

Lots of useful info in this question. WIsh I had 100000 points to spread out!

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39678578
I wish points bought beer but there ya go
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Joomla main HTML page 4 47
logo getting cutoff on ipad 30 87
Paper tearing animation 6 43
modify h2 4 20
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now