Comments on: How to fix a website and make it compatible in firefox AND IE?

Question: How to fix a website and make it compatible in firefox AND IE?

bigcheesegump — Fri, 29 Aug 2008 18:09:18 -0800

I need some help with a CSS/HTML issue as well as an Internet Explorer issue.

I created an online portfolio and have been trying to update the design to make it more user-friendly and more aesthetically pleasing. However, I have run into a few road blocks.

This is the new design that I would like to implement. If you are using Firefox, you should see it as I see it. However, if you are using IE, it is a mess. What can I do to stop this? From brief research, it looks like it is an issue using the position:absolute style tag in my css file. Is there a way to make that design work for both IE and Firefox.

Second, if you navigate to this page you will notice a pdf file that is truncated in height. I cannot for the life of me figure out what is causing this. (The other pdfs on the web site are not configured correctly and I am aware of this)

Any help in figuring out these problems would be appreciated. Thanks!

By: puckupdate

puckupdate — Fri, 29 Aug 2008 18:19:19 -0800

Start with validating the page. This will help tons.

By: enn

enn — Fri, 29 Aug 2008 18:29:27 -0800

Yes, validate the page and the CSS.

I don't see position: absolute in your CSS. Do you mean position: fixed? Here are some workarounds for the position: fixed IE6 issues.

Also, you are using the CSS child selector (>), which IE6 does not support. I haven't looked closely enough to see if that's causing any of your particular problems, but it's something you should be aware of.

By: Bora Horza Gobuchul

Bora Horza Gobuchul — Fri, 29 Aug 2008 18:31:10 -0800

Yep. Validate, and you don't need to (and as a broad, general rule, shouldn't) use absolute positioning. Everything I see from a quick scan of your site can be accomplished with floats and a few margins.

By: Bora Horza Gobuchul

Bora Horza Gobuchul — Fri, 29 Aug 2008 18:33:19 -0800

Also, don't embed PDFs - it's just one more plugin that users don't have. By all means link to the PDF and provide GIF / JPEG image previews, but embedding is not necessary.

By: nnevvinn

nnevvinn — Sat, 30 Aug 2008 00:01:10 -0800

This site will help you tailor your css to individual browsers. Seems like 80% of the time it takes to design a website is fighting with IE, but once you get the hang of things it gets easier.

By: Su

Su — Sat, 30 Aug 2008 12:23:35 -0800

nthing everybody above, so won't reproduce anything they've mentioned, but you should also be aware that you have multiple elements floated with margin applied to the same side as the float direction.

Also, validate the CSS and not only the HTML. But do the HTML first. If your base document is bad, your styling only becomes even more unpredictable, so it's generally best not to try and fix it first, as you might "correct" something that was actually the result of bad markup.