Strange Firefox and IE behaviour with CSS

SiriusB

SiriusB

SiriusB

Soldato
Joined
16 Dec 2005
Posts
14,443
Location
Manchester
OK first of all I am quite new to CSS so I really don't know what to look for in solving this issue.

Basically I am building a website and I have positioned some text to make it look better [specifically, a div containing navigation link at the top of the page and a <p> element with some legal text in the footer]. In order to move the text I have used the margin-top rules in my CSS to move the two elements down.

In Firefox in Windows it is perfect. In IE the footer text is in the wrong position. Now at first I thought "cool, just need to find an IE hack". Then when I loaded up the page in Firefox in Linux another problem. Both elements were in the wrong position. I then tried it in my OTHER Linux machine and only the footer is in the wrong place!

Madness I tell thee. Four browsers, 3 of which are exactly the same version, all display it differently.

The only difference between each of the OS's is that one Linux install has standard fonts and the other has Windows fonts installed.

Website can be found here: www.aeternum.co.uk/smp.html

CSS here: www.aeternum.co.uk/smpcss.css

Any ideas would be of great help. I knew IE didn't always play nice, but I never thought Firefox, regardless of OS, would give me grief :(

*I am already aware of IE not displaying the images correctly and its just a case of me altering the images to something IE can handle. Poor lil tike.
 
Looks identical on Windows Firefox 2.0.0.3 and Linux Firefox 2.0.0.2 to me.

I don't know what firefox is like for loading CSS pages but maybe it was loading from cache.
 
Hmm. I will try clearing the cache but I am fairly certain I have never used the site on one of my Linux installs.

EDIT: OK it appears not to be a cache problem. I CTRL+F5ed and the same result. I was curious about any font issue so have just installed Opera on my Linux OS. It displays the page perfectly.

So, what do you suppose is going on with Firefox on Linux?
 
Last edited:
IE and firefox render CSS slightly differently, unfortunately i am unsure of the technicalities in your specific case but i'm sure there will be someone along shortly to help you out.

I get the menu insetted in firefox and not in IE and i also get the foot text issue.

jEnk... your time :D
 
Sp00n said:
IE and firefox render CSS slightly differently, unfortunately i am unsure of the technicalities in your specific case but i'm sure there will be someone along shortly to help you out.

I get the menu insetted in firefox and not in IE and i also get the foot text issue.

jEnk... your time :D
Click to expand...

There are some mistakes in the HTML. A few missing letters or tags so IE is probably taking issue with it. Might try fixing them now actually and see if LinuxFirefox plays nice.
 
You didn't ask for it but i think a few tips on the design are needed; first thing is that grid background clutters the body up so much; lower the opacity of the grey tbh, and then for the navigation I'd switch from times to a nicer font such as trebuchet or just arial, while maybe altering the colour classes, just to make it seem a bit more well rounded, just my opinions though. :)
 
Thanks for the tips, but the site is no where near finished. I realised the grid was very distracting as soon as I added the text and I haven't really put any thought into fonts, but that and the background are of little concern at the moment until i can understand why Firefox in Linux is giving me grief.

Nothing is ever easy in web design as I have begun to learn!
 
A quick update:

The HTML has been fully corrected and now validates. The CSS validates so its not my code [or rather not a mistake in my code].

Windows Firefox: Fine
Ubuntu 32 Firefox: Dodgy
Ubuntu 32 Opera: Fine
Ubuntu 64 Firefox: Dodgy
Ubuntu 64 Opera: Dodgy
Redhat Firefox: Dodgy.

So, what is it about linux and the margin-top property, because that is how I have moved the two pieces of text in question. There's a link to the css in my original post.

Any ideas would be great because this has really thrown me. I knew there may be cross-browser problems, never thought I would have cross-platform problems too!
 
You must log in or register to reply here.
Back
Top Bottom