Strict doctypes, links, and problems with IE

Echos · 12-03-2005, 07:56 PM

Does any one know the reason why my links do not appear in IE when I use a strict doctype? They appear in firefox without issue. I have it so that what people see is the background image I set in the CSS (I also set the width and height in the CSS). Any help would be greatly appreciated.

rmedek · 12-03-2005, 08:27 PM

Yes. It's clearly an issue with line 12 in your css file.

rmedek · 12-03-2005, 08:28 PM

Oh, I mean, please post either your code or a link to the page.

Echos · 12-03-2005, 09:19 PM

Sorry. I guess I forgot a few details. Here's the page:

http://www.rustipher.com/~loni/

_Aerospace_Eng_ · 12-05-2005, 07:03 AM

IE can't render empty tags, add   in between the a tags of your links and use this for the relevant css

Code:

div.sidebar a{
display: block;
width:150px;
height:30px;
font-size:1px;
line-height:0px;
}

You should always use some type of units in CSS.

Bill Posters · 12-05-2005, 07:29 AM

Quote:

Originally Posted by Echos

Here's the page:

http://www.rustipher.com/~loni/

Quote:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.rustipher.com/~loni/strict.dtd">

Eh?

Quote:

Code:

<link id="thislink" rel="stylesheet" type="text/css" href="JavaScript:css_choice()" ></link>

Clever, but not entirely practical, unless you prefer to have the delivery your page css entirely dependant on javascript.
Given that the basic layout doesn't change from one stylesheet to the next, it might be an idea to have a default stylesheet with basic layout declarations and then use the js stylesheet doodad to select a themed stylesheet to overlay upon the basic layout. That way, a least you get some kind of layout when js isn't available.

Quote:

Originally Posted by _Aerospace_Eng_

IE can't render empty tags, add   in between the a tags of your links

Alternatively, add something more useful such as the text equivalent of what the link image says. Throw the anchor text itself out of the way by using a negative text-indent value.

Echos · 12-05-2005, 10:43 PM

Thank you _Aerospace_Eng_, adding the   kinda makes my images appear. But the key was the type of units you mentioned (had to use line-height:30px in order to make the images appear fully).

Quote:

Alternatively, add something more useful such as the text equivalent of what the link image says. Throw the anchor text itself out of the way by using a negative text-indent value.

I'm not quite sure what you mean by this. I'm familiar with the negative text-indent value making it so that the words don't appear on the page, but I can't seem to find anything about using it with an anchor on google. (Perhaps I just don't know what to search for)

Bill Posters · 12-06-2005, 08:46 AM

Quote:

Originally Posted by Echos

I'm familiar with the negative text-indent value making it so that the words don't appear on the page, but I can't seem to find anything about using it with an anchor on google. (Perhaps I just don't know what to search for)

There's really nothing unique about using negative text-indent with an anchor as compared to using it with any other type of text.
It's worth having more useful text within the anchor elements of your menu, not least because it gives users something to see and click on if they are viewing without CSS. It also helps bestow a sense of value and purpose to the link in the eyes of the search engines.
It also ensures that the link is usable
It's generally worthwhile to view a page without CSS to see if it remains usable. You should try to consider how the page might be presented to users with screen-readers or text-browsers. Without actual content within your anchor tags, a screen reader will either read out the url or may even ignore the link completely. Similarly, without content within the anchor tags, the link is likely to prove problematic for those using text browsers.

Tbh, I'm not sure how Google handles links with no content. It's possible that it doesn't follow them at all. It's possible that it may mistake them for internal fragment identifier links, rather than site navigation links, though, again, I'm not sure how it handles those either.

The use of a negative text-indent is simply to push the text of the links out of view. Without the text-indent, the text of the links will sit over your menu images and that's not going to look too good.