rollover mysterious grey bar

paulnulty / 2011-04-07 12:06:33   

Hi, mysite is www.paulnulty.co.uk

paulnulty / 2011-04-07 12:09:25   


Hi, mysite is www.paulnulty.co.uk, at the top I have an image which links to the main page.

In Firefox 3 it's fine yet when I use firefox 4 or explorer when you rollover the image a grey line appears under it.

  1. I assume it's do do with the fact I have all links set to go to a background of grey. I though in order to avoid this all i'd need to do is wrap the info in <dive></div> but it doesn't work at all.

Does anyone have any ideas how to stop the mysterious grey line?
P

rickykappa / 2011-04-07 12:34:25   

did you look at your code? no misteries:

<a href="http://www.paulnulty.co.uk"> <br />
<img border="0" src='http://www.paulnulty.co.uk/files/20110327-brand-small1.jpg' width='110%'; <br />
</a>
you have 2 line breaks inside the <a> tag...
btw your img tag isn't properly closed
;-)

paulnulty / 2011-04-07 13:03:02   
  1. Thanks ricky,
  2. Where are the breaks comming from? The code I have inserted is as follows:
  3. <a href="http://www.paulnulty.co.uk"> <img border="0" src='http://www.paulnulty.co.uk/files/20110327-brand-small1.jpg' width='110%';</a>

It's all 1 line. Could this be a bug with Indexhibit or would I be right in saying i'm doing something moronic?!

rickykappa / 2011-04-07 13:27:20   

no bug, it's a feature: don't type line breaks in the pre-nav box (and close your img tag!)

paulnulty / 2011-04-07 13:34:05   

Ricky,
I've literally tried everything and cannot get it to work. I've not entered any breaks so can only assume something buggy is entering breaks where I can't see them. I've now closed the image tag but all code is on one line so there are no breaks at all.

I actually wonder whether it might be bug in the collapsing menu code?

paulnulty / 2011-04-07 13:35:09   

PS I've now spent a full week trying to resolve this and a whole host of other issues and I'm starting to get VERY disheartened!

Vaska A / 2011-04-07 13:45:35   

Calm down. This forum tries to help people but if you read the forum rules it's rather clear that people are expected to put in the work. We can't do it all around here - everybody, including myself, is volunteering our time to help.

You have a grey background because that is what your CSS says to do. The reason it doesn't appear in other browsers is not the issue - the issue is that your CSS has it setup to work that way.

  1. a:link { text-decoration: none; color: #ffffff }
  2. a:active { text-decoration: none;}
  3. a:visited { text-decoration: none; color: #ffffff; }
  4. a:hover { color: #000000; background-color: #ABABAB; text-decoration: none;}

The hover state.

A better way to do this would be wrap your logo in h1 tags and then style that up and also the link attributes. For instance:

  1. h1 a:link { text-decoration: none; color: #ffffff }
  2. h1 a:active { text-decoration: none;}
  3. h1 a:visited { text-decoration: none; color: #ffffff; }
  4. h1 a:hover { color: #000000; background-color: transparen; text-decoration: none;}

Problem solved.

I'll add that I (and many others) have posted this kind of advice many times over the years to this forum - searching on links and link colors, etc. is a good thing to try as well (and for nearly any other issue too).

paulnulty / 2011-04-07 14:17:39   

Vaska,
Thank you for the advice. Believe it or not I've spent ages searching.It's hard to search though when you don't know what you're searching for!

The efforts you and other 'Inexhibitors' put is is much appreciated.
P

Vaska A / 2011-04-07 14:41:11   

Great...happy to hear you are rolling again. Now, on to the next problem set to solve!

;)

This thread has been closed, thank you.