I'm working on a website which I have made sure is validated, I just got an email saying:

"Joe I have gotten several calls stating that they hare experiencing the
same issue as me with the words looking grey and sections highlighted!
I don't know what is going on but I've heard it a few times this
weekend?"

The website looks fine in every browser I've tried it in, but apparently is not the same for others. Can anyone help me out here?

Here is the site

and the "problem" browsers are?

its working fine in ie7 and firefox 2 - what browsers isn't it working in?

I've asked multiple times and gotten replies like "Vista"

...grrr. I've tried it on a bunch of different computers and they all show it fine

I checked it in Firefox 3 on a mac without any problems.
You might ask if they will take a screenshot for you. It is frustrating to have a problem on a site you are making, but even more frustrating when you customer doesn't know the difference between a browser and an operating system!!

Originally Posted by angele803

I checked it in Firefox 3 on a mac without any problems.
You might ask if they will take a screenshot for you. It is frustrating to have a problem on a site you are making, but even more frustrating when you customer doesn't know the difference between a browser and an operating system!!

I don't think they'll know how to do a screenshot...

It's really been bugging me... shouldn't it be uniform on every browser because its validated?

shouldn't it be uniform on every browser because its validated?

No. Validation only proves that your coding is done properly. It does NOT guarantee what different browsers may do with that code.

I can't see the site, I keep getting a DNS error.

Does anyone have any idea what this could be?

I recall a similar problem I had with a client who pointed out that the fields were yellow and font sizes were larger than the PSD prototype I designed. I couldn't pinpoint the problem after checking through multiple browsers/platforms.

After a long day of rechecking the code and trying variations; I found out that the client was using an ancient wooden computer which was powered by a hamster in a wheel... okay, maybe not but the problem was the computer they were viewing it in. (it was very outdated).

I noticed you said they use Vista so I'm not sure - I would recommend that you ask them to go and view the website at an internet cafe or elsewhere; If they cannot see the problem elsewhere then you need to let them know they should upgrade their computer or software as it seems everyone here can view the website just fine.


Just had a look at your CSS and figured they MIGHT be referring to:

#Container #Container-Inner #Left li a{
	display: block;
	width: 152px;
	background-image: url(images/menu-link.gif);
	line-height: 26px;
	margin: 0px 0px 2px;
	padding: 0px 0px 0px 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #4f4f4f;
	font-style: italic;
	text-decoration: none;
	font-size: 14px;

Try changing it to #000000 and remove italics and then ask them to check out the website.

Originally Posted by The Conqueror

I recall a similar problem I had with a client who pointed out that the fields were yellow and font sizes were larger than the PSD prototype I designed. I couldn't pinpoint the problem after checking through multiple browsers/platforms.

After a long day of rechecking the code and trying variations; I found out that the client was using an ancient wooden computer which was powered by a hamster in a wheel... okay, maybe not but the problem was the computer they were viewing it in. (it was very outdated).

I noticed you said they use Vista so I'm not sure - I would recommend that you ask them to go and view the website at an internet cafe or elsewhere; If they cannot see the problem elsewhere then you need to let them know they should upgrade their computer or software as it seems everyone here can view the website just fine.


Just had a look at your CSS and figured they MIGHT be referring to:

#Container #Container-Inner #Left li a{
	display: block;
	width: 152px;
	background-image: url(images/menu-link.gif);
	line-height: 26px;
	margin: 0px 0px 2px;
	padding: 0px 0px 0px 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #4f4f4f;
	font-style: italic;
	text-decoration: none;
	font-size: 14px;

Try changing it to #000000 and remove italics and then ask them to check out the website.

Well I'd tell them to update their software - but they couldn't tell me what they were using. Also, they said it wasn't just them who were having the problem - it was some of their visitors as well. I made that change like you said (thank you very much by the way) and told them to check it on their new computer again. Hopefully that fixed it, but it seemed like they were referring to text in the main content area on the right...

Ok, I can see the site today and I think I see what they may be talking about. In IE6, the green background is just gone... so you see gray text on the black and gray diagonal lined background.

You will need to do 2 things to fix this for IE6:
1 - add height: 1% to #ContainerInner
2 - add display: inline; to #left - this will fix the doubled-float margin bug that you're triggering with the left margin in a left float.

Lastly, put JUST these rules in a separate css file, then use a conditional comment to call that file - only IE will read it.

Originally Posted by LadynRed

Ok, I can see the site today and I think I see what they may be talking about. In IE6, the green background is just gone... so you see gray text on the black and gray diagonal lined background.

You will need to do 2 things to fix this for IE6:
1 - add height: 1% to #ContainerInner
2 - add display: inline; to #left - this will fix the doubled-float margin bug that you're triggering with the left margin in a left float.

Lastly, put JUST these rules in a separate css file, then use a conditional comment to call that file - only IE will read it.

Thanks a bunch, it worked!