Just realized what our site looks like in Safari

[insats]

I just realized that our family business site that I created looks very distorted in Safari.
First of all, the text links look distorted (I thought Geneva was good for all browsers?) and on all pages but the first, the background has turned black instead of #1a1a1a

If you go to Butik-> sortiment you'll notice "+" marks on the left. Those marks have text in front of them, which is clearly not visible in Safari.

Any ideas where it's all gone pete tong?

the URL is www.olssongerthel.se (http://www.olssongerthel.se)

the css is found here: http://www.olssongerthel.se/css/css2.css

[psoxie]

I have just come upon some similar issues with safari, it's a sad realization! One thing i noticed is that all of your positioning is set to "absolute", I find this to cause the most problems with display in different browsers. Try changing some to relative and see what that does for you. I find that absolutely positioning makes it easy for style to overlap and that's what causes text to disappear and links to stop working...i think.

[zellers]

Jeezzz.. I wish all browsers rendered HTML the same way, and that way is the way I want it too look:ex:

[biznuge]

on the same page you pointed out, if you click all of the + signs open, your content drops off the end of the div. is this set to overflow:hidden... maybe make it auto...

[aussiedude]

Maybe (unless theres too many pages to the site) consider using scripts to detect the users web browser and redirect people based on which browser they use to a different version of your site which work well in Safari.

Story time:

......I remember the first time I discovered that webpages don't look the same in all browser was just after I finished making my first site and emailed a link to my friends. I couldn't figure out why they were saying my site looked so bad when it looked awesome to me. I was yet to discover that IE6 didn't support transparent images and formatted text differently and tables... unlike FF which I had been using the whole time to test my site while making it. But I basically just said "Stuff it, I'll just put on note on the front page saying: This site looks crap in your IE browser, so use FF or just put up with it!".
Since then I've managed to convince 2 or 3 people to use FF! Go me! :)

But yeah basically the only real way to design a site is to use about 5 computers at once... design the site on one computer and be using the other computers to see what it looks like in 4 different browsers.... the work of a web designer is never done.

[mikken]

I read somewhere sometime that Apple has other default fonts than Microsoft, so the standard sans-serif fonts isn't available. But it should still pick some decent sans serif font though.

You can define the font in the body declaration in your css, that way you won't have to repeat it throughout your stylesheet.
It probably won't solve any of your woes, but it makes your css simpler.

You're also using a lot of floating elements - im my experience floating is, as C3PO would say it, not entirely stable. You have a fixed size page with absolutely positioned elements - why not position your floats absolutely?

Also - why define div.sortnere1 through -7 ? One is enough, you could call them .sortnere and use <div class="sortnere"> since most of them are exactly the same
And z-index: 420? Why? do you 419 layers under it?

It seems that you have a good understanding of CSS but not fully control - maybe read som books on it, and maybe run your stylesheet through w3c.org's css validator (I did it for you - it didn't find any errors, but 183 warnings)

start cleaning your style sheet up, alot can be simplified here!

EDIT: Didn't notice this thread was two weeks old before now, i should go to bed...
The text after the plus signs are not missing, only white; maybe the a tags need to be defined properly, that is in this order: Link, Visited, Hover and Active.

[insats]

Im trying to get everything sorted out atm, but one thing that is bugging me is that the first page (www.olssongerthel.se/start.php) shows the correct background color #1a1a1a, but the others show a black background even though they all use the same css. I can't seem to find what's causing this

[DDD]

Whats with the multiple head tags? You acutally have 2 sets of everything head, body, meta and html tags. That could be causing you some grief. Or maybe my view source is trippin :lol:

Also I had a similar issue with flash under css in safari I believe look there too. I dunno, I would start by figuring our with set of head and body tags you wanna use first.

[mikken]

Check this out: (w3c.org validator, no **** or other sleazy stuff ;) )

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.olssongerthel.se%2Fstar t.php&charset=%28detect+automatically%29&doctype=Inline&group=0

It found 52 errors. Straighten those out. That would definetely help you resolve SOME issues. After that, you could fix up some of the 115 warnings in your css:
(w3c validator also)

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.olssongerthel.se%2F css%2Fcss2.css&warning=1&profile=css21&usermedium=all

[insats]

I have straightened out the errors in html (down to 2 or 3 errors) and I'm starting with the css now. Nothing has so far been solved by validation

I know my css is very messy. It's because I played around a lot before I decided on the design, so I probably have some left-over tags that shouldn't even be there anymore

[insats]

Ok, I seem to be getting somewhere now:

I've noticed that if I remove
<? include("../menu.html") ?>
from http://www.olssongerthel.se/sortiment/index.php

The background shows up as #1a1a1a, which is the correct one. However, I haven't got a clue as to why http://www.olssongerthel.se/start.php shows up just like it should, since both pages use identical <? include("menu.html") ?>

The CSS for the menu is found here:
www.olssongerthel.se/css/menu.css

[foodpk]

The best thing to do when solving cross browser compatibility issues is to first make sure that your code validates. Then when it validates, it's much easier to pinpoint where the exact problem is.
Doctypes are very important and you seem to have two doctypes (not allowed, no way) inside your document. I'd start there.

[insats]

The best thing to do when solving cross browser compatibility issues is to first make sure that your code validates. Then when it validates, it's much easier to pinpoint where the exact problem is.
Doctypes are very important and you seem to have two doctypes (not allowed, no way) inside your document. I'd start there.

Well, I did go from 50 errors to 3 errors. I'm going to look into doctypes, since I've never payed much attention to that before.

I do have glad news though!
The problem was that I had a recerence to:
<link href="css/css2.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />in www.olssongerthel.se/menu.html

I have no idea at all why that would cause such a fuzz but it did

Anyway, the errors I had with validation was not problem since menu.html was, and is validated.

[mikken]

Great that you managed to tidy things up, and your source looks healthier now.
Good luck on the doctypes