Nav bar links not working with secondary banner

[portlandpiratesfan]

I created a second customized banner to use in my gallery pages, and I made the banner clickable to my home page as directed in the basic customization items #'s 3, 4, and 5. I was able to get all these things accomplished, except on the pages that utilize this banner, my nav bar is not working.

I would appreciate it if someone might be able to take a look at what I did and let me know where I messed up.

Thanks in advance for your help!

EDIT: here's an example of one of the galleries: Gallery (http://southernmainedigital.smugmug.com/gallery/6192139_2dcGE#390499732_kz5gs), and, of course, this only seems to happen in Internet Explorer.

[Allen]

I created a second customized banner to use in my gallery pages, and I made the banner clickable to my home page as directed in the basic customization items #'s 3, 4, and 5. I was able to get all these things accomplished, except on the pages that utilize this banner, my nav bar is not working.

I would appreciate it if someone might be able to take a look at what I did and let me know where I messed up.

Thanks in advance for your help!

EDIT: here's an example of one of the galleries: Gallery (http://southernmainedigital.smugmug.com/gallery/6192139_2dcGE#390499732_kz5gs), and, of course, this only seems to happen in Internet Explorer.
In IE6 your banner is clickable all over except for the black lines. :scratch So it
looks like the banner image is on top of the gif and the blank banner
parts/transparency is clickable. Weird, but I think I've seen this happen
before and have no solution.

[portlandpiratesfan]

In IE6 your banner is clickable all over except for the black lines. :scratch So it
looks like the banner image is on top of the gif and the blank banner
parts/transparency is clickable. Weird, but I think I've seen this happen
before and have no solution.

Hmmm... very curious! Thanks, Allen, for taking a look at it.

[jfriend]

I created a second customized banner to use in my gallery pages, and I made the banner clickable to my home page as directed in the basic customization items #'s 3, 4, and 5. I was able to get all these things accomplished, except on the pages that utilize this banner, my nav bar is not working.

I would appreciate it if someone might be able to take a look at what I did and let me know where I messed up.

Thanks in advance for your help!

EDIT: here's an example of one of the galleries: Gallery (http://southernmainedigital.smugmug.com/gallery/6192139_2dcGE#390499732_kz5gs), and, of course, this only seems to happen in Internet Explorer.

You've given my_banner a height of 106 pixels in your .category_Events #my_banner CSS. But, you've put an image into it that is 272 pixels and is surrounded by a link to make it clickable. It is a no wonder that the browser is confused. I think you can just make this separate banner image be 106 pixels high (crop off the transparent bottom of the image) so it stops overlapping with the navbar. Then, remove the height and width from the IMG tag in your banner so that banner height will come from the CSS.

Then, to make your banner clickable, you can try moveingthe <a> tag so that it encloses the my_banner DIV rather than is inside it. That should hopefully make the height of your banner come entirely from the background image height, make the background image height only as high as it needs to be and make only that area be clickable.

Give a shout if you need more specific help making these changes.

[Allen]

...
Then, to make your banner clickable, you can try moveingthe <a> tag so that it encloses the my_banner DIV rather than is inside it. That should hopefully make the height of your banner come entirely from the background image height, make the background image height only as high as it needs to be and make only that area be clickable.
...
John, I tried that but it looks like it makes the entire div clickable across the
top of the browser window no mater what the width banner width is.

<a href="/">
<div id="myBanner"></div>
</a>

Maybe this will work if only one banner or multiple banners have same width.
Didn't try it. Edit: nope, tried it.

<a href="/">
<div id="myBanner" width="xxx"></div>
</a>

[jfriend]

John, I tried that but it looks like it makes the entire div clickable across the
top of the browser window no mater what the width banner width is.

<a href="/">
<div id="myBanner"></div>
</a>

Maybe this will work if only one banner or multiple banners have same width.
Didn't try it. Edit: nope, tried it.

<a href="/">
<div id="myBanner" width="xxx"></div>
</a>

But, doesn't this at least solve the problem of making the navbar usable again? Even if the whole width is clickable, isn't that better than what he has now?

The surefire way to solve it would be to stop trying to make background images be clickable and just use two separate banners (one hidden with CSS in any given context) with a traditional <a href="/"><img src="xxxx"></a> in each. Or even one banner with two images in it, where one image is hidden with CSS at any given time.