February 16, 2004 Flattr this

Safari Rendering Glitch

Just came across a case where Safari does a bad job rendering a page as expected. I am not sure if this was the same before Safari V 1.2

Assume the following css formatting:
a { text-decoration: underline; padding: 1px;}
a:link { color: #0078F0; }
a:visited { color: #0078F0; }
a:hover { color: #fff; background-color: #0078F0; text-decoration: none; }
a img {
border: none;

Then a page with content similar to this:

<a href="#">Link Title<br />
<img width="100" src="image.jpg" /></a>
<br />
<a href="#">Link Title<br />
<img width="100" src="image.jpg" /></a>
<br />

With this, Safari will apply the background color of the a:hover style also to the image which is inline the <a> tag. You'll notice the background being applied to the right and bottom of the image which looks real ugly.

IE5 Mac renders this much better. See below:

Safari IE 5

Update: this seems to have been more a case of Safari not going into Quirks-Mode on my testcase and thus displaying the page as it did. The FIX for this is easy. Use: "display: block;" for the image tag (has side effects often unwanted) in your css or style="background-color:transparent; inline the a tag.
Posted in: by seiz | Comments ()