Firefox Issues

[Visual Designs]

Hello,

My site looks good in ie6 but when I check it with Firefox my logo, categories, and tag line lap vertically. What sould I do?

TIA,

Sam

[bombknex]

Hey Sam,

I usually build for Firefox first and then worry about IE. When I was building my site styling for IE was a big hassle. It's basically twice the work. And while in the process of working on my site IE 7 comes out!

Anyway, this is nothing new to the seasoned developer out there. When developing you always need to design for both browsers (unless your lazy or just don't care). Hopefully sometime way way way way way way in the future this will change but for now it is life.

What your going to have to do when working on your site is switch back and forth between IE and Firefox making sure that changes in one don't mess up the other. Usually what I do is use CSS "hacks" which are ignored by one or more browsers. This enables you to set your style for one browser and then hack around the other one.

For example:

#myDiv {background: #fff; border: 1px solid #000; width: 500px}

...will be read by any browser. We know this. But...

html>body #myDiv {background: #000; border: 1px dotted #000; width: 550px}

...will only be read by Firefox. So here you can style for IE and make sure everything looks ok and then do your work on Firefox.

This may sound a little crazy but it's actually not that bad. Most CSS is rendered the same and I typically only need to make small changes to width and positioning stuff.

There is tons of info on the web regarding IE's negligence to web standards. Your bound to find a lot more info than what I've given you. Also, here is a fav of mine for hacks like this: http://centricle.com/ref/css/filters/

This lets you see each filter or hack and how it renders in browsers. Very helpful.

Good luck!

[Visual Designs]

Hi,

Thanks for the reply and the information. I'll give it a try. To be more specific I realized that firefox was inserting the categories between my Logo (centered) and sales message (tag line centered and below logo). I removed the tag line, not so important, and now I just have some lapping between the bottom of my logo and the categories. I'll keep fiddling with it.

Thanks Again,

Sam

[kuroi]

I agree with bombknex's basic approach ... design for Firefox and them fix the problems in IE6 most of which are well understood, well documented and have multiple threads with Zen Cart specific answers in this forum. The biggest problem is usually knowing how to describe the problem to find the answers already here and usually the easiest way round that is just to show us the site.

In general when it looks like there's a problem the other way round, as is your case, you usually have a problem with your HTML or CSS and IE6 is just ignoring it, whereas Firefox is doing its best to comply with what you told it to do. So it's well worth tracking it down as it probably manifests in Safari, Konquerer, Opera and quite possibly IE7 as well.

[Visual Designs]

Thanks Kuroi,

That all makes sense and I have experienced exactly that. I let IE6 update to IE7 the other day. I disliked it but did discover an embarassing problem with my site that has been there all this time and no one mentioned it. So I rolled it back. Makes me wonder why firefox isn't my default browser. Guess it is now.

Thanks,

Sam