Safari Doesn't Understand Simple CSS

Wow... so because I had some comments before @charset "utf-8"; it doesn't display the background image?

That's pretty crazy, but oh well, now I know.

Thanks for the suggestions, I don't know why I didn't think to validate my code sooner!

I'm not going to worry about the warnings about same background colors on multiple elements... that seems to be a more semantical/cleaning-up-the-code issue and that's not my biggest concern at the moment.

Message was edited by: broomstick3

Thanks for your input, and I tried it out, however it still didn't work.

A few months ago I read an article about how attribute order is important, especially when coding for Safari. I had always followed the

background: color url() repeat x-axis y-axis;

rule of thumb. However, I just tried challenging this on another site I'm working on, and it looks like even Safari is a little more forgiving than I had once thought.

http://www.adphi-mn.org/sandbox/alphadeltaphi/

In this example, I have the following for my body tag:

body {
margin: 0px;
padding: 0px;
background: #000000 url(../images/bg.jpg) no-repeat top center;
font-family: "Trebuchet MS", "Lucida Grande", LucidaGrande, Lucida, Helvetica, Arial, Sans-serif;
}

And it works! no only does the repeat come before the x- and y-axis, but the order of the axis' are even reversed.

Now I'm beginning to think this may be more than a browser issue, and perhaps a server issue. Especially considering I've been having quite a bit of trouble with the server for the KBS/Medifast Web site.

Sorry for the negativity. I'm usually not so negative, it's just irritating that all of these browser makers can't just come together and decide on one unified method for rendering code... but there's no money in that.

This is the Web site I'm having this issue on:

http://www.kbsmedifast.com/

I'm currently using this for my body tag:

body {
margin: 0px;
padding: 10px 0px;
background: #000000 url( http://www.kbsmedifast.com/images/background.gif) no-repeat center top;
}

I'm not using a relative path, and it still doesn't work in Safari. I'm using version 3.0.4(523.15). If I go directly to that image path in Safari, I can biew the image, so it's not that. I'm stumped.

Yes, in my first post I used a relative path. In my second I tried it without a relative path, but it still didn't work.

Everything on my site is one directory above the index. In fact, the initial index file (kbsmedifast.com/index.php) gives a 301 redirect to kbsmedifast.com/kelly medifast_procycling/index.php. This way everything is on the same plane and everything refers to everything else by going back one directory and then into the directory being requested.

So it doesn't seem to be an issue with my file structure, nor does it seem to be an issue with any relative path.

Again, this works correctly in every other major browser. Safari is the only browser that is having this problem.

I'm looking to figure out why Safari is having a problem with this, so I can find a work around.

Yeah, no. I think I'll stick with XHTML, CSS and PHP to build my Web sites. CSS really isn't that difficult and browsers are becoming more and more standards compliant with each iteration. But thanks for the suggestion.

Yeah, there are a ton of different browsers out there, but if you look at your site statistics (I use Google Analytics), there really are only 3 major browsers that most people use: IE, Firefox and Safari. At least, this is what my experience has taught me.

It's like search engine optimization. You really only have to focus on the top 3 search engines: Google, MSN and Yahoo. Most every other search engine either gets a large number of their search engines results from one of the big 3, or their search result coverage just isn't all that extensive.

And of those, most people use IE 6 or 7. I wouldn't even worry about the people who use IE 5 or even IE 4, because they're few and far between and most likely if they're using such old browsers, they have no idea what they're doing much less would know how to do much on the Internets.

And even IE 6 and 7 aren't that difficult to code for. Yeah, throw in a _width hack in there, maybe a couple other hacks, but it's not much, nor is it that difficult.

In my opinion, build a CSS-driven, tabless design is a lot easier, cleaner and faster (the same goes for redesigning as well) than building a Web site with bulky and inflexible tables.