IE vs. Firefox – format and photo issue!

You’ve got some validation errors that could impact on the layout across different browsers. That said, I viewed the site in Firefox 3 and IE 7 and couldn’t see any notable differences.

I suspect that the IE6 problems are caused by the CSS approach you’ve taken. You’ve used some absolute positioning and z-indexes – neither of which IE6 handles well. And it’s box model is pretty badly broken – which means that it mis-calculates block elements of known dimensions, margin and padding. All in all, no one will be sorry when it finally disappears.

In the meantime, I think you’re going to have to deal with IE6’s broken CSS handling by serving it an additional stylesheet by means of a conditional comment. There’s a very good introductory article on using conditional comments to target specific versions of IE at https://www.elated.com/articles/internet-explorer-conditional-comments/.

For testing designs across multiple versions of IE, I’d recommend getting hold of the IETester:

https://www.my-debugbar.com/wiki/IETester/HomePage

Thank you so much for your reply. I understand what you’re saying about serving an additional stylesheet for IE6, but because I didn’t design the template originally I’m not exactly sure how to work around the absolute positioning/z-indexes (mostly because I don’t know what they are and what an alternative would be); I am going to start researching these terms now, but if anyone has some shortcuts or snippets of code for the CSS I would be grateful.

Again, thank you so much for taking the time to point me in the right direction, it is appreciated!

As esmi said, you have some validation errors. Fixing those just might clear up the problem. I’d like to help more but your site looks just fine in both FF and IE for me so I can’t see the issue to know how to fix it. Sorry :\

Thank you, I will start with the validation – at least I sort of know how to deal with those!

On the plus side, I’m so glad the site is pretty for a few users! ??

It looks awesome ??

Okay, I totally spoke too soon. Seems I don’t know how to validate – in wordpress, at least. ??

I can’t figure out how to address the errors I’m seeing when I view the CSS and the templates themselves – don’t know enough about CSS and PHP, I suppose, to recognize something amiss.

Would someone mind describing how they would go about addressing some of the validation errors found? Y

Just plug in your web address and these validators will tell what is wrong with your code and where.

https://validator.w3.org/

https://jigsaw.w3.org/css-validator/

Yes, I see how to perform the validation itself. I see where in the page source code things have gone awry…but how to correct that using WordPress, so that new source code created is not invalid? I have tried altering the inserted code (mostly placing images, etc.) in my individual page posts – no luck – and as I’m learning about CSS and PHP, if the problem is in my stylesheet or templates, I’m not exactly good at identifying it. So validation has not been the easier fix of the two.

Creating a new stylesheet and using conditional comments is pretty advanced for me; I need help with every bit of code. I don’t know simple things like where to place code snippets, what to name files, where in the original stylesheet to place the code to reference the new stylesheet…the list goes on. But I think that this is basically the problem. The issues you describe, esmi, such as absolute positioning and z-indexing, are known problems with IE6 and can cause the sorts of issues that I’m experiencing – all the solutions to be found just assume a basic understanding that I lack. I haven’t given up hope, I am still trying to learn all that I can…

To address the issue momentarily, I have put a note on my site that says “Best viewed with FF and IE8”! An ounce of prevention is worth a pound of cure, right?

I appreciate all the help that’s been offered, and am doing all the research I can to address these issues, but ultimately…I need a lot of hand-holding, which I know can be a drag in a forum like this. ??

Actually the site works fine in IE7 and Opera 9, so you could extend that “Best viewed…” a great deal further. Or turn it around and suggest that IE6 users upgrade. After all, IE6 is pretty long in the tooth now and shouldn’t really be used outside of a intranet environment.

And if it helps any, absolute positioning and z-indexing in IE6 used to give me severe headaches and I’m a professional web developer!

With regard to the validation errors, with WordPress it’s all about locating the errors in the page source and then identifying where the error is coming from – the template file or the post/page content. In a decent theme, most errors will probably be in the post/page content. The Visual Editor can even cause a few.

Having said that, I’ve just re-checked your front page and you only have 1 error (a ‘target=”top”‘ on the Theatre Library Association link). So – way to go you!