IE vs the rest

My site looks good in IE. But when i check the site with for example Firefox it looks crappy.

Is there some kind of tool i can use to look for not-IE-compatible code?
I want my site to look nice in as many browsers as possible.

Grtz

Most designers design a website to the most compliant browser first.....Firefox.....and then add the css hacks for IE.

do you have a url?

As Mike suggests, you should design in Firefox and then fix for IE, and to help you do that, there is an excellent module available here which allows you to easily utilise a separate stylesheet for IE or even different versions of IE.

This is one of those tiny improvements to ZC that saves hours and hours of time (like the Improved Attributes Controller).

Until very recently i have been designing sites as far back as IE5.

On average out of my 20 or so sites i see less than 1% of users still using the horrible outdated browser they call Internet Explorer 5.

1% is a small enough figure to count them out of my target audience. It certainly saves a lot of time as IE5 renders very badly.

IE6 still has a huge hold of the market with IE7 increasing steadily.

As mentioned though its better to design your site in FireFox or Opera ( Fully compliant browsers) then work back from there into the versions of IE.

Ok thx for input.

So the best for me is to start designing from Firefox/opera point of view and then use seperate stylesheets for IE?

Here s the site im talking about: http://www.specialmemories.nl/shop/

I m willing to learn so keep posting comments

Goofy:

So the best for me is to start designing from Firefox/opera point of view and then use seperate stylesheets for IE?

Yeah thats exactly how you do it

JohneeMac:

Yeah thats exactly how you do it

Ok, thx

Do you guys have some general css tips, i mean maybe some css code which always looks bad in firefox/opera and which you should better not use

...wouldn't life be grand if it was that easy. Each of the IE browsers has it's own quirks and there isn't a magic bullet.

Kim:

...wouldn't life be grand if it was that easy. Each of the IE browsers has it's own quirks and there isn't a magic bullet.

hehe ok thx im just a newbie..

With the suggestion I made, other browsers completely ignore the IE specific stylesheet, but IE doesn't ignore the other stylesheets. So you create the site in Firefox THEN check through it in IE adding ONLY the solutions to the IE quirks.

You can even have something like:

#myclassid{position: relative; top: 20px;}
```in the main stylesheet which will be acted on by all browsers and 

#myclassid{position: relative;left: 10px;}

"css code which always looks bad in firefox/opera"

This translates to "incorrectly written CSS", and the cure for that is to learn CSS thoroughly. Look at w3schools and other CSS tutorials online, or buy a good book (I recommend "HTML Utopia: Designing Without Tables Using CSS" from Sitepoint).

Bookwise id go with CSS Mastery or Eric Meyer More CSS book. The best way to learn is to actually work on real world sites. Its not easy if your going to do things the right way but well worth learning if your serious about it.

Sounds like you are having a lot of fun... with CSS. At least you have the guts to ask for help and push the envelope at the same time.

As mentioned to you, there are many great books regarding style sheets. One of the better books is ‘CSS Cookbook’. It is part of the O'REILLY series... (the ones with the animals on the cover). This O'REILLY book is a little unique in that it has been 'modularized.' It truly provides 'recipes' in the form of successful solutions for the simplest to the really gnarly CSS problems. As you probably well understand - 'cookbooks' of any kind consist of carefully and cleverly built recipes - and as I stated before - these CSS recipes are built for folks like us - we want success for our customers - and that means web sites that are great functionally as well as have great looks... right out of the 'oven.'

The folks here at ZEN CART have done a remarkable job of developing and managing the style sheets... they have employed almost every conceivable hack and work around to solve the nasty incompatible issues that occur between browsers. Your question included Opera - Opera is an exceptionally important 'tool' to have on your desk top. Not many folks use Opera as their browser - but it really checks your CSS to let you know if you are not meeting the W3C specs.

Regarding the W3C - that is another place we all visit frequently, because we can get the latest adventures in this world of the web... you too should get on that bandwagon as well (smile).
Here is a valuable W3C link regarding CSS: http://jigsaw.w3.org/css-validator/

Have fun...

jund

It's definitely worth the time to get in and mingle around, see what does what and where. I wouldn't take your site down for the time being, just start with a fresh install and go from there.

Also It's definitely helpful, when you start using firefox to install extensions. These will help you in your learning process. Go to google, and search for Web Developer extensions for Firefox, as well as the Tidy HTML Validator.

These tools save time, and help you better understand how the layout functions work.

I use HTML Validator 0.8.3.9 and Web Developer 1.1.3.

HTML Validator Extension
Web Developer Extension

Thanks for feedback! I will use the tools and tips you recommend in order to get a better understanding of CSS.

Little question..

For now i have a problem with right and left columns:
(see http://www.specialmemories.nl/shop/) I use the margin in following code:

.leftBoxContainer, .rightBoxContainer {
padding: 0px;
margin: 5px;
border: 0px;
}

I f u view page in IE its ok u get the white space well positioned.
In Firefox the white space area is crappy, its even floating about the border.

Can u guys give me a hint how to deal with padding in this case?

Ok, solved above question

I used:

#navColumnOneWrapper, #navColumnTwoWrapper {
margin: 0px;
padding-right: 5px;
padding-left: 5px;
}

As far as i can see its working ok.

hmzz, as i look in firefox to the right column headings they are bold but left column headings aren't.

In IE both left and right column headings are bold. I thought i specified both as bold:

.leftBoxHeading, .rightBoxHeading {
font-size: 1.4em;
font-weight: bold;
text-align: left;
margin-top: 0.5em;
padding: 0px;
color: #FF479D;
background-color: #FECAE3;
}

any comments?

In the 'Cookbook' it is recommended to use em instead of px - primarily because px is relative to the resolution the customer is using - and we all know the customer is in charge of what they see (smile).
em is relative and works in most browsers... because it is a percentage value.

To be safe it is best to use em.
Note Goofy uses em.

Here is what my CSS looks like for the margins...

#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
}

SUMMARY:
em covers the majority of browsers regardless of version - it is a way of managing 'padding' and it is in percentage instead of pixels. Pixels are 'fixed' controlled by the viewers's resolution - whereas percentage is 'proportional' regardless of the viewer's settings.

Experiment with it -

jund