hover effect on backgroun logo image

[ethical]

Hi,

I could not find a solution for this and it almost seems like it does not bother anyone, but the

the a:hover effect when mousing over the logo (it flashes) (which is set as a background) is driving me mad.

How do i set a special a:hover so that there is no colour change or "flash" when mousing over the logo/background?

Now if i set a background and hard code the link to my logo image in the CSS, this solves the hover effect on the background but now i cant link my logo to the home page. If I add in an a href tag around the logo, it dissappears.

here is my header currently:

Code: Select all

 <div id="header">
           <div id="lang">{lang}</div>
           <h1><img src="images/cms/thfc-logo.jpg"></h1>
   <hr class="accessibility" />
   </div>

if i do this:

Code: Select all

 <div id="header">
           <div id="lang">{lang}</div>
           <h1><a href="index.php"><img src="images/cms/thfc-logo.jpg"></a></h1>
   <hr class="accessibility" />
   </div>

the logo dissappears.

using the default hover effects and simply added a background image to the header div.

Thanks

john

[Dr.CSS]

If you use the default install header h1 a then add the same call for a:hover so it won't flash it's a problem with IE, bet it don't happen in Firefox...

div#header h1 a {
/* you can set your own image here */
  background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px;
  display: block;
  height: 80px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#header h1 a:hover {
/* you can set your own image here */
  background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px;
  display: block;
  height: 80px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

[ethical]

Hi Mark,

Thanks I was mistaking the hover effect in firefox for the flash effect I was seeing in IE however I still dont have a solution.

If I add your code it does not change the ie problem. ( I had tried adding something similar to no effect as well)

see here: http://www.ethicaltech.com/cms/

is it possible to clear this up?

here is my styling (made a few changes now):

Code: Select all

div#header {
   height: 111px;   /* adjust according your image size */
   background: #ffffff url(images/cms/thfc-background.jpg) 0 0px;
   overflow:hidden;
}

div#header h1 a {
/* you can set your own image here */
   background: #ffffff url(images/cms/thfc-logo.jpg) 0 0px no-repeat;
   display: block; 
   height:111px;             /* adjust according your image size */
   width:313px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#header h1 a:hover {
/* you can set your own image here */
   background: #ffffff url(images/cms/thfc-logo.jpg) 0 0px no-repeat;
   display: block;
   height: 111px;             /* adjust according your image size */
   width:313px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

If not, how do I add the image to the template so that the logo will show up when it is linked?

thanks a lot for your help

Regards

John

[Dr.CSS]

Try just putting the image in the header and not the h1 link...

[ethical]

thanks, I ended up hard coding the logo reference and link in the template and removed the H1 tags. it works now in both browsers.