0

I've got an home image that takes users back to the homescreen. I'm using Symfony 5.

Here's the HTML:

<a id="home-link" href="{{ path('app_mainRedirect') }}"> <img src="{{ asset('images/home-icon.png') }}" width="100" > </a>

Here's the CSS:

#home-link { border-style:double;}

The image displays fine and the link works, but strangely the top of the border is displayed half way up the image. There's also a _ in the bottom right corner that I can't account for in the padding area. I'd be really grateful for any thoughts, may thanks in advance.

Edit: I've included an image. enter image description here

Edit 2: as per suggestion, if I apply display: block, it looks like this: enter image description here

Hackasaurus
  • 73
  • 2
  • 9
  • 1
    Please provide an image if you can't provide a working example. It's much more helpful than words. – vmank Oct 02 '20 at 19:25
  • If you apply `display: block` is it getting fixed? – vmank Oct 02 '20 at 19:54
  • 1
    `#home-link { border-style:double;width:100px; height:100px;}` does this fix your issue – Paul Baiju Oct 02 '20 at 19:59
  • if you do not want the border at all `#home-link { border: none;}` try this – Paul Baiju Oct 02 '20 at 19:59
  • Thanks for the help. I've edited as above to show what display: block does, interestingly it does have some effect and has got rid of the _ so I wonder if this is along the right tracks. width:100px; height:100px; has no effect, which seems odd in itself. You're right Paul, I don't really want the border, it's the _ I'm trying to get rid of but when I added the border I could see that there was something odd going on so wanted to work out what is going on there. Thanks again for the help. – Hackasaurus Oct 02 '20 at 20:30

2 Answers2

1

I guess this will get it to work as you expected

#home-link { border: none;}
Paul Baiju
  • 419
  • 7
  • 20
1

Add display: inline-block; to the anchor tag, it will show border properly around the image.

Also add text-decoration: none; to anchor to remove underline(_).

Rohit Utekar
  • 828
  • 5
  • 10