cms_selflink rollover and no border

[Rabel]

Hi Guys,
I am using a code like this on a next and prev

{cms_selflink dir='next' image='templateimgs/next.jpg' lang='0' imageonly='1'}

But it is putting a purple border around the "next image" if it has already been visited and a blue one if you havent been there.

http://www.norachase.com/index.php?page=skins3details

I would also like to add a rollover when you go over the button, please let me know how I can do that. I tried to get the
img coding with javascript rollover
piece to work forever and couldn't. Please let me know what I can do to get this to work.

Thanks.
Randy
P.S. the images in question are near the bottom in the center of the page. But should be easy to find.

[Dr.CSS]

You will have to treat these as you would any other link hover effect...

Wrap them in a div or something that you can target and remove the image call in the tag, then use CSS to call the static and hover state images...

It is bordered because you don't have img {border:none} or a img {border:none}...

[maranc]

I thing it's not problem with image border but with a link, because in Opera it's look without border.
This blue color is #0000cc (default link color if not specified in style sheet). To prevent display border in any html elements use in your css:

* {
outline: none;
border: none; }

Your images next prev are in a link, fragment of code:

a href="http://www.norachase.com/index.php?page=skins6" title="skins6" class="blah">



Marek A.

[Rabel]

I thing it's not problem with image border but with a link, because in Opera it's look without border.
This blue color is #0000cc (default link color if not specified in style sheet). To prevent display border in any html elements use in your css:

* {
outline: none;
border: none; }

Your images next prev are in a link, fragment of code:

a href="http://www.norachase.com/index.php?page=skins6" title="skins6" class="blah">



Marek A.

I tried to add your code and I am still getting the borders. It doesnt show up on my ipad but in firefox and IE it does so it is a big problem. Im not sure where this is coming from.

Dr. CSS can you give me an example?

Thanks Guys I appreciate the help.

[Dr.CSS]

I had actually done this but it was long ago and can't find the template that used it, will keep looking or just do it again...

[Rabel]

thanks - is making a rollover that hard though? What is a more preferred method.

[Rabel]

what is the best way to do this I am open to changing the way I am doing the link.

[Dr.CSS]

Here is an example, look at the page source and the CSS...

http://multiintech.com/default/index.ph ... extensions

[Rabel]

Sorry Doc that almost works with this code

{cms_selflink id='emailUs' dir='next' lang='0' imageonly='1' }

but it is still writing the page name over the css rollover image that imageonly='1' would usually fix. How can I remove the page text.

the css is this

#emailUs
{
  display: block;
  width: 18px;
  height: 18px;
  background: url("templateimgs/nexter.jpg") no-repeat 0 0;

}

#emailUs:hover
{
  background-position: 0 -18px;
}



Thanks,
Randy

[Rabel]

http://www.norachase.com/index.php?page=project-2

you can even check out the right side here you will notice three different tests

this is the coding

test1
{cms_selflink id='emailUs' dir='next' image='templateimgs/next.jpg' lang='0' imageonly='1' }
test2
{cms_selflink id='emailUs' dir='next' lang='0' imageonly='1' }
test3
{cms_selflink dir='next' lang='0' imageonly='1' }


Please help.

[Dr.CSS]

This is the code I use, I will put the images in the content on that page I linked to so you can see how I stack them...

{* Start relational links *}
         
         
         
            {anchor anchor='main' text=''}
         
         
            {cms_selflink dir="previous" label=""} {cms_selflink dir="next" label=' '}
         
{* End relational links *}

This is the CSS...

div.left49 .image a {
display: block;
float: left;
height: 36px;
width: 53px;
margin-right: 20px;
text-indent: -999em;
background-image: url(uploads/images/back.png);
background-position: 0px 0px;
}
div.left49 span.image a {
display: block;
height: 36px;
width: 53px;
text-indent: -999em;
background-image: url(uploads/images/next.png);
background-position: 0px 0px;
}
div.right49 p.image a {
text-indent: -999em;
}
div.right49 p.image a {
display: block;
height: 36px;
width: 32px;
float: right;
text-decoration: none;
background-image: url(uploads/images/up.png);
background-position: 0px 0px;
}
div.left49 .image a:hover {
background-position: 0px -36px;
}
div.right49 p.image a:hover {
background-position: 0px -36px;
}

[Rabel]

Thanks Dr.
I have realized the important info in your coding is

text-indent: -999em;

That takes the text and moves it off of the page. Instead of over the button.

This is the coding I am using
{cms_selflink id='emailUs' dir='next' lang='0' imageonly='1' }

and the css
#emailUs
{
  display: block;
  width: 18px;
  height: 18px;
  text-indent: -999em;
  background: url("templateimgs/nexter.jpg") no-repeat 0 0;
}

Thanks everyone for the help.

[Rabel]

Hey Dr,
Is there any way around the issue with firefox highlighting the entire button. So even though we moved the text off the left of the page it still puts this box around the image and text when you click on it. The box goes off the left side of the page while the next page loads.
Any Ideas? Thanks.

[Dr.CSS]

I don't see borders around it but when clicked till next page shows, which takes a while cuz you are using table, I didn't even have to look at code source to tell as I can see it building the cells as I wait for the tables to finish loading before seeing the whole page...

I use Firefox 3.6.10...

To get the outline to go away...

a:focus {
        outline: none;
}