CSS Problem

[pulsorocker]

Hello,
Last week I redesigned my site and used CSS instead of regular font tags. My site is www.pulsorock.com and here is a screenshot of the way is intended to be seen

Just about a few minutes ago a friend of mine send me this screen shot

telling that was the way he saw the page. Which it looks ugly and it messes all the site. I told him to visit another page I knew it used CSS (www.zonai.com) and it look fine on his PC, but for some reason my site doesn't appear right on his PC.

Here is the CSS file for my site http://www.pulsorock.com/pulsorock.css which it looks bad on my friend PC
Here is the CSS file that looks fine on my friend PC http://www.zonai.com/zonai_style.css

I'm not sure if has something to do with my CSS or is something from his browser, but I don't understand why he sees mine bad and the other site that also uses CSS he see it right?

Please anyone help me on this

and how can I make sure everyone see my site the right way? I try my site locally on IE5 and Netscape 4.7 and in both looks fine.

Thanks
Guillermo Carrion

[lynlimz]

Hi,

First thing. did he refresh? sometimes the css file is not loadd properly and your page would load without it styles.

[pulsorocker]

I'm not sure... But I do know that he visits the site daily and the new design has about a week and it would be strange that he has never loaded the CSS file properly. Did anyone had a chance to see the code (HTML and CSS) to see if there is anything that I did wrong? This is the first thing I did with CSS so there might be something that I did wrong that affects some browsers.

[creole]

first off, some questions...

1) What browser is your friend using?

2) Did the page look like this right when he first loaded it?

3) Tell him to clear his brower cache AND his library and see if he still gets this effect.

I think I found the problem...I had something similar to this the other day and I was tearing my hair out. You are linking to your stylesheet. The problem is that you need to link relative to the stylesheet, not the page itself.

This is the way you call your CSS:
<link rel="stylesheet" href="/pulsorock.css" type="text/css">

try calling it like this:
<link rel="stylesheet" href="pulsorock.css" type="text/css">

See if that works.

[pulsorocker]

1) From what I saw on the full screen shot my friend send me, I believe he uses IE 4.0 or higher, so he should understand my CSS. And he does understand CSS on other sites.

2) I believe it did look like that for him since the beginning, since when I send him the screen shot with the way it should look, he had never saw it that way.

3) I'll them him that to see if it causes some effect.

Regarding the way the CSS is called, I'm not sure that has something to do since the other site that looks fine on his PC (www.zonai.com) also call it this way.
And since I use templates I need to call it /pulsorock.css in order to find it when the page is on other folders other than the root folder where the the CSS file is located.

[shane]

pulsorocker,

Try removing the underscores in the style class names as they're not valid characters in class names.

W3 : Cascading Style Sheets, level 2 CSS2 Specification
In CSS2, identifiers (including element names, classes, and IDs in selectors [p. 53] ) can contain only the characters [A-Za-z0-9] and ISO 10646 charac-ters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 charac-ter as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

IE 5/5.5 copes with the underscores ok even though they're not valid but other browsers including IE4/N6 don't.

I only found this out myself last week.

[creole]

cheers shane...

even if thta's not it good post. You learn something new every other day and today was my day.

What does that mean for tomorrow?

[lynlimz]

Hmm..didn't know underscores were not allowed! haha..but glad i did not use them

pulsorocker, you have to confirm with your friend if it happens all the time!

[shane]

pulsorocker,

I tried looking at your site with N6 and Opera 5 and they both displayed the same problems your friend had. I saved the file and removed the underscores in the css file and in the html file that referenced the css class names. After the changes all was fine and the page displayed as in your right.jpg and as in IE5+.

Is your friend using IE5 (Mac) or IE6 as they're more standard compliant than IE5/5.5 (Win)?

[pulsorocker]

sorry... I was offline for a few days. thanks to everyone who submitted their suggestions. I'll read them now and post a reply for them in a short while.

[pulsorocker]

Originally posted by shane
pulsorocker,

I tried looking at your site with N6 and Opera 5 and they both displayed the same problems your friend had. I saved the file and removed the underscores in the css file and in the html file that referenced the css class names. After the changes all was fine and the page displayed as in your right.jpg and as in IE5+.

Is your friend using IE5 (Mac) or IE6 as they're more standard compliant than IE5/5.5 (Win)?

Thanks shane for all your help.
I verified the site on several browsers and OS and saw that not all of them displayed the site as it was supposed to. I modified the CSS and removed the underscores and did a test on the following address http://www.pulsorock.com/css/ and verified it again on others machines and worked fine. Please have a look at the URL to see if you see it the way its supposed to.
Tomorrow I'll replace all site documents with the new CSS. Thank God HomeSite has an extended find and replace

Thanks

[shane]

Looks good in Opera Guillermo, the problems with the top and side links are fixed. There's a couple of minor problems though. On the grey rounded boxes the top horizontal line is slightly thicker than it is in IE. Also, there's a small gap between the pulsorocker flash logo and the cell holding the banner ad.

I'm not sure whats causing the problems at the moment but I'll let you know if I find it. I'll check the site in N6 tomorrow at work, as I haven't got it installed at home.