...

View Full Version : 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

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
Here's the page:

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



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



<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.


IE can't render empty tags, add &nbsp; 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 &nbsp; 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).


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
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum