CMS Made Simple Forums

Posted: **Sun Jan 21, 2007 11:19 pm**

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

Posted: **Sun Jan 21, 2007 11:48 pm**

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 */
}

Posted: **Mon Jan 22, 2007 2:27 pm**

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

Posted: **Sat Feb 03, 2007 4:21 am**

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

Posted: **Tue Feb 13, 2007 3:36 pm**

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.

CMS Made Simple Forums

hover effect on backgroun logo image

hover effect on backgroun logo image

Re: hover effect on backgroun logo image

Re: hover effect on backgroun logo image

Re: hover effect on backgroun logo image

Re: hover effect on backgroun logo image