IE vs the rest

[gjh42]

"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).

[JohneeMac]

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.

[jund]

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

[testuser]

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.

[testuser]

HTML Validator Extension
Web Developer Extension

[Goofy]

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

[Goofy]

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?

[Goofy]

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.

[Goofy]

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?

[jund]

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