Border on image problem

• 

  richwoodward · Member · May 25, 2013 at 11:05 am

  • Copy link
  • Add topic to favorites

  The blog I need help with is carvingnature.net.

  Compare “email” icons on the two pages:

  carvingnature.net/contact
  carvingnature.net/woodward

  I want to replicate the way the hover works on the icon on first page: i.e. that no underlining or border appears when the cursor hovers over the icon.

  I originally used the following code to get things right on the contact page:

  #post-34 a:link {
  border: none;
  border-bottom: 0;
  }

  #post-34 a:hover {
  border: none;
  border-bottom: 0;
  }

  I’m guessing I can replicate this code altering the post number. The problem is that I don’t know how to find out the relevant post number for the icon on the other page.

  Any advice greatly appreciated.

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · May 25, 2013 at 12:04 pm

  • Copy link

  a) First of all, border-bottom is superfluous (none and 0 usually have the same effect). Second, you don’t need two pieces of code when you want to apply the same change to two different elements: you can combine the selectors, with a comma after the first one.

  b) One of the ways to find the page ID is go to Pages > All Pages: hover over the page title and look at the progress/status bar of your browser; or click the page title and look at the address bar of your browser.

  c) But if you want no underline in general on static pages, there’s no need to target each page. You can simply write:

  #page a {
      border: 0;
  }

• 

  richwoodward · Member · May 27, 2013 at 8:06 am

  • Copy link

  thanks. But I’ve realized that I wasn’t clear about what the problem is. Sorry!

  The rest of the text links on the page are fine: they work exactly how I want them to.

  What I want to do is remove the underlining/border that appear on the email image. So I want the hover effects on IMAGE links to work differently to the hover effects on TEXT links. In particular, I want there be no hover effects on image links at all.

  I’ve tried a bunch of codes but can’t get it right.

  Sorry for not being clear initially. Thanks for your patience!

• 

  justpi · Member · May 27, 2013 at 9:56 am

  • Copy link

  On Oxygen, ‘normally’ inserted images (that is, images that have an alignment class) don’t have any underline effect. The line shows because your image code has no alignment. Since you’ve added an “email” class to the link code, you can remove the line this way:

  .email {
  border: 0 !important;
  }