Hi All,

I'm trying to learn CSS finally after using tables I fancy doing this project in CSS but i'm having problems.

Firefox display's it one way, and Internet Explorer display's it another way ..

Link: http://fantasyfootballclub.co.uk/beta.php

Any ideas as to why? thanks in advance.

Before you can even get to worrying about why they look different... and how to fix it up if needed; you need a proper valid doctype for the page and then get your html valid. Trying to work with display differences before that is accomplished is an exercise in futility.

Before you can even get to worrying about why they look different... and how to fix it up if needed; you need a proper valid doctype for the page and then get your html valid. Trying to work with display differences before that is accomplished is an exercise in futility.

Added the Doctype and Cleaned up the code, didn't think the code was untidy though.

Thanks for the tips so far.

Added the Doctype and Cleaned up the code, didn't think the code was untidy though.

Thanks for the tips so far.

Didn't say it was untidy... only that it was not validated

Got it looking the same in both browsers and managed to keep it validated.

Thanks for your help.

Cool... well done. Saves me having to download your stuff for potential help. So, in case anyone else reads this thread... what did you do to make it x-browser?

Added margin-top: 0px and margin-bottom: 0px and it took the gap's away from the navigation and the content.

All righty then... I see the page is no longer there and I can't remember what your original css had.

But a good habit to get into is to set all margins, padding and borders to zero before you even get going with your css. That levels the playing field for all html elements and the different values that browsers give to them.

You can use the old standby like this:

* {margin:0; padding:0; border:0 none;}
Or do a google for CSS reset for additional ways to achieve the same

Yeah, eric meyer has a good reset, but it may be overkill. Look at what he has and personalize it.

Also, after hours and hours of agonizing over IE, I finally found the best workflow. I code for firefox and then check in safari and opera. Usually, if okay in ff, then okay in safari and opera. Then, using conditional comments, I have a separate css file for ie6 and ie7. I don't much care about anything lower than ie6. My sites get less than 1% visits from them and they are in the dark ages! :). Instead of trying to figure out what bugs ie is presenting, I just add specific code to make ie6/7 look right in their separate css files. This way I can avoid hacks and avoid making changes that affect the way ff displays it.

It used to kill me trying to figure out what bug ie was presenting so that I could fix the original code to prevent it (like padding on layout objects, etc), but now I code for ff, then modify ie code in their own css and life is sooooo much simpler.

Thanks for the tip's, I'll keep them in mind for building up the content.

It used to kill me trying to figure out what bug ie was presenting so that I could fix the original code to prevent it (like padding on layout objects, etc), but now I code for ff, then modify ie code in their own css and life is sooooo much simpler.

This is actually really good, since Firefox is compliant with the w3 standards. This ensures that you maintain good practices when using CSS.