serving CSS to Safari (Mac)

ctoz

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

tburger

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

ctoz

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

tburger

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

ctoz

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

ctoz

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>
</body></html>

serving CSS to Safari (Mac)

re: serving CSS to Safari (Mac)

re: serving CSS to Safari (Mac)

re: serving CSS to Safari (Mac)

re: serving CSS to Safari (Mac)

re: serving CSS to Safari (Mac)

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about