I'm a CSS Punk. Browsers Treat my Page Differently

Forum Moderators: not2easy

Message Too Old, No Replies

I'm a CSS Punk. Browsers Treat my Page Differently

IE vs Firefox

oldmandrummer

5:31 pm on Nov 10, 2009 (gmt 0)

I have a feeling I will get hammered for posting this, but honestly, I'm far from a web dude, other than I can take a 'template' and do my share of hacking at it.

I stuck my foot in my mouth by volunteering to attempt to put together a website for my niece and I have to hand it to you guys, it's really NOT as easy as I thought it would be.

So, anyway, I have this site together and, with the exception of a few minor details, I thought it was almost completed. Ha, yeah right.......until a guy informed me that firefox is having a field day with it. So it works in IE but firefox is not enjoying the CSS too much. I guess the beauty in all of it is that it seems to be the same couple of elements that run through on all the pages. So if I could nail that down, I'd probably be pretty close.

I just got on here and have been looking through some validators, but if anyone would help me, my guess is it is probably something basic. Getting pretty overwhelmed here :(

Fotiman

6:16 pm on Nov 10, 2009 (gmt 0)

Welcome to WebmasterWorld! In general, you should develop against Firefox, and then you can tweak it for IE. IE tends to do it's own thing (vs. following standards), so if you develop a page to IE's quirks, it will be more difficult to get that page working correctly in browsers that are more standards compliant (Firefox, Chrome, Safari, etc.).

Here's what I would recommend.
1. Give your document a valid DOCTYPE that will take IE out of quirks mode. For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Validate your HTML [validator.w3.org] and CSS [jigsaw.w3.org].
3. Install the Firebug plugin for Firefox. This makes it easy to see which styles are being applied to your elements.
Once you get to this point, start making the changes to get things looking right in Firefox. Once you are happy with the results, switch to IE. If there are things that need fixing you can apply IE specific CSS to adjust for IE's bad behavior. And feel free to post some examples here (try to keep them as compact as possible, and no links please).
Good luck.

topr8

6:39 pm on Nov 10, 2009 (gmt 0)

i'd agree with Fotiman.

although i personally develop using the Opera Browser, and then test in IE and Firefox.

personally ...
first off i set all margins, borders and padding to zero
and then i add it to elements as/when required, i find this in itself helps a lot.

oldmandrummer

6:51 pm on Nov 10, 2009 (gmt 0)

I found one source of my frustrations.....I had a <div> textbox that was used on every page. I wanted it centered and when I put the close </center> tag, it was misformatting the pages in firefox. So, taking that close tag off, it actually centers it - ONLY PROBLEM now is all the text in that box on every page is centered and I need it Left aligned

***EDIT**** I set up a class for my paragraphs to left align, so that issue is handled. Now I just have one more hompegage display issue and need to get a box slid back over

You guys get all my respect, that's for sure