Wow somebody should sticky this or lift out the explaination by duncanad and put it in the tutorials.
Wow somebody should sticky this or lift out the explaination by duncanad and put it in the tutorials.
Mike
GeekHost - Zen Cart Certified & PCI Compliant Hosting
The Zen Cart Forum...Better than a monitor covered with post-it notes!
Mafiasam,
I had noticed that you had not used any * html hacks in your CSS but however you are targetting your IE6 fixes the principle is the same. What you need to do is write compliant CSS to produce your desired layout in compliant browsers such as Firefox and place this in your main 'stylesheet.css' file. Once your site is looking as you want it to you then address the layout errors produced by IE by placing any specific CSS required to make IE behave itself in your 'ie_stylesheet.css' file.
Regards,
Alan
Last edited by duncanad; 26 Oct 2006 at 10:00 AM.
Grantc,
Well spotted - although I was nearl blearie-eyed trying to spot the difference. Just in case anyone else can't spot it there is a space between IE and the following apostrophe in the correct version. The link to IE versioned stylesheets should be as follows:
There should be a space between IE and the version number in the conditional statement otherwise it won't work hence the need for the space in the code. My apologies to anyone who has suffered grief as a result of this error.Code:<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/ie6_stylesheet.css" /> <![endif]-->
If I was picky I would point out that you have forgotten the space in your 'whole chunk' but as I'm not I won't ;-)
A rare example of Weegies and Burgers co-operating!
Regards,
Alan
Alan's approach has now been packaged up and made available as a downloadable module.
Kuroi Web Design and Development | Twitter
(Questions answered in the forum only - so that any forum member can benefit - not by personal message)
Betty,
My post here:
http://www.zen-cart.com/forum/showpo...93&postcount=9
explains why this is necessary.
As to when it is necessary and which bits of CSS need to be scripted specifically for Internet Explorer the answer is, depending on your template layout, perhaps never. But if you need to you will know if you test your site properly.
The important thing is that you write standards compliant CSS in your main stylesheet and test your site in as many of the popular browsers as you can. Personally I test in IE6, IE7, Firefox, Netscape and Opera. If your site looks as it should in all these browsers you don't have a problem. The browsers you are most likely to have a problem with are IE6 and IE7 - and don't assume because it works in IE6 it will work in IE7 - it aint necessarily so.
If you find that there is a problem in IE (most likely the peek-a-boo bug) then you need to identify the CSS that IE doesn't understand properly and write some CSS that it does. It is this IE specific CSS (and only this CSS) that needs to be placed in your ie_stylesheet. Browsers read your stylesheets in order so your main stylesheet will be read first and then IE will read the ie_stylsheet (other browsers will ignore it). Browsers follow the last instruction given so IE will follow the ie_stylesheet where this contradicts anything in the main stylesheet.
Hope this helps
Alan
Thank you for the excellent explanation Alan.
What my problem is that I only know how to make the css complaint with IE 6 and 7. I do look at the page in Firefox, but when it looks awful, I have no idea why.
So I guess I was hoping if I could find out what is specific to IE 6 and 7, then I would know what it is that "breaks" the appearance of the page in Firefox.
I have the developer tools and several other add-ons in firefox, but thus far either I haven't figured out how to use them properly or they don't help with the issues in the css. I don't know which it is.
thank you again,
betty
Have you got an URL where I can see an example of a page that is OK in IE and broken in Firefox?
To use Firefox to validate code open the page you wish to check in Firefox:
Click on 'Tools' on the Developer's Toolbar.
Click on 'Validate HTML' to check your HTML. Sort any errors reported before checking anything else.
Click on 'Validate CSS' to check your CSS. Sort any errors reported.
Click on 'Validate WAI' to check accessibility. Sort any errors reported.
If you don't understand what the errors are - look them up. A great tool for learning as well as picking up small errors that might otherwise be missed.
Since Firefox is the most compliant browser if you get your page to look as it should in Firefox, with no errors in HTML or CSS, it should pretty much look OK in any browser - with the exception of some quirky issues with IE. Which is where the IE_stylesheet comes in.
Regards,
Alan
I definitely have a storefront that looks ok in IE7 and looks absolutely horrible in Firefox. A client I've done a few other stores for basically dared me to take a template he bought and make a Zencart store from it.
I thought I was pretty cocky in that I got it to show up ok in IE, however when I looked at in in Firefox, I gave up.
I still have it online:
http://www.forwardmotionconcepts.com/nusoul/index.php
thank you,
betty
Betty,
I've had a look at your page in Firefox and yes the layout is not as you would expect.
Open this page in Firefox. Now click 'Tools' and 'Validate HTML' on the Firefox Developer's Toolbar. There are four HTML errors. My guess is if you fix these errors things will look a whole lot better in Firefox and will still look OK in IE. For all the criticisms of IE as being one of the least standards compliant browsers it can sometimes be one of the most tolerant of HTML errors which may be why in IE your page looks OK but in Firefox it doesn't.
Alan
Bookmarks