<a href="/haxies/menumaster/"><img src="info.gif" border="0" alt="Info" width="22" height="22" style="vertical-align: middle;" />Info</a>
When I add the following DocType (XHTML 1.0 Transitional as inserted by BBEdit):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What am I doing wrong? The W3 validator claims it's valid. But Safari renders that line when I put the DocType declaration at the top. (which I assume kicks Safari into strict mode or some such thing)
Update: Many thanks to all the helpful/insightful advice. I suppose I should have been more clear as to what I was truly asking though. I know how to fix the problem, that's fairly simple. What I really wonder is why it was/is happening - I guess I was looking for someone to tell me it was incorrect code on my part and Safari was rendering it correctly and give me the correct code. Thus far, it seems as though it might be a Safari bug. Hyatt? ;)
Anyhow, as it's not a big deal obviously, I'm going to move on to cracking the whip on our programmers. heh. :)
Posted by brian at 03:13 PM
| Comments (19)
| TrackBack (0)
Related:
- Hiya Kids, it's Theming Time! - Oct 06, 2009
- Mighty Mouse with Some Theme Sauce - Jun 02, 2009
- WindowShade X 4.3 - Apr 24, 2009
- Sound of the Underground - Apr 20, 2009
- Welcome back. - Apr 17, 2009
Why not do:
<img src="info.gif" border="0" alt="Info" width="22" height="22" style="vertical-align: middle;" /><a href="/haxies/menumaster/">Info</a>
Posted by: Etan on March 5, 2004 3:54 PMEtan - well, I want the image to be part of the link....
There are several things I could do to workaround the issue, but I wondered if there is something I am doing wrong to cause Safari to behave like that.
Posted by: Brian on March 5, 2004 4:08 PMgorickey - what other browser are you seeing it in? I tested in Mozilla, Firefox, and IE... They all seem to render it as I expect. Those are images in my post, not actual code of course. ;)
Posted by: Brian on March 5, 2004 4:16 PMyou need to remove the style cues from the img tag and put them surrounding the entire link like so:
you should be able to use span or div tags.
Posted by: Walker on March 5, 2004 4:59 PMWhy not just turn off the ugly underlines and enjoy the beauty of of the formatted text?!
Posted by: Ben on March 5, 2004 4:59 PMwhoops
did it just strip my html?
umm.....put a span tag the put in your style commands, then the open link, then the img tag, then the info, the close the link, the close the span
Posted by: Walker on March 5, 2004 5:01 PMWalker - that didn't do it either. It still has the line and also loses the vertical alignment.
Posted by: Brian on March 5, 2004 5:41 PMBrian:
I thought I saw it in FireFox, guess not afterall...however OW 5 doesn't work, but it's only at b3 anyway...
Posted by: gorickey on March 5, 2004 6:50 PMLast I recall reading, OW 5 is still using an older version of WebCore, which may explain why a pre-1.2 build of Safari would also fail in this scenario. That leads back to Walker's question this evening . . .
Posted by: Ben on March 5, 2004 8:14 PMWalker - Safari 1.2 (v125)
You should be able to reproduce the issue with those two snippets of code. Surely it's not a Safari bug, it seems like such a common thing to do...
It is legal to enclose as many elements in an <a> as one wants, correct? (in this case just an <img> and some text)
Posted by: Brian on March 5, 2004 10:07 PMYeah, you can enclose however many elements you wish within an <a> tag.
I was able to reproduce all of your code and issues.
I think that the problem is caused by using the XHTML tags.
I think that their needs to be another way to do it in XHTML.
If you wish to have it validate and appear the way it should in Safari and all other browsers, use the head for HTML 4.01 transitional.
That should allow it to work.
I know that this seems like a backwards step but it will allow your code to work properly in most browsers without changing the way you are writing most of your tags.
Posted by: Walker on March 6, 2004 8:28 AMNot sure if this is the best approach. I'd honestly set the image as the background of the link and set padding-left of the link equal to the width of the image plus maybe a pixel or two for some mroe whitespace.
I don't have access to a text-editor/browser to test on right now so this may be way out in left field...
Assuming the underline is only on :hover can you simply set a:hover img{text-decoration: none;}? Honestly not sure if img would even respect that value. I don't think border has anything to do with this but that may be something to think of as well.
The easiest thing to do would be to simply set the image as the background of that a element and set the padding:left to the width as mentnioed above. Of course if you have a lot of links that can be a pain, but I know for a fact it will only underline the text and not the image, which will still be clickable.
You should be able to find information at alistapart.com or somewhere similar.
Posted by: Mike Czepiel on March 6, 2004 1:48 PMYou have two problems:
The "shortcut" method for stylesheets is superfluous in inline stylesheets; the ";" at the end is unnecessary.
Secondly, that type of stylesheet declaration in a non-block element is going to trickle it's way up the ladder. use the vertical alignment on the text itself, not the image if you're going to be putting in an inline element like the tag.
if that doesn't make any sense, think of it in reverse: the tag or tag will force all inline elements to inherit, whereas an inline element will not...
Did that help?
Posted by: HarmMac on March 7, 2004 9:49 PMI get the same strange rendering in Firefox 0.8 as in Safari.
Posted by: Christopher Anderton on March 15, 2004 10:55 AMThis is an issue with Mozilla engine and rendering XHTML 1.0 Strict (rather than HTML 4). It seems Firefox (and Safari) will treat everything within a HREF as a link, such that if the text decoration is set to underline, then any element within the HREF will be underlined, including the image. No way round it that I have found so far, bar the suggestions others have had.
Posted by: Glenn Walker on November 23, 2005 2:24 AMKeep comments on topic. If a comment is unrelated to this post, it may be removed or moderated.