February 16, 2004

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 (3)

Comments

1

To tim:
No, that doesn't seem to be related to the bug I posted. Turn the BORDER on for your table and see if something stretches the cells or such.

By the way, the bug i thought to have found isn't really one. At leas it is easily fixed by defining an display: block in css for the img tag.

Posted by: Stefan Seiz | February 26, 2004 7:45 PM

2

If you have a minute can you look at this site. Have a look at the "How we do it page" and the What we do page. Both have been created in Dreamweaver on MAC OSX. They were copied and from what I can see look identical. But the both IE and Safari show one page moved over about 2 pixels.

Any Ideas? Is this the same bug as the one you post?

Thanks for your time
Tim

Posted by: Tim | February 26, 2004 7:26 PM

3

I assume your page is in strict mode. Safari's rendering is correct. You need to read this article for an explanation:

http://devedge.netscape.com/viewsource/2002/img-table/

Basically in strict mode, Safari and Mozilla will not clip out the descent underneath an image. This is correct according to the standards, and is the reason both Safari and Mozilla added "almost strict" mode.

Posted by: hyatt | February 16, 2004 10:53 PM

Post a comment