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 2007
    Location
    Bellaire, MI
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Firefox won't show an image connected to a#id:link w/o .html

    Very strange - I have a navbar with seven a hrefs, six of which are internal filename.html links, and one of which is http://artmeetsearth.blogspot.com/

    For some reason, firefox "loses" the link on the page for the a href without the html. Adding "index.html" to the end of the href solves the problem. In other words, a link ending in .html works fine, but changing it out to the URL above makes the link disappear from the page. It works fine in Safari and in the preview for CSSEdit. The code validates. Any idea why this is?

    HTML and CSS are fairly short, so I'll post them here. Note that the problem is with the "blog" ID.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html>

    <head>
    <title>Institute for Sustainable Living, Art & Natural Design [ISLAND]:: Art Meets Earth</title>
    <!-- Source File -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css">
    <link rel="stylesheet" media="screen" type="text/css" href="frontpage.css" />
    </head>

    <body>

    <div id="islandbanner"></div>
    <div id="navbar">
    <div id="navmenu">
    <a href="events.html" id="events"><i>View/Register for Events</i></a>
    <a href="about.html" id="about"><i>About Us</i></a>
    <a href="skills.html" id="skills"><i>SkillSwap</i></a>
    <a href="donate.html" id="donate"><i>Donate</i></a>
    <a href="volunteer.html" id="vols"><i>Volunteer</i></a>
    <a href="http://artmeetsearth.blogspot.com/" id="blog"><i>Blog</i></a>
    <a href="contact.html" id="contact"><i>Contact Us</i></a>
    </div>
    </div>
    <div id="bigbox">
    <div id="splash"></div>
    <div id="linkscol"></div>
    <div id="latestnews"></div>
    <div class="200square"></div>
    <div class="200square"></div>
    </div>
    <div id="footer"></div>
    <div id="bassman"></div>

    </body>

    </html>

    CSS:

    /* Specific CSS for the index.html page */

    body {
    background: #030 url(greenlines.jpg);
    font: 12px Arial, "Lucida Grande", sans-serif;
    color: #333;
    }

    #islandbanner {
    height: 60px;
    margin: 0;
    padding: 0;
    background: url(islandlogobanner.png) no-repeat;
    }

    #navbar {
    height: 30px;
    width: 800px;
    margin: 0 auto 10px 100px;
    background: #fff url(blugrad.jpg) repeat-x;
    }

    #navbar a {
    position: absolute;
    text-decoration: none;
    }

    #navmenu i {
    visibility: hidden;
    }

    a#events:link {
    left: 100px;
    height: 30px;
    width: 242px;
    background: url(navicons_01.png) no-repeat;
    }

    a#events:hover {
    background: url(navicons2_01.png) no-repeat;
    }

    a#about:link {
    height: 30px;
    width: 95px;
    left: 342px;
    background: url(navicons_02.png) no-repeat;
    }

    a#about:hover {
    background: url(navicons2_02.png) no-repeat;
    }

    a#skills:link {
    left: 437px;
    height: 30px;
    width: 126px;
    background: url(navicons_03.png) no-repeat;
    }

    a#skills:hover {
    background: url(navicons2_03.png) no-repeat;
    }

    a#donate:link {
    left: 563px;
    height: 30px;
    width: 77px;
    background: url(navicons_04.png) no-repeat;
    }

    a#donate:hover {
    background: url(navicons2_04.png) no-repeat;
    }

    a#vols:link {
    left: 640px;
    height: 30px;
    width: 98px;
    background: url(navicons_05.png) no-repeat;
    }

    a#vols:hover {
    background: url(navicons2_05.png) no-repeat;
    }

    a#blog:link {
    left: 738px;
    height: 30px;
    width: 55px;
    background: url(navicons_06.png) no-repeat;
    }

    a#blog:hover {
    background: url(navicons2_06.png) no-repeat;
    }

    a#contact:link {
    left: 793px;
    height: 30px;
    width: 107px;
    background: url(navicons_07.png) no-repeat;
    }

    a#contact:hover {
    background: url(navicons2_07.png) no-repeat;
    }

    I'll post these to http://www.artmeetsearth.org/csstest/index.html asap.

    Thanks for any advice!

    Brad

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Remove the i tags--that is not legitimate use of them.

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Location
    Bellaire, MI
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks - I changed the <i></i> to a span class="hidden", which is likely a more appropriate way to add that markup.

    It didn't solve the problem, but I think I discovered what did. It's not the link text that screwed it up, it's the fact that once it's been visited, it no longer falls under FF's "link" class. Adding the "visited" psuedo class after the "link" to share the rule fixed it!

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Or you could have just applied it to just a...which gives you a failsafe if someone presses "Back" with it active.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,738
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello Brad,
    CyanLight is right, the i tag needs to go. If you want italic text there, here is the way to do it:
    Code:
    #navbar a {
    	position: absolute;
    	text-decoration: none;
    	font-style: italic;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Dec 2007
    Location
    Bellaire, MI
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Just a comment on the <i> - I don't actually want italics, but saw in this tutorial on A List Apart (http://www.alistapart.com/articles/imagemap/) that you could use the <i> tag as an otherwise meaningless hook for CSS.

    Is that a bad idea? Granted, it seems like a span class works just as well, but why not use an otherwise worthless tag - it's still valid code, right?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,738
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    I see what he's doing there...
    but I'm not sure why.

    Why put text in then make it invisible... Can anyone say if there is anything wrong with this:

    Code:
    <div id="navmenu">
    <a href="events.html" id="events"></a>
    <a href="about.html" id="about"></a>
    <a href="skills.html" id="skills"></a>
    <a href="donate.html" id="donate"></a>
    <a href="volunteer.html" id="vols"></a>
    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Because there is no text for users not using CSS, images or some other accessibility issue.

    span is a better hook for stuff. Dunno why you'd use i...

    In the next flavour of HTML, HTML5, the i tag has an official meaning: to italicize text that typographic styles in the language require. For English, this'd be things such as books, ships, etc. This is personally what I use it for.
    Last edited by Apostropartheid; 12-30-2007 at 03:33 PM.


  •  

    Posting Permissions

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