Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Strict doctypes, links, and problems with IE

    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.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yes. It's clearly an issue with line 12 in your css file.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Oh, I mean, please post either your code or a link to the page.

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry. I guess I forgot a few details. Here's the page:

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

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Echos
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.rustipher.com/~loni/strict.dtd">
    Eh?

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

  • #7
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Last edited by Echos; 12-05-2005 at 10:47 PM.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •