New to this and need help! {margins and a:hover’s}

[mills_t]

Hi everyone,

I am just starting to understand html and css and have been designing my own site for about a week so please bare with me!

My problem lies within my main-header. I have a click-able logo at the top of my page which incorporates an a:hover and an a:link so that when my mouse is over it the logo changes to another image (same image, colours inverted) This works in chrome, but not in FF. Can anybody help?

HTML:

Logo

CSS:

.logo-link {width:150px; height:105px;text-indent:-9999px;display:block; margin-bottom:10px;


}



.logo-link:link {background:#fff url(img/logo.png) center top no-repeat;}

.logo-link:hover {background:#fff url(img/logo2.png) center top no-repeat;}

My other problem is within the same main-header and all browsers show my logo as having a very long right margin, I have tried resetting the right margin to 0 but to no avail. Same code as above.

Any help would be much appreciated!

Cheers in advance :)

mills_t

[Paulie_D]

It works in FF for me : http://jsfiddle.net/Paulie_D/zWZZk/3/

I do notice an extra couple of characters in your logolink background-color though. Change this to:

background-color:#FFFFFF;}

However, I doubt if that is the problem.

As for the long right margin, I’m not sure what you mean. If you do not define a width for ‘main-header’ it will take up the whole width of the page.

As for the ‘header-logo’ div, I’m not sure what purpose this serves.

[mills_t]

I have solved the right margin width problem as the header-logo (a separate logo I will be putting in) was not within the main header div. I solved it by doing the following:

Logo

I changed the background-color and that has actually solved the problem! Not actually sure why, but it now works.

Thanks for your help, and has made me understand a little bit more the importance of the order of code!

Cheers.

[Author]

Posts