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

12-29-2007, 08: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.

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


<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" />


<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 id="bigbox">
<div id="splash"></div>
<div id="linkscol"></div>
<div id="latestnews"></div>
<div class="200square"></div>
<div class="200square"></div>
<div id="footer"></div>
<div id="bassman"></div>




/* 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!


12-29-2007, 08:43 PM
Remove the i tags--that is not legitimate use of them.

12-29-2007, 09: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!

12-29-2007, 09:40 PM
Or you could have just applied it to just a...which gives you a failsafe if someone presses "Back" with it active.

12-29-2007, 10: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;

12-30-2007, 02: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?

12-30-2007, 02: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>

12-30-2007, 03: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.