CSS issues in Safari & Chrome

HTML & CSS
1

URL: http://tinyurl.com/28u6fz4

I don’t understand what is going on in Safari and Chrome. Things look good in Firefox, Opera, and IE 7+. My main issue is the dot image that I’m using on the subnav (Philosophy, Staff, Our Gym, etc.). The dots are too low in Safari and in Chrome, I can see the top of the selected color (I’m using sprites). If I fix it so things look good in either Safari or Chrome, it gets messed up elsewhere.

Am I missing something? Or is there a way to target just these browsers? And why don’t Safari and Chrome render the same if they are both using the WebKit engine?

2

Hi Susan,

I don’t see the webkit issue until I zoom the text, but the same thing happens in FF when I do that.

Your anchor is a fluid height and webkit renders the line-height slightly different. Define your line-heights manually and give more space between your bullets on the sprite image. Then change the BG positions accordingly.

3

I added a line height to the anchor:


ul#subnav li a, ul#subnav a:visited {
	color: #656565;
	text-decoration: none;
	padding: 0 15px 0 15px;
	line-height: 14px;
	background: url(../images/subnav-bullet.png) 0 2px no-repeat;
}

And I changed the sprite image to include more space between the dots. It looks good in Chrome on my computer now, but Safari still hasn’t budged.

What do you see in Safari? I’m on a PC Vista machine…

4

That special font in Safari 5 is much bigger than in other browsers and therefore your top nav is all messed up and overlapping. (Changing to Arial font makes it display better.)

I assume you generated the font code from here which I believe attempts to normalise things a bit. However, I have avoided using @font-face and don’t have much experience with its peculiarities.

5

Yeah, I generated the font there. Actually, it looks terrible in all but Safari on my computer. I’m not the designer on this project, so I’ll have to mention it. Thanks, Paul. :slight_smile: