14 replies to this topic

[discxpress]

Hello,

I see many on these forums are having issues with internet explorer not displaying their websites properly. After doing some Googling, I found a blog that may help alleviate some IE woes. You will have to invest a little extra time when tweaking your site's look and feel. The blog is located here: http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/.

The author suggests using a separate stylesheet for IE and using special html tags to target only IE browsers or all browsers except IE. The reasons he gives for using separate stylesheets (1) is to prevent website developers from damaging the CSS code and (2) IE doesn't use the same standard of CSS code as the other browsers. I ask myself; Why does Microsoft insist to lead from behind on this?

Is this worth the trouble. you ask? Yes, if a decent amount of visitors land on your site via IE. While Chrome, FF and Opera are becoming increasingly popular, IE remains the most popular. Before making any changes, would suggest studying your analytical data first. Until Microsoft decides to upgrade their CSS standards, this may be a viable solution for some OSC shop owners.

Also, you may want to encourage your visitors to view your website in another browser as mentioned by Xpajun in another thread. That would be good but, how? That would be a good contribution. Offer visitors an incentive for using a certain browser.

Let us know if anyone have other suggestions.

Thanks for reading.

[MrPhil]

I wouldn't say that IE is the "most popular". It happens to be the "most used", simply because its use is not sufficiently painful for most people to prod them into finding something else (or their employer forbids the installation of other browsers at work). IE being the "most popular" like saying cockroaches are the "most popular" vermin [img]http://forums.oscommerce.com//public/style_emoticons/default/w00t.gif[/img] .

That said, be careful to test on a number of different IE levels (6, 7, 8, and probably 9) simply because they all behave differently towards Web standards. If you have custom CSS and related HTML/JS for IE, you'll need to pay attention to the possibility of separate CSS files for IE6, IE7, etc.

Edited by MrPhil, 17 November 2011, 01:31.

[discxpress]

Mr. Phil,

Thanks for your reply. I think you just elaborated on what the author was suggesting. He did show that you can target different versions of IE. Although he didn't go in detail on either. I didn't think of comparing IE to cockroaches. LOL.

When you say different versions of IE behave differently towards Web Standards leaves me believing that IE's development is not comprehensive.

Instead of testing IE, I would rather install a mod that would detect a visitors' browser and would suggest viewing this site with Chrome or FF.

Thanks for reading.

[MrPhil]

Early in IE's life, MS decided that they would set their own Web standards for how pages looked and behaved, and gave the finger to existing standards. They got plenty beaten up for doing that, and ever since have been inching closer to being actually standards-compliant.

I have seen HTML/JS/CSS guides suggesting that rather than trying to figure out just what browser and version a visitor is using, that it's better to check what capabilities the browser in question has, and tailor your HTML, JS, and CSS on a case-by-case basis. This would then properly handle browsers that claim to be some other, better known browser, but don't match it exactly.

There used to be a lot of sites that said "Best viewed in Internet Explorer" (actually, the page editors used were tuned for IE display). You'll notice that you rarely see such statements any more. Such pages are highly criticized, no matter which browser they suggest viewing with. I would advise avoiding such things and just do the best you can with cross-browser methods and tools.

[discxpress]

Thanks the for the advice. I was about to make a huge mistake. In IE, my site is not centered, the text is too big , the header doesn't display correctly and the categories box isn't the right color. Can you point me in the right direction?


Thanks.

[MrPhil]

Round up the usual suspects. Exactly what version of osC? What modifications/add-ons/templates/themes/etc. have been applied? What versions of IE are showing what specific problems? A link to the site so we can look at it?

[discxpress]

Thanks for the reply. I'm running version 2.3.1. The main revision that I installed was redesign from an ebook by Gary Burton of Club OSC. A new stylesheet was put in place. However the main one is still in tact because the new stylesheet targeted just focal points of the new design. Mainly all versions of IE from 6+ is showing the problems.

The address to mysite. if you need to look at both stylesheets, let me know.


Thanks for your help.

[Juto]

Try this in template_top:


<!--Make IE browsers CSS 2.1 compatible-->
<meta http-equiv="X-UA-Compatible" content="IE=8" > <!-- IE8 mode -->
<!--[if lte IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<![endif]-->
Add it just before the <title> -tag

Sara

[MrPhil]

When loading the site on IE6, I get a couple of JavaScript errors (lines 230 and 98) that you might want to investigate. I also see a stray # at the top of the page, coming from:

# <link rel="stylesheet" type="text/css" href="[url="view-source:http://www.discxpress.com/bm_categories_unsorted_lists.css"]bm_categories_unsorted_lists.css[/url]" />

Did someone try to comment out a line, or is something else going on? I would get these things cleaned up before trying to go any farther.

Between IE6 and FF8, the only major differences I see are
1) the "Shopping Carts items: 0" block is to the right on FF and below (making the header taller) in IE
2) the Categories block on the left is styled to match the rest of the page in FF, but is unstyled in IE (possibly related to the '#' seen above)

[discxpress]

@MrPhil, I placed the Comment there and forgot to remove it. Also, on which file(s) the javascript errors are referring to?

@Juto, Thanks. I will give those suggestions a try.


Thanks your help

[discxpress]

MrPhil, I forgot to mention in my last post that i need to recheck my redesign which creates a secondary stylesheet and makes extensive changes to header.php.

If I remember correctly I used IE when performing the redesign and it appeared as it should. So it's something I've done wrong.

Juto, I believe your tags will work but first I must correct the errors MrPhil has discovered

Thanks again

[MrPhil]

# is not normally used as a comment, but will usually work (// is recommended for comment to end of line). Anyway, it appears that you placed it outside of a PHP block (not within <?php ... ?> tags).

Unfortunately, I've never found a clean way to map a Javascript line number to a specific file. Sometimes I've been able to laboriously count up, in order of appearance, in-line <script> code and embedded .js files to find where the line is. Some day I may go exploring FireBug (Firefox browser) to see if it can tell me. Maybe IE has it built in, since it's usually IE that's complaining?

If you have good karma and have lived a blameless life, maybe fixing the JS errors will also fix the IE display problems you're seeing.

[BryceJr]

These might help troubleshoot your IE issues.

1. IE Tester

--and--

2. Debug Bar

[discxpress]

@BryceJr, Thanks for the 2 links. I loaded my site in IE Tester and the two javascript errors discovered by MrPhil above was presented. They were:

Object doesn't support property or method 'button' on line 230 and

Object doesn't support property or method 'coinslider' on line 98.

Now I gotta find the areas where the trouble code exists.

Thanks

[cm27]

Here are a few things I have added to my site I hope you guys can make this work on yours like I did [img]http://forums.oscommerce.com//public/style_emoticons/default/thumbsup.gif[/img]

IE=9
#   {position:relative; left:-350px;border-top:1px solid #444;}
 
 
 
IE-7
 
#   {position:relative; top:-40px;}
.   {padding-left:10px;}
# {position:relative; top:20px; z-index:30;}
 
IE-6
 
#  {position:relative;top:100px;}
#  {position:relative; top:-50px;}
.   {padding-left:10px;}

Fill with your div I know it works Everyone site is different so you need to work it in Or maybe A SUPPORT MOD may be able to make it standard ..
or you can make different .css files too
Good luck

Edited by cm27, 26 November 2011, 16:03.