Firefox v.4 CSS issues

Up until now I've never had a problem with Firefox displaying my sites correctly. Now, with Firefox v.4 I'm finding that it's displaying certain elements differently from earlier verisons. For example, look at my instalments page in Firefox v3.6.1:

http://www.silkblooms.co.uk/index.php?main_page=product_info&cPath=1_24&products_id=1652

Then look at it in Firefox v.4

You'll see that there are two issues I've noticed so far:

1. is the header menu bar. div#dropMenu which seems to have developed a bit of a padding problem.

2. is that the .gif files I'm using to hide the unit values are not placed where they're supposed to be. #instalmetnsEnterAmount and #instalmetnsHideMin

This type of problem has always been an issue with different versions of ie and I'e always used browser specific CSS files to deal with ie. However, I've never experienced this in Frirefox. Does anyone know how to tackle this? A way of targeting Firefox v.4 using CSS specific stylesheet?

Or, if I fix the CSS so that it works with Firefox V.4, then is there a way to target all earlier versions of Firefox?

Instead of trying to patch things with bandaids, perhaps fixing the root of the problems would be better - your site has 272 html errors and 270 warnings.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.silkblooms.co.uk%2Findex.php%3Fmain_page%3Dproduct_info%26cPath%3D1_24%26products_id%3D1652

Kim:

Instead of trying to patch things with bandaids, perhaps fixing the root of the problems would be better - your site has 272 html errors and 270 warnings.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.silkblooms.co.uk%2Findex.php%3Fmain_page%3Dproduct_info%26cPath%3D1_24%26products_id%3D1652

..........and eBay.com has 509 Errors, 24 warning(s). But that seems to work just fine. I don't have a lifetime to spend fixing an endless stream of validation errors I'm afraid. Someone once said, 'if it looks right then it is right'. Up until Firefox v.4 it *did *'look' right.

I don't have a lifetime to spend fixing an endless stream of validation errors I'm afraidKim is correct, if you don't invest an hour or so to fix what is obviously wrong (and easily fixed) you will spend a lifetime looking for what is not obviously wrong.

With every browser update comes stricter application of the rules of html and css, if your site does not abide by those rules it will break in that browser.

You will find most of the errors are caused by other errors, you may only have 20 or so to fix and the rest will disappear.

Use the html validator for firefox to track the errors down.
This continuously shows if a page is valid so you will always know when you have introduced invalid code with a new mod or incorrect tags in a product description.

When it works in FF, you can do additional css files to patch the formatting for older versions of IE if needed.

272 html errors and 270 warnings wouldn't take me twenty minutes unfortunately. I'm a florist you see, everything I've done with the site has been self taught from reading this forum and experimenting with things. I don't think I've done a bad job, but I did try to fix the validation errors a whole back and gave up. I couldn't figure out what most of them meant :(

It'd be easier to find a way of cheating, with a browser specific CSS file that handles FF4 or FF1,2 and 3

limelites:

I don't have a lifetime to spend fixing an endless stream of validation errors I'm afraid.So why do you think we do?

They only need to be fixed once. And there's a finite number of them.

If they're endless, it's because you keep creating them. That's a cycle that only you can break.

... and to ask other people to fix stuff you can't be bothered to fix yourself - I'm doubting you'll get many takers on that.

272 html errors and 270 warnings wouldn't take me twenty minutes unfortunatelyYou are not reading the replies people are taking the time to write. You don't have 270 different errors.

I couldn't figure out what most of them meantThe html validator for firefox TELLS you what the error means and usually how to fix it.
You have already spent more time replying to this thread than it would have taken you to fix over half the errors that are flagged.

for example

ERROR:
line 127 column 144 - Error: general entity "langpair" not defined and no default entity...

Cause:
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text.So change

href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8');to

href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8');That's half the errors fixed with bit of educated find-and-replacing.

While this probably wont fix your css issues it will give you more incentive to clear the few errors that are left and people may be more inclined to help you fix them if they do prove to be difficult to find.

kuroi:

So why do you think we do?

They only need to be fixed once. And there's a finite number of them.

If they're endless, it's because you keep creating them. That's a cycle that only you can break.

... and to ask other people to fix stuff you can't be bothered to fix yourself - I'm doubting you'll get many takers on that.

Where did I ask anyone to fix my validation errors? I think you'll find I didn't ask that, I merely stated that I don't have time to fix them. I didn't ask you to fix them.

If you read the OP and my subsequent posts here, you'll see that my question is about Firefox specific styling, not validation errors. It was Kim who brought up validation errors.

At the moment I don't have time to fix them. I'm hoping to cheat a little by introducing a browser specific workaround for the time being.

OK, I'll have a blast at fixing them. I didn't realise that the 220 errors weren't individual errors. The & one was the one that made the throw in the towel last time. I have dozens and dozens of files with the & in them, so it was taking too long. Extremely busy with the business you see.... Any takers in the old freelance side wanna take this on?

limelites:

Where did I ask anyone to fix my validation errors? I think you'll find I didn't ask that, I merely stated that I don't have time to fix them. I didn't ask you to fix them.

If you read the OP and my subsequent posts here, you'll see that my question is about Firefox specific styling, not validation errors. It was Kim who brought up validation errors.The problem is almost certainly linked to one of the places where your site structure is broken and the the validation errors point to those. That's why Kim raised them and Torvista and I keep banging on about them.

Even in the unlikely event that it's not caused by them directly, they obscure any other root cause.

OK, I'll gave a bash at them, if I can find the time.... Is there a good site that explains these errors, or am I best to just Google each one?

Is there a good site that explains these errors**
INSTALL THE ADDON FOR FIREFOX**

please!

Kim:

Instead of trying to patch things with bandaids, perhaps fixing the root of the problems would be better - your site has 272 html errors and 270 warnings.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.silkblooms.co.uk%2Findex.php%3Fmain_page%3Dproduct_info%26cPath%3D1_24%26products_id%3D1652

OK, this is a really weird one! I installed the add on and started working through the errors before realising how mammoth a task it is. So, I put a job out on a freelance site fo bids to cure them and I've had a couple of reasonable offers. Before I committed to anything, I thought I'd explore the option of having the full site re-designed professionally, so I nipped along to a friends to ask him about just completely overhauling my silkblooms website from scratch. He's a professional designer, works for a design company and knows website design inside out. He doesn't reckon that validation errors could ever cause CSS layout problems.

OK, but it does say I. Try it then and you'll see says I. So, he fired up his screen and went to my site in Firefox v.4. To my surprise, it looks exactly the way it's supposed to on his screen!! Weird!! How can that be? It's all messed up on both of my new 23" touchscreen monitors. Couldn't get it to replicate any of the layout problems on either of his two screens.

So, I upgraded to FF4 on my home pc with an old Samsung Syncmaster, 24" and low and behold. The site looks exactly like it's supposed to!! Tried it again on my laptops and hey presto, nothing wrong with it at all.

So, the problem not what I thought. The problem mucst surely lie with my new screens! So, let me change my OP question completely and ask, have you ever seen a 23" touchscreen monitor that causes weird CSS layout issues??

Glad to hear the pressures off you. Not all versions of Firefox are the same. For some platforms the package is tweaked slightly. For example there's a Mozilla linux version, but Canoncial tweak that slightly to optimise it for Ubuntu. Do you have a special version that supports touchscreen mionitors (e.g. making buttons or links bigger as fingers are less precise than mice)?

limelites:

... He's a professional designer, works for a design company and knows website design inside out. He doesn't reckon that validation errors could ever cause CSS layout problems ....Validation errors don't cause problems, they're symptoms that point you towards problems.

The causes of validation errors come in different types. Some browsers are very used top and cope with well so are unlikely to result in any issues other than the validation error. The only benefit in clearing these is that they obscure more serious issues.

The more serious issues are when the XHTML structure of the page is broken. These can and often do cause layout problems and nowadays are the primary cause of cross-browser inconsistencies as different browsers try (or fail) to handle them in different ways.

However, professional designers are probably seeing this less and less as nowadays most will get the structure right from the outset, as Zen Cart does, and keep it that way - so they're disproportionately prevalent in environments such as this where non-professional users post problems.

Thanks all with persisting with this issue and I agree that validation errors must be addressed early. I had similar problems with a recent upgrade of FF, but which magically disappeared following an automatic update/patch from FF a few days later. Sometimes it is just a matter of remaining vigilant and doing nothing for a few days.

Cheers