Development Why is everything except Firefox rubbish?

I have been working on a website for a local floor sanding company and I have my layout working perfectly in all versions of Firefox, but Safari and IE seem to **** themselves when trying to render it.

It is supposed to look like this (click for big):


If anyone has the time could they take a look at my CSS and see what I’m doing wrong?

The site
The stylesheet

This is still hosted on my home PC, so be prepared for long loading times.

Note: Don’t mention the logo.

 

Dude it's Safari.... You are better off using Internet Explorer 1.0.. ok FINE 2.0

 

looks alright in opera here, apart from the fact opera make some fonts rather big it loads up fine..

plus how come you said it works fine in firefox, then "but Safari and Firefox seem to **** themselves when trying to render it."

 

Hehe typo.

 

good god man, just do it as a gif and save yourself hours of headache

 

You really love trolling about Apple products, don't you? Safari is the most standards-compliant browser out there and has been for years, followed by Firefox 3. I don't like it due to the lack of plugins and extensions, but it's a dream for web developers.

Anyways, just save out that wood grain thing as a png and be done with it. The size of the resulting file will probably be close to what it actually takes in html+css to create the same effect, since there are so few colors and pngs compress images like that fantastically efficiently. If you really need it to change width dynamically with the browser window's size (was that intentional?), you could force a specific height and give it a percent-based width.

That layout is quite simple, and while I can't access your machine again to look at the code (timeout), it really should just be a wrapper div subdivided into the three row divs for the top images, menu, and body (maybe a fourth for a footer, didn't spot if there was one). The menu should be an unordered list, li{display:block;width:20%;float:left;text-align:center;} and set the colors as needed by throwing background-colors on the li#ids, and I should think the rest of the page should be too straightforward to really need explanation.

 

Doesn't change the fact that safari's a featureless turd that only works alright on a mac and no other platform.

 

Well, it's not brilliant, but I don't see how it's suppose to be that much worse than IE7 really.

 

Ok, I'm no expert so I expect to be shot down in flames but everything I've read seems to indicate that Opera is the most standards-compliant browser out there, not Safari (or FF for that matter), and Opera suffers for this reason, I suppose we can all feel precious about our favourite, hopefully someone out there has the answer...

 

You are correct NickElliot... if you have your web page that appears correctly in Opera, then you know you did a great job.

 

Opera, Safari, and Firefox 3 all render identically (save for font smoothing) if you've used valid, currently-accepted code, and Firefox 2 is very close to the mark as well. IE8 should be joining the party in time. Even IE7 does a half-decent job if you wrote things well - IE6 is the only serious problem still out there.

If your page does NOT appear correctly in Safari, Opera, or Firefox 3, you know you did a poor job. It's whether it's right or wrong - the only opportunity for slicing out a design to do a "great" job is in optimizing your code and images for fastest load times.

 

Opera is ONLY standards compliant. If your website is standards compliant, Opera will display it correctly. This is a deliberate thing on Opera's side and has been true right from version 1.

Firefox and safari have "IE<6" compatability mode built in, as well as standards compliance. Opera does not have the compatability mode, so technically is the only purely standards compliant browser on the internet. It also has a great email client built in! (I like Opera)

 

ok i have been using IE since version 4 was released, now on 7 waiting for 8 and in all my years of web surfing i have never had a problem viewing a website. I gave FF2 i spinning last winter as unknown to me at the time my windows installation was in direr need of a reinstall and IE7 fubar'd itself when it came to a right click toolbar, but that was the only problem.

I also found alot of the FF plug-in's to be a 5 minute 'oooooooooo' but then never used them again, such as that fancy pic view, that works really well with facebook.. cant remember the name of the plug in.. gives a nice pretty slideshow if you want it.

And in general i just found FF to be a giant 5 min 'oooooooooooo' and then it was just like using IE7, at which point i thought why even bother and i sorted out IE.

 

Of course you haven't. Web developers have to waste all of their time making fixes so that the browsers with 70%+ of the market share render out the site correctly. To add insult to injury, there are no good tools that enable devs to make changes and see the effect in realtime (ex. CSSEdit, and Firebug to a lesser extent) for IE so it's even more of a tedious process, especially seeing as it mostly comes down to guesswork, hacks, and invalid code in a conditional stylesheet.

ChaosDefinesOrder - certainly true. I write all of my code as Valid XHTML 1.0 Strict so am unaffected by compatibility modes in those browsers. When you specify that doctype, your code WILL be rendered in standards-compliant mode across the lot

 

yup... using strict doctypes makes stuff work.
Some of my findings with IE/FF:
FF SUCKS at smoothing small fonts... don't make writing too small (used often in disclaimers, etc in page footers), or else FF users' eyes will bleed.
IE and FF render divs-in-divs differently. Elaborate: If i have a <div id="container"><div id="child"></div></div> block and width defined in css as #container{width:100px;} #child{width:105px;}, FF would scale down the child width and force it to fit within the parent. IE would scale up the parent to make the child fit. this turns problematic if you have some div's that aren't fixed in their width...

 

actually, if you make a website that displays correctly in IE, FF, opera and Safari you know you did a great job.

Just becase IE sucks doesn't mean you dont need to code for it, and I think youll find once you start learning the nuances and trcikery you need to make IE do stuff right its not that hard For instance id imagine the problem with the parent and child divs specified in the problem above could be rectified using some a float: left; or something in the child box to make it overlap the parent in both browsers.

 

i normally avoid it by just fixed-sizing everything as far as reasonable and possible.
Once a design is done, my first step is normally to make sure it looks right under 90% of the circumstances. if that means conditional stylesheets, then so be it... jQuery, php are handy for that kind of stuff....

 

actually, safari usually renders a hell of a lot better than firefox. it renders sites the way they should be - with full standards compatibility

 

Test your favourite browser here:
http://www.webstandards.org/files/acid2/test.html
I love firefox but it still doesn't get it right in ver 2.0.0.11

 

As previously said in this thread.

Other browsers are not rubbish, if you write valid html and css Opera, Firefox and Safari will render them more or less identically.

I think it's more likely to be your fault for the incorrect rendering in other browsers.