Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

website not appearing correct on IE 8 but perfect on all other browser


bksbeat

Recommended Posts

My site: www.nntando.com

This was working perfectly until today. Now my site does not appear correct on IE 8 but perfect on other browsers.

The 2 main problems for my site as of today are:

 

 

The right menus displaying my categories are not aligned the same as the other browsers causing overlap of text. They are spaced out too much in IE . Also for some reason, my sub categories (when you placed mouse over wire products for example) which are displayed perfectly for other browsers are not displayed at all for IE.

 

Here are some of the change I made today (If anyone has any insight as these possibly causing this problem in IE please le me know):

 

1. Added this line of code..... #nav li, .nav2 ul li{z-index:100}

to stylesheet.css to allow for my top and right category menus to appear above the images.

 

2. added this to htaccess

 

RewriteCond %{HTTP_HOST} ^nontando.com [NC]

RewriteRule ^(.*)$ http://www.nontando.com/$1 [R=301,L]

 

 

Anyone has any insight that would be appreciated, or if you can just tested on IE and another browser and see what you come up with

 

 

 

I have tested IE & my site on 3 different machines in the house and they are all appearing incorrect?

 

A quick way to know and compare is placing your mouse over "wire products" category in the top menu appearing in red - if a drop down list of sub category appear then it is working else it is not?

 

Thanks, Gary

Link to comment
Share on other sites

2 other things I did today were:

created a favecon.ico - which finally enough appears in the non IE browsers but not in the IE browser?

Also today

Created a robots.txt...that went like this

 

 

User-agent: *

Disallow: /account.php

Disallow: /account_edit.php

Disallow: /account_history.php

Disallow: /account_history_info.php

Disallow: /account_password.php

Disallow: /add_checkout_success.php

Disallow: /address_book.php

Disallow: /address_book_process.php

Disallow: /advanced_search.php

Disallow: /checkout_confirmation.php

Disallow: /checkout_payment.php

Disallow: /checkout_payment_address.php

Disallow: /checkout_process.php

Disallow: /checkout_shipping.php

Disallow: /checkout_shipping_address.php

Disallow: /checkout_success.php

Disallow: /contact_bean.php

Disallow: /cookie_usage.php

Disallow: /create_account.php

Disallow: /create_account_success.php

Disallow: /login.php

Disallow: /password_forgotten.php

Disallow: /popup_image.php

Disallow: /shopping_cart.php

Disallow: /product_reviews_write.php

Link to comment
Share on other sites

You could try adding this:

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8; IE=EmulateIE9">

 

after the charset line in your /includes/template_top.php file.

 

Your site appears more structured when viewed in IE8 Standards mode rather than quirks (which it is currently defaulting to on mine. I assume it's the same on yours too?)

Even IE7 Standards would work but you still get a bit of spacing, though not as much. The above code limits you though. Anyone with IE7 will still see it the way it is now.

You could try:

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

 

but then you've got to add another .css file just for IE7 and IE8 or use some conditional statements in your code.

So create a IE7.css file and put:

 

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

 

Take a look here for helpful info about Internet Explorer document modes.

 

Or use a CSS interpreter like Conditional CSS and use conditional statements in your .css files.

A few options for you to consider. It's all down to your css and which versions of IE your want to support because they all do it differently.

Not enough time in the day. Need a time machine...

 

Would build one, but not enough time. Ironically.

Link to comment
Share on other sites

basically everything works perfectly in other browsers, eg. chrome, firefox.

Those same features (drop down menu, etc) are not working in IE but working perfectly on the other browsers. This is a IE problem and connected with CSS. I have no idea....I have spent hours on this...

Link to comment
Share on other sites

Hi Graham, Are you saying put this is my css file

 

 

<!--[if IE 7]>

<link rel="stylesheet" href="IE7.css" type="text/css" />

<![endif]-->

 

No. Sorry, my bad wording. I meant make a new .css file for IE7 and add the above code to your template_top.php file after your main .css file link. That's an example, obviously. you'd use

 

[color=#880000]<!--[if IE 8]>[/color]

 

and make an IE 8 .css file.

Not enough time in the day. Need a time machine...

 

Would build one, but not enough time. Ironically.

Link to comment
Share on other sites

basically everything works perfectly in other browsers, eg. chrome, firefox.

Those same features (drop down menu, etc) are not working in IE but working perfectly on the other browsers. This is a IE problem and connected with CSS. I have no idea....I have spent hours on this...

Honestly, web development of any kind is usually: 20% code to standards (Chrome, FireFox, Safari, etc.), 75% code for IE bugs, 5% rage. Be prepared to tweak and tweak and tweak if you want IE support below 9. Separate .css files for each version of IE works fine. I prefer conditional css myself as I find it's easier for me, but it's really just preference.

Not enough time in the day. Need a time machine...

 

Would build one, but not enough time. Ironically.

Link to comment
Share on other sites

Graham - Sorry, but I have no idea on how do this.

 

 

I even created a favicon yesterday - That works for Chrome & Firefox but does not work for IE - I have had it with IE - hopefully most of my customers are not using IE anymore...

Link to comment
Share on other sites

Your site appears more structured when viewed in IE8 Standards mode rather than quirks (which it is currently defaulting to on mine. I assume it's the same on yours too?)

Does osC coding require quirks mode, or can it be run under proper standards? I would hope that you could tell browsers to use full standards compliant rendering. In that case, is the <!DOCTYPE> tag malformed or missing? Did something (no matter how trivial) get output before <!DOCTYPE>? View your page source (in your browser) and see what the top of the file looks like.

 

I even created a favicon yesterday - That works for Chrome & Firefox but does not work for IE - I have had it with IE - hopefully most of my customers are not using IE anymore...

Welcome to the club. Unfortunately, unless you have a very specific clientele, you'd better assume that the vast majority of them are on some level of IE... even as old as IE6! Most are probably on IE8 these days. As far as getting IE (or any browser, for that matter) to recognize your new favicon, that varies by browser and version, especially if you've already bookmarked (or even seen) the site. Worst case, you can try removing your site from your bookmarks/favorites, clearing your browser cache and history, loading the page again, and bookmarking it again. Sometimes that will do it, other times only the passage of time (as much as a week) is required before your browser gets around to seeing if the favicon has changed.

Link to comment
Share on other sites

Graham - Sorry, but I have no idea on how do this.

 

 

I even created a favicon yesterday - That works for Chrome & Firefox but does not work for IE - I have had it with IE - hopefully most of my customers are not using IE anymore...

Ok. Firstly, lets try the favicon. Firefox, Chrome, Safari and most others will accept almost any image format for a favicon as long as it's the right name and size.

IE (as far as I know) will only accept .ico files which are different from .bmp, .png or any others. Use http://www.favicon.cc/ to generate a 16x16 favicon.ico file. You can even import images to convert.

Add this above the stylesheet link in /includes/template_top.php so it looks like this:

 

<link rel="shortcut icon" href="http://www.nontando.com/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

 

In IE, the favicon link conflicts with the <base> tag. Try removing or commenting out the <base> tag and seeing what happens.

If nothing else works, kick it.

 

Secondly, I'll have a play with your css later and let you know which way to go with it.

Not enough time in the day. Need a time machine...

 

Would build one, but not enough time. Ironically.

Link to comment
Share on other sites

I have the favicon working on ever browser except for IE. I am not going to worry about it as having it working on all browsers excl. IE is good enough for me. I just created it and copied the image to my root - Worked fin. Did not need to add code.

 

By the way, are you talking about removing <base> tag from css??

 

My concern is getting MY website to operate the same way on IE as it does on the other browsers. This is real concerning to me and the developer that helped me redesign my site is not too helpful at the moment.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...