If there should happen to be a reader out there with a great comprehension of CSS, I wonder if I could please beg some advice. I’ve been told that the blue banner at the top of this page does not show up on Mac OX X.3, using the Safari Browser. As a result the white letters at the top are as good as invisible. It works fine in Mozilla and Explorer as far as I can tell. I don’t have a Mac to play with, and I don’t see why it should come out differently…or what I can do about it…
It’s called by a div id=”banner” code.
My correspondent suggested changing “id” to “class”, but that messed up the look in the browsers it’s currently working in.
Blue banner? There’s supposed to be a blue banner?
Brad DeLong, running Safari on Mac OS X 10.3
Why not try ?
Ohh, now that they are pointed out to me I can make out the White letters! What other subleties pass me by @ Discourse.net?
Henrik Nilsson, running Safari on Mac OS X.2.8
Well, there are a few subtle things I threw into the code here and there, but this wasn’t meant to be one of them….
I’ve tried changing the code to have BOTH and ID and a CLASS line in the tag, but I gather than hasn’t improved matters for Macs. No visible change on the Moz/Exchange front that I can see…
Here you can see Mozilla, IE and Safari displaying this story on my Mac: http://blogs.23.nu/test/stories/3203
(The Gamma difference in IE is remarkable.)
That is wild….especially as my copy of IE 6.0 under both XP and win98se, looks a whole lot like the mozilla version….which is my idea of what it is supposed to look like!
Arg.
I don’t know if this is the cause, but there’s a typo in the stylesheet:
h3 EM {
margin:0px; padding: 0px; ***
A { color: #0000FF; text-decoration: none;}
A:link { color: color:#FF0000; text-decoration: none; }
A:visited { color: #0D86FF; text-decoration: none; }
A:active { color: #999999; text-decoration: underline; }
A:hover { color: #CC0099; }
} <— this bracket needs to go up to where I’ve marked ***
This is right before the css that defines the banner color, so it could be masking it from safari’s view, while mozilla and IE’s looser parser skips the error and keeps going.
Well, I have a big nice blue banner in Safari. And the relevant portion of my stylesheet is:
#banner {
font-family:verdana, arial, sans-serif;
color:#FFF;
font-size:48px;
font-weight:normal;
border-bottom:1px dotted #FFF;
border-top:3px solid #99CCFF;
background:#336699;
padding:15px;
text-transform:uppercase;
letter-spacing: .2em;
}
Thank you jhp. That was the problem. Of course fixing it just made matters worse, as it made Moz & IE as bad as safafri….
I threw in what I could, and currently find that if I add the following lines it looks good again in Moz & IE
#banner {
font-family:verdana, arial, sans-serif;
color:#FFF;
font-size:48px;
font-weight:normal;
}
Does this fix it in Safari?
The banner is there in safari 1.0 on 10.2.8, and the whole site looks the same to me now in Safari and Mozilla. Nice!