468,103 Members | 1,332 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,103 developers. It's quick & easy.

serving CSS to Safari (Mac)

ctoz
13
Didn't think I'd ever need to serve CSS to Safari--but that's what I need: tried all sorts of compromises on styling, just about exhausted the possibilities there, won't bore you with 'em.

Anyone?

cheers

CT
Jul 23 '07 #1
5 1574
tburger
58
What are the primary styling issues? Is it alignment? Or perhaps the way fonts are rendered?

If you could give us some code or a link to a site, that would help out a lot.

Tom
Jul 23 '07 #2
ctoz
13
Found a couple of hacks:
http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/
http://www.simiandesign.com/blog-fu/2005/11/safari_css_hack.php

It's an alignment problem, tested so far on Mac, and not yet on win. Link text at the bottom of a div , below 2 layers, each with relative positioning, negative margin on one layer... StrictDTD.

Safari renders the text correctly, but Opera and Firefox put the text about 8px too high, overlapping the main content. So if I style the link for them two villains,
I need to feed SDafari something else.

The alignment is totally unrelated to the negative margin on the layer.

CT
Jul 23 '07 #3
tburger
58
Have you tried a global reset? This is commonly used, in some form, to account for the differences among browsers.

*{
margin: 0px;
padding: 0px;
}

The '*' character is a global selector. This means that all html elements will now have an initial margin and padding of 0px.

Yahoo also offers some cross-browser assistance, check it out:

http://developer.yahoo.com/yui/reset/

This file can be linked to your HTML file as an additional style sheet and will essentially have the same effect as the global reset.

Do you have this up anywhere where I can take a look at it?

I'm working primarily on a mac, so I have safari to test with.

Tom
Jul 23 '07 #4
ctoz
13
Forgot about the reset, many thanks! too tired to un-do the fixes I just applied, will leave it til the morning. DTD has no effect... watch this space...

CT
Jul 23 '07 #5
ctoz
13
Global fix alters the problem slightly, but Safari still displays the link tag lower.
The link spacing is in fact related to the positioning of the elements preceding it.

I've now gone to work, where I've tweaked for windows. So it may look wildly off on a mac. Any help there would be great.

The code below is ok on IE6, 7, Firefox and Opera, but needs fiddling for Safari Win.

I've bundled up the css & html into one file, and deleted 7/8 of the html ... : )

cheers

CT


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>shortchange</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{
margin: 0px;
padding: 0px;
}
body {background:#444; padding:36px 0 0 0; font-size:13px}

.row {margin:0 0 18px 36px; float:left; clear:both}
.node {margin:0 12px 0 0; float:left; height:4.8em; width:6.4em;}

.hex, .mov {position:relative;
font:bold 1.5em/0.3em courier new, bitstream vera sans mono, monospace; letter-spacing:-0.3em; }
.hex {z-index:12; color:black;}
.mov {z-index:11; color:#b13; top:-1.9em}

/* .mov top is too big for Safari WIN, and not checked on mac */
/* NB, both classes visible for testing: .mov hidden during script application */

a.hexname {position:relative; top:-3.7em; font:0.76em arial verdana, sans-serif; color:white; text-decoration:none; overflow:visible;}
/* top dimension is for Safari, but is not currently tested on mac */

a.hexname:hover {background:black;}

a.hexname {position:relative; top:-3.7em; #}
/* for not-Safari browsers: not tested on mac */

/* javascript colours: .a, .b {color:#e10} moving: {color:#d02} */
</style>
</head><body>
<div class="row eight">
<div class="node _81">
<div class="hex A A A A A A" id="h01">
<p class="a8 _6">-------<p />
<p class="a8 _5">-------<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M M M" id="m01">
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Heaven</a></div>
<div class="node _82">
<div class="hex A A A A B B" id="h34">
<p class="b8 _6">--- ---<p />
<p class="b8 _5">--- ---<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M N N" id="m34">
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Great Power</a></div>
<div class="node _83">
<div class="hex A A A B A B" id="h05">
<p class="b8 _6">--- ---<p />
<p class="a8 _5">-------<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N M N" id="m05">
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Waiting</a></div>
<div class="node _84">
<div class="hex A A A B B A" id="h26">
<p class="a8 _6">-------<p />
<p class="b8 _5">--- ---<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N N M" id="m26">
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Great Increment</a></div>
<div class="node _85">
<div class="hex A A A B B B" id="h11">
<p class="b8 _6">--- ---<p />
<p class="b8 _5">--- ---<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N N N" id="m11">
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Peace</a></div>
<div class="node _86">
<div class="hex A A A B A A" id="h09">
<p class="a8 _6">-------<p />
<p class="a8 _5">-------<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N M M" id="m09">
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Little Increment</a></div>
<div class="node _87">
<div class="hex A A A A B A" id="h14">
<p class="a8 _6">-------<p />
<p class="b8 _5">--- ---<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M N M" id="m14">
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Great Possession</a></div>
<div class="node _88">
<div class="hex A A A A A B" id="h43">
<p class="b8 _6">--- ---<p />
<p class="a8 _5">-------<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M M N" id="m43">
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Resolution</a></div>
</div><!-- row eight -->
</body></html>
Jul 24 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Bernard | last post: by
2 posts views Thread by laredotornado | last post: by
2 posts views Thread by jdlwright | last post: by
2 posts views Thread by Simon Wigzell | last post: by
34 posts views Thread by Simon Wigzell | last post: by
16 posts views Thread by Edward | last post: by
7 posts views Thread by Tom | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.