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

August 29, 2008 6:09 PM

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!

posted by bigcheesegump to computers & internet (6 comments total)

Start with validating the page. This will help tons.
posted by puckupdate at 6:19 PM on August 29, 2008

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.
posted by enn at 6:29 PM on August 29, 2008

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.
posted by Bora Horza Gobuchul at 6:31 PM on August 29, 2008

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.
posted by Bora Horza Gobuchul at 6:33 PM on August 29, 2008

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.
posted by nnevvinn at 12:01 AM on August 30, 2008

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.
posted by Su at 12:23 PM on August 30, 2008