How do I call a stylesheet specially for Safari?

You can hide the CSS elements from Safari. With this you do not need to create a specific css file for Safari. Eg

.submit {margin: 20px;}
.submit {margin: 10px;# } - Safari will ignore this

Details below:
http://www.ibloomstudios.com/articles/safari_css_hack/
http://www.ashhaque.com/blog/safari-specific-css-hack/

If you still want a file for safari alone. See here.
http://www.stuffandnonsense.co.uk/archives/hide_css_from_safari.html

MD

myhderrick, did you test that code?  I think that # hack is obsolete... doesn't work in current version of Safari/Wiin; not sure about Mac.

Maybe I'm going about this all wrong and asking for the wrong thing.

My only issue with Safari is on this test site: http://www.kellercrescentdigital.com/lmh/

The client wants the buttons across the top to be flush with either side of the box below it. Right now in Safari the "Foundation" button hangs over about 4-5 pixels on the right.

In IE6. IE7, IE8 and Firefox 3 it looks fine.

The buttons are generated from a list using CSS. Is there a better solution to get what I need?

Should I make the buttons graphical instead?

Agh!  Just spent an hour on your first question!  How about another question !!!!!

rentawebguy,

you should accept the answer/asnwers here and open another question

Regards

That was an example....Sorry if it didn't help.

How about the other link? - http://www.stuffandnonsense.co.uk/archives/hide_css_from_safari.html

MD

so the only way to call a Safari specific stylesheet is with javascript??

==>>>  only way to call a Safari specific stylesheet is with javascript??

someone may prove me wrong, but I couldn't come up with any non-javascript method to load anything except IE stylesheets, because only IE supports the conditional comment structure.

I'm going to prove myself wrong about the Javascript.   In your HTML, just attach a stylesheet, eg.

<link href="safari_only.css" rel="stylesheet" type="text/css" />

Then in the safari_only.css file, put all the styles inside an @media statement that will only apply to webkit-based browsers, eg.

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #testbox { background: red; }
}

Found the hack here:  http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/
As hacks go, it's not too ugly.  

btw... if I were you I wouldn't fix your problem this way.  Your issue is that your button widths are dependent on the font size, so different font rendering engines will cause different button widths.  Safari has a unique font rendering approach, which is making your problem obvious in Safari, but you really have the problem everywhere.  You can see it in Firefox too if you do any zooming in or out -- the buttons change size differently than the rest of the layout.  You would be better to get rid of the left/right padding on your button <a> element, and instead set the overall table width to 779px, and just set text-align:center on your table.menu79.  (And remove the text-align:left; on the <a> elements) If you can't figure it out from there, you really should ask a new question.