Can someone tell me what I could be doing wrong. The following page works fine in IE8 and FireFox but elements of the CSS don't seem to be being respected in Chrome and Safari. Thanks.
A:
Here's what I'd do:
First, the div #navigation that wraps around the ul #navlist is redundant. Just style the ul like you would the div and lose the div altogether.
Secondly, I would make the ul float left. Then I would make the content div float left and lose the margins. Make sure #container is overflow:hidden; As long as you set the width of the ul and the content div, it should look good in all browsers.
I'm actually baffled that it looks the way it does in Chrome... I'll update this answer as I examine it more.
UPDATE
The user agent in chrome styles the ul display: block; You should add a reset stylesheet to put all browsers on the same footing. Although, if you follow my above advice that will not be a direct issue. Let me know if you need set of reset rules I use.
Stephen
2010-09-20 23:11:05
I should have mentioned this in the original question but if I remove the DOCTYPE line (which I know is a no-no), it works fine in everything except IE8 where I appear to have a clear/float issue, the content on the right starting after end of the navigation on the left.
Matt Winters
2010-09-20 23:13:49
You should heed Computerish's answer and check your server configuration.
Stephen
2010-09-20 23:30:41
I ended the DOCTYPE with a /> instead of > and everything appears to be fine in all browsers. I agree that is must be a server issue.
Matt Winters
2010-09-20 23:42:04
I checked and the content-type of the css is still `*/*` instead of `text/css`. You should look into fixing that even if things look okay presently. This will only give you more headaches down the road.
Stephen
2010-09-20 23:52:18
Thanks. Will do. I was hoping that you'd check that again.
Matt Winters
2010-09-20 23:54:23
Hey, not a problem!
Stephen
2010-09-20 23:59:48
my "fix" appeared to have addressed the outrageous behavior of not respecting some of the CSS elements however IE6 and IE7 which I didn't immediately test, were still a problem - fooling around with the widths, as you suggested, fixed those browsers as well. Your first suggestion above as you said was to address redundancy - I initially did it and worked fine, the second suggestion looked like it would have worked with some tweaking of widths but it messed up my other pages (using the same CSS) royally so since everything worked, I just put the original CSS back to look at another day.
Matt Winters
2010-09-21 02:36:59
Glad it works. That's the goal anyway!
Stephen
2010-09-21 13:05:14
A:
For whatever reason, your server is returning a '304 Not modified' status to the css file request and the gif images.
EDIT: In Firefox, I do not get that status so this is a set up problem with your server.
Rob
2010-09-20 23:13:06
304 Not Modified is only returned when it's cached. The page returns 200 when I clear my cache, followed by a 304 afterward, which is the desired behavior in most cases.
Stephen
2010-09-20 23:20:42
@Stephen - It's interesting you downvoted me yet you agree, above, that this is a server issue as I said. In addition, the 304 is returned in all cases for Chrome and Safari. Of course, I cleared my own cache when I tested this which is the reason why I edited my original response.
Rob
2010-09-21 14:34:36
It's interesting that you downvoted me out of spite. I tested the header in chrome and you are correct. If you edit your answer to indicate that problem is chrome, I will be allowed to remove the downvote.
Stephen
2010-09-21 14:40:56
+1
A:
When I validate your CSS with W3's CSS validator I get this error:
I/O Error: Unknown mime type : */*
This could indicate a server error which is throwing Chrome off. Check out this thread:
http://www.sitepoint.com/forums/showthread.php?t=461039
(Also check through your css. You have div#navigation in there where it should just be #navigation.)
Computerish
2010-09-20 23:13:49
I didn't get that error. I got Congratulations...validates as CSS level 2.1. Could someone else try please.
Matt Winters
2010-09-20 23:24:28
When I inspect my headers I definitely get a content type `*/*` instead of content type `text/css` so this is correct.
Stephen
2010-09-20 23:29:23