Hey Everyone.
I recently created a website with mostly HTML and some CSS layout. I created the site on a PC with Dreamweaver, testing it on IE an Netscape. I got it to work perfectly on both of those browsers. However, after checking out the site on my roomates MAC, I found that Safari didn't read the CSS correctly (or I didin't write it correctly). Everything is messed up. Safari didn't read the CSS like I wanted it to, and the absolute positioning is all wrong. Even the rendering of images is wrong.
Not too long ago I got my portfolio site online, and Safari rendered it fine. The CSS borders showed up, and everything worked fine. I've tried to figure out what I'm doing wrong, but I just can't figure it out.
Is there a site that can give me a handle on writuing CSS for Safari as well. I'd feel a lot better if my sites were optimized for not only IE and Netscape, but also Safari.
Just when I think I've mastered the difference between Netscape and IE, now this. Argh.
For a reference, the site is http:://www.scarredrose.com (<!-- m --><a class="postlink" href="http://www.scarredrose.com">http://www.scarredrose.com</a><!-- m -->)
Thanks for your help.
BrianHey, I'll take a look right now in both Safari, NN, and IE on my Mac to see the difference.
Two things:
1) The CSS support in Safari is quite good, as with most of the Mac browsers.
2) Have you validated your CSS on the W3 site? Here are links for the HTML and the CSS validators:
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->
And, for something really cool if you are interested in Safari, here is the blog directly from the dude who wrote Safari. Over the last year or two, as he wrote it, he get a running commentary on its development. The link is at:
<!-- m --><a class="postlink" href="http://weblogs.mozillazine.org/hyatt/">http://weblogs.mozillazine.org/hyatt/</a><!-- m -->
Hope that stuff helps!
Cheers!Here are the CSS errors in you style.css sheet:
Errors
URI : <!-- m --><a class="postlink" href="http://www.scarredrose.com/style.css">http://www.scarredrose.com/style.css</a><!-- m -->
Line: 0 Context : body
Property scrollbar-face-color doesn't exist : #333333
Line: 0 Context : body
Property scrollbar-track-color doesn't exist : #cccccc
Line: 0 Context : body
Property scrollbar-arrow-color doesn't exist : #ffffff
Line: 0 Context : body
Property scrollbar-highlight-color doesn't exist : #cccccc
Line: 0 Context : body
Property scrollbar-3dlight-color doesn't exist : #333333
Line: 0 Context : body
Property scrollbar-shadow-color doesn't exist : #333333
Line: 0 Context : body
Property scrollbar-darkshadow-color doesn't exist : #cccccc
Line: 0 Context : body
Parse Error - ;: }
I would start by fixing those up and see what that does. In order to run your pages through the html validator you will need to add this to the head of each page:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Also, looking through your CSS file, this is your body information:
body {
margin: 0px;
scrollbar-face-color: #333333;
scrollbar-track-color: #CCCCCC;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #CCCCCC;
scrollbar-3dlight-color: #333333;
scrollbar-shadow-color: #333333;
scrollbar-darkshadow-color: #CCCCCC;:
}
Notice the extra colon on the last rule, before the closing bracket.
If you fix all the CSS errors, and any HTML ones that may be present, and your page still doesn't view properly, let me know and we will see what is up then. Like I say, full standards support for CSS has been a goal for Safari since day 1 so there shouldn't be major problems with valid code.
Cheers!One more thing....
Looking through the source code of your html pages, your css link looks like this:
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
I learned to specify the mime/type in that rule, so it should be:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
I don't know if this makes a difference or not, just something that caught my eye.James,
Your advice helped immensly. That colon was solved 99.9% of my problems viewing it in Safari.
I think it is odd that there is a CSS attribute that will change the scroll bar attributes, but that there is no specification for that. Weird. I took them out either way, as to conform to the W3 specs.
Thanks again for your help.
BrianNo problem,
I am a professional musician too, so I felt your pain!
Cheers!It won't hurt the layout of your page to include Internet Explorer's proprietary scroll bar properties. It won't validate, but the styles are written in correct CSS syntax, so if browsers don't recognize the style rules, they will ignore them.
Just like browsers ignore tags and attributes they don't understand.James L., this colon you suggested is a new one on me, can you explain it more ?
Short explanation: It shouldn't have been there!.
Long explanation: Well, it shouldn't have been there!
My explanation wasn't to put one in, but too remove the one that was there, as indicated by this:
"Parse Error - ;: } "
...that came from the CSS validator.
Some browsers probably would just ignore it, but in others, it would completely throw the CSS rules out of wack.
I recently created a website with mostly HTML and some CSS layout. I created the site on a PC with Dreamweaver, testing it on IE an Netscape. I got it to work perfectly on both of those browsers. However, after checking out the site on my roomates MAC, I found that Safari didn't read the CSS correctly (or I didin't write it correctly). Everything is messed up. Safari didn't read the CSS like I wanted it to, and the absolute positioning is all wrong. Even the rendering of images is wrong.
Not too long ago I got my portfolio site online, and Safari rendered it fine. The CSS borders showed up, and everything worked fine. I've tried to figure out what I'm doing wrong, but I just can't figure it out.
Is there a site that can give me a handle on writuing CSS for Safari as well. I'd feel a lot better if my sites were optimized for not only IE and Netscape, but also Safari.
Just when I think I've mastered the difference between Netscape and IE, now this. Argh.
For a reference, the site is http:://www.scarredrose.com (<!-- m --><a class="postlink" href="http://www.scarredrose.com">http://www.scarredrose.com</a><!-- m -->)
Thanks for your help.
BrianHey, I'll take a look right now in both Safari, NN, and IE on my Mac to see the difference.
Two things:
1) The CSS support in Safari is quite good, as with most of the Mac browsers.
2) Have you validated your CSS on the W3 site? Here are links for the HTML and the CSS validators:
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->
And, for something really cool if you are interested in Safari, here is the blog directly from the dude who wrote Safari. Over the last year or two, as he wrote it, he get a running commentary on its development. The link is at:
<!-- m --><a class="postlink" href="http://weblogs.mozillazine.org/hyatt/">http://weblogs.mozillazine.org/hyatt/</a><!-- m -->
Hope that stuff helps!
Cheers!Here are the CSS errors in you style.css sheet:
Errors
URI : <!-- m --><a class="postlink" href="http://www.scarredrose.com/style.css">http://www.scarredrose.com/style.css</a><!-- m -->
Line: 0 Context : body
Property scrollbar-face-color doesn't exist : #333333
Line: 0 Context : body
Property scrollbar-track-color doesn't exist : #cccccc
Line: 0 Context : body
Property scrollbar-arrow-color doesn't exist : #ffffff
Line: 0 Context : body
Property scrollbar-highlight-color doesn't exist : #cccccc
Line: 0 Context : body
Property scrollbar-3dlight-color doesn't exist : #333333
Line: 0 Context : body
Property scrollbar-shadow-color doesn't exist : #333333
Line: 0 Context : body
Property scrollbar-darkshadow-color doesn't exist : #cccccc
Line: 0 Context : body
Parse Error - ;: }
I would start by fixing those up and see what that does. In order to run your pages through the html validator you will need to add this to the head of each page:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Also, looking through your CSS file, this is your body information:
body {
margin: 0px;
scrollbar-face-color: #333333;
scrollbar-track-color: #CCCCCC;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #CCCCCC;
scrollbar-3dlight-color: #333333;
scrollbar-shadow-color: #333333;
scrollbar-darkshadow-color: #CCCCCC;:
}
Notice the extra colon on the last rule, before the closing bracket.
If you fix all the CSS errors, and any HTML ones that may be present, and your page still doesn't view properly, let me know and we will see what is up then. Like I say, full standards support for CSS has been a goal for Safari since day 1 so there shouldn't be major problems with valid code.
Cheers!One more thing....
Looking through the source code of your html pages, your css link looks like this:
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
I learned to specify the mime/type in that rule, so it should be:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
I don't know if this makes a difference or not, just something that caught my eye.James,
Your advice helped immensly. That colon was solved 99.9% of my problems viewing it in Safari.
I think it is odd that there is a CSS attribute that will change the scroll bar attributes, but that there is no specification for that. Weird. I took them out either way, as to conform to the W3 specs.
Thanks again for your help.
BrianNo problem,
I am a professional musician too, so I felt your pain!
Cheers!It won't hurt the layout of your page to include Internet Explorer's proprietary scroll bar properties. It won't validate, but the styles are written in correct CSS syntax, so if browsers don't recognize the style rules, they will ignore them.
Just like browsers ignore tags and attributes they don't understand.James L., this colon you suggested is a new one on me, can you explain it more ?
Short explanation: It shouldn't have been there!.Long explanation: Well, it shouldn't have been there!
My explanation wasn't to put one in, but too remove the one that was there, as indicated by this:
"Parse Error - ;: } "
...that came from the CSS validator.
Some browsers probably would just ignore it, but in others, it would completely throw the CSS rules out of wack.