I have a string of anchor tags arranged as a menu bar horizontally on a page. Pretty basic stuff is included in the css to give some colour and rollover colour change.
The page links have been in place in the Html code and all are tested and confirmed accurate. This topic has to do with the browser only,( I think). I mention this in case there might be concerns about the anchor tags being correctly coded. Yes, they are good.

So I modified the css to get it looking the way I thought was correct for the page in terms of placement, Background colour, rollover effect, etc. I did a 'visual' check of the page using 4 different browsers. Opera, IE6, Mozilla, and another one from the text editor I use (Editplus) which i think is IE based. Not sure. Anyway, back to the problem... There were some differences between browsers, of course, but nothing serious, nothing unacceptable.

The page was good to go... so I uploaded the new css page and opened the site using Opera. Results were as per the local test. Ditto for IE6. These browsers were good. When the mouse pointer approaches the boundary of the text, the rollover and link activation occurred just fine and wonderful.

Mozilla, however doesn't want to handle the colour change on rollover. The mouse pointer had to be right in the middle of the link and near the top edge of the text to recieve the rollover effect to activate the link.

I have been using Mozilla for 8 months or so and I have never seen this effect before today. Can someone tell me what might be causing this? Where do I begin to correct it? It can't be in the html page since it works fine in three other browsers. Or can it ?
The page in question is at jlhaslip.trap17.com/index.html. The linked pages are not yet uploaded, so the links are dead. 404's will happen if you click on them. If you want to see the code, do a view > source. If you want to see the css, I'll post it here if neccesary.

Thanks.

 

 

 

Reply

Hmm - that is weird that it happened to you.
I just tried it on a couple of my browsers (including FireFox) and I didnt have that problem on any of the pages...
It might be that you changed preferences or something by accident in your browser prefs. I would try maybe re-downloading the browser if you cant figure it out using the preference pane.
.
.
.
Ya I just had my friend try it too and it seems to work fine for him. Mebbe its doin it just to get you angsty haha. Websites have a habit of doin that - at least to me.

Good luck with yer site mate.

Reply

It's cos #main is actually covering up all but the very top of your menu. You need to move #main down or give #nav a z-index higher than #main so it sits on top.

Reply

OH! That would do it, I suppose. (like I knew that)

But it works in the other browsers a-okay, only in mozilla is it a problem.
I'll do your fix and re-check in the morning.

What's the odds that the browser preference is an issue here???

And thanks for the pointer. The z-index solution will be the first thing I try because the positioning is a compromise arrangement so that all three browser look similar. Not the same, similar.

I would rather not move the #main. I guess I will if I must.

Reply

If you install the web developer extension for Firefox and then 'Outline/Block level elements', you'll see the overlap. That extension is a good one to have - lots of features and tools for web design/development.

Reply

AWESOME TOOL

It does so many things it is in deniably this greatest thing since.... well, it is pretty darned nice to have working for you. The Web Developer Tool alone is worth picking up a Firefox Browser...

It has already been used on other pages and I believe will be a favourite for a long time.

Thanks bunches for the pointer Tyssen... I owe you big time...

Reply