Inexplicable bottom border in anchor pseudo class…

@ProfCalculusJul 25.2007

Hey,

I’ve been working on a simple little navigation scheme to drive a Javascript-powered image gallery. There are two .gif images, one to scroll left and the other to scroll right, and they’re both set up with <class name> a, <class name> a: hover, and the initial class to determine their heights, widths, and position. The hovering works just fine, it’s just that when either is clicked they both get a black 1 pixel-thick border at the bottom. The buttons are white, too, so it really stands out. I’ve specified no border and no text decoration, so I don’t know where it could be coming from. I assume the solution’s simple enough that I don’t need to post code, but I will if it’ll help.

to post a comment

CSS

@FangJul 25.2007 — #Post the document

@ProfCalculusauthorJul 25.2007 — #I'll post the pertinent sections.

Here's the CSS of one of the buttons:

[CODE]div.bottPortRightButt {
 background-image:		url("images/portRightScrollUP.gif");
 background-repeat:		no-repeat;
 position:				absolute;
 border:					none;
 
  top:					5px;
  left:					270px;
 
  width:					30px;
  height:					18px;
 }
 
 div.bottPortRightButt a:link {
 background-image:		url("images/portRightScrollUP.gif");
 background-repeat:		no-repeat;
 position:				absolute;
 
  width:					30px;
  height:					18px;
 }
 
 div.bottPortRightButt a:visited {
 border:					none;
 }
 
 div.bottPortRightButt a:hover {
 background-image:		url("images/portRightScrollDN.gif");
 background-repeat:		no-repeat;
 position:				absolute;
 border:					none;
 
  width:					30px;
  height:					18px;
 }
 
 div.bottPortRightButt a:active {
 border:					none;
 }
 [/CODE]

I know some of that's probably superfluous (like the "border: none"'s everywhere), but I was desperate for an answer.

And here's the HTML:

[CODE]<div class="bottPortGraph">
 <div class="discPlacement">Work Project</div><br>
 <div class="clientPlacement">Work Project's Client</div>
 <div class="desPlacement">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed congue elit in nulla. Fusce tincidunt turpis at nibh semper aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum tempus metus.		</div>
 <div class="behindScenes"></div>
 
   <div class="bottPortLeftButt">
   <!--<a href="#" onclick="zxcSlide('Tst', -1);"></a>//-->
   <!--<a src="images/portLeftScrollDN.gif" onclick="zxcSlide('Tst',-1);"></a>//-->
   <img src="images/portLeftScrollUP.gif" onclick="zxcSlide('Tst',-1);" />
 
   </div>
 
   <div class="bottPortRightButt">
   <!--<img src="images/portRightScrollUP.gif" onclick="zxcSlide('Tst',+1);" />//-->
   <!--<a src="images/portRightScrollUP.gif" onclick="zxcSlide('Tst',+1);"></a>//-->
   <a href="#" onclick="zxcSlide('Tst', +1);"></a>
 
   </div>
 
 
 
   </div>[/CODE]

The various methods of image display commented out were some of the ways I was shown this is possible (having the HTML-derived button control Javascript). The one using the "#", the uncommented one in the div class "bottPortRightButt" above, seems to be the most effective. It allows the script to run, but it also sends the scrolling thumb to the top of the page and has the afore-mentioned bottom black border upon mouse over.

@FangJul 25.2007 — #I can not reproduce the border.

@ProfCalculusauthorJul 25.2007 — #Could I please see your code? I'd like to see where and if I've gone wrong.

@FangJul 25.2007 — #I used your code

@ProfCalculusauthorJul 25.2007 — #Well ****, I'm plum out of ideas, then. What would you suggest? Another problem, how can I get around using an anchor tag to trigger the gallery scroll while still keeping the rollover animation capability? This is more the "CSS interacting with the Javascript" than the purely Javascript thing. And I don't know any Javascript so I'd appreciate it if we could keep it more HTML/CSS based (because I think they're the culprits, anyhow).

@FangJul 25.2007 — #Possibly some other rule has a higher specificity.

Without seeing the complete document it's guesswork.

@ProfCalculusauthorJul 25.2007 — #Hmm, seems like something to take to the on-going Javascript forum thread. Thanks for the thought, though.

Inexplicable bottom border in anchor pseudo class…

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Inexplicable bottom border in anchor pseudo class…

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴