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

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

chazfort

12-29-2007, 07:23 PM

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>

<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

Apostropartheid

12-29-2007, 07:43 PM

Remove the i tags--that is not legitimate use of them.

chazfort

12-29-2007, 08:26 PM

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!

Apostropartheid

12-29-2007, 08:40 PM

Or you could have just applied it to just a...which gives you a failsafe if someone presses "Back" with it active.

Excavator

12-29-2007, 09:00 PM

Hello Brad,
CyanLight is right, the i tag needs to go. If you want italic text there, here is the way to do it:

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

chazfort

12-30-2007, 01:14 AM

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?

Excavator

12-30-2007, 01:45 AM

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:

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

Apostropartheid

12-30-2007, 02:28 PM

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.