Question

Two days ago I spontaneously bought myself a domain. The day before that, I hardly even knew what a domain really was. Since then, I’ve been trying to teach myself HTML for the very first time. Basically what I’m trying to say is, I’m very new – and will probably be poor in my explanations.

I just succeeded in making an ‘image-button’, sorta. It’s where I make a button-like image and then use it as navigation on my website (just like a regular link). My issue is that the link ‘border’ itself is bigger than the image, so you can press an inch outside the image itself and it will work. How do I make the invisible link ‘border’ the same size as the button?

This is my site:
http://www.djeveln.com

On the test page (djeveln.com/test) is where I test things. There’s the button I’m talking about, in case you can’t understand my explanation very well.

Here’s my HTML:

<a class="ButtonLink" href="http://www.djeveln.com" title="Home"> 
<img src="/images/button.png" class="TestButton"></a> 

Here is the CSS I use for the image position and size:

img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/ 
    position: absolute; 
    width: 100px; 
    height: 75px; 
    top: 400px;
    right: 250px; 
}

Hope you can help me! 😛

Answer 1

Your button image contains a large transparent area (with the actual button more or less in the center), and that’s what is causing the “borders”.

Although there are CSS workarounds for that, I’d recommend you just open the image in Photoshop (or any other image editor), and crop the transparent area away. Make your image the exact size of your button.

One more tip, that can make your life way easier as your learn: use a debugging tool like the Chrome Developer Tools, or Firebug (if you’re on Firefox). With those, you can inspect any element on your HTML (right click it and choose “inspect”), check the CSS applied for them (and also modify it on-the-fly for testing), and much more. That’s how I spotted the transparent border on your image.