Netscape Quirk?

[kaseytraeger]

Good evening to all the TCH family! I hope you've had a wonderful week and are looking forward to an even better weekend. I'm looking at a rainy weekend of XHTML and CSS coding as I continue to work on the restaurant web site I've been developing over the past couple of weeks.

 

I've found something in one of my web pages that works properly in Internet Explorer but does not work properly in Netscape. If you visit the page Village Pantry Breakfast Menu, you will see a navigation menu in the left-hand column. Each of the stockpot images is supposed to be a link to another web page. If you open this page in Internet Explorer, you will see that the links work correctly. I've put in some dummy links as placeholders for the time being, so if you click on one link, you'll get to Google, another takes you to Yahoo!, another to MSN and the fourth one to TCH (how could I forget my favorite web host in the whole wide world?). These links work properly in Internet Explorer.

 

If you open the web page in Netscape, the stockpot images don't even register as a link! Clearly, this is a very bad thing because how are people supposed to navigate the web site if they can't use any links?!?

 

I don't see anything wrong with my code for the navigation bar. It's a simple <ul> with each graphic as an <li> within the <ul>. The base skeleton for the navigation bar looks like this.

><ul>
 <li><a href=" ... "><img src=" ... " /></a></li>
 <li><a href=" ... "><img src=" ... " /></a></li>
 <li><a href=" ... "><img src=" ... " /></a></li>
 <li><a href=" ... "><img src=" ... " /></a></li>
</ul>

This should work just fine, shouldn't it?

 

Please take a look at the web page and it's associated code. I'd appreciate any comments and suggestions you have to offer.

 

Thanks so much! Have an absolutely wonderful, fun weekend!!!

 

[boxturt]

That is odd, and while I can't see the exact cause I can tell you that if you eliminate the reference to base_style.css the problem goes away. (of course you lose the formatting)

 

Maybe that narrows it down a little?

[kaseytraeger]

boxturt,

 

Your finding is interesting. I have one to add to that ...

 

If I turn the big wooden graphic that says "The Village Pantry Est. 1949" into a link, it functions properly as a link! The only thing that separates the navigation bar from the rest of the page content is that the navigation bar is its own <div>. But I don't see what's wrong with the #navigation <div> to make it do that...

 

Another test I tried was to remove the <ul> and <li> from the navigation bar. I simply included the images as normal images with <br /> between each image. Even that didn't work, so I don't think it has anything to do with displaying the graphics as list elements.

 

Have you any other thoughts about other avenues I can try?

 

My wonderful hubby wants to get me out of the house for a few hours because I've been bashing my head on my desk over this, so I'll be out for a while. But I'll check back in here as soon as I get back.

 

Thanks for taking a look at this for me. I certainly appreciate it!

[boxturt]

it doesn't like line 12 (position:absolute;) in base_style.css If you take it out or change it to position:relative; the links become active but the rest of the page shifts down.

[btrfld]

Hi Kasey.

You may have already gone way past this, but I had a hunch, thanks to Ty's observation earlier.

 

If you add a z-index to the #navigation rule:

#navigation{

  text-align:center;

  position:absolute;

  float:left;

  width:165px;

  margin:0px;

  padding:20px 0px 0px 0px;

  z-index: 1;

}

it suddenly works in the Gecko browsers. Firefox and Opera for me. I guess the block must have fallen behind somehow.

 

Anyway, the Breakfast Menu looks great. Nice work. Thumbs Up

Jim

[kaseytraeger]

To Jim and Ty --

 

First, thank you for taking time out of your day to look at my code.

 

Jim, I haven't been on the forums since the wee early morning hours of 02/28, so I didn't see your post until just this evening. I wish I had seen that it was just a matter of adding a z-index property! How much hassle would that have saved me?!? (And thank you very much for the compliment about how the page looks. It's been a slow, somewhat arduous process learning how to lay out all the pieces, but I think it's finally coming together. You've been a very important part of my learning, and for that I give you big thanks! Soon, I'll be adding random pictures of different menu items, and I'm sure that will add a new bumper crop of layout issues to tackle. But for now, I'm going to show the menu as-is to the restaurant owner and get his take on it.)

 

Based on what Ty discovered about the position:absolute and position:relative, I fiddled and faddled with the web page for a few hours, finally falling into a solution that seems to work (in IE5+ and NS6.2, at the very least, since those are the two browsers I currently have installed on my computer). Of course, I've also got a lunch menu and a beverages & desserts menu, each of which had to be modified, as well, especially the beverages menu (because it has only a single, I AM A SPAMMER column going right down the center of the page).

 

May I ask how Ty's observation about the position:absolute caused you to think that it was a problem with the z-index? I don't quite see the relation between those two properties.

 

Thanks again to both of you for providing great help and taking time out of your day to look at my problem. I really do hope that one day soon I'll be much, much more competent at CSS and can actually start doing troubleshooting of other people's sites like you both do. Kind of a way to pay back the TCH family, ya know?

 

[btrfld]

Actually, you're right. It didn't have anything to do with the absolute/relative thing. It was Ty's observation that it was something in base_style that was causing it. I guess it just occurred to me that something in the style sheet was getting in front of the links, since they were obviously there and correct.

 

Who knows how hunches work? Certainly not I. Probably Magic. Anyway...

 

Nice work.