Getting rid of borders around image hrefs

  • Hi! I just managed to customize a theme based on the excellent Liqourice, and most things are looking rather sweet. But trying to achieve linked images without any borders has given me some headaches. Here’s a test page that illustrates the problem:
    https://megabiz.se/about/test-page/

    In Safari it looks just right, but Firefox/IE renders differently sized and positioned borders around the linked image. Any hints on how to get rid of them would be very appreciated! Perhaps the “voodoo” (ie. negative margin values) I found out by pure trial-and-error is what catches those browsers off guard?

Viewing 4 replies - 1 through 4 (of 4 total)

  • It looks like

    .entry-content img
    {
    margin: -5px 0 0 -15px;
    padding:0;
    background:none;
    background-color:#f5f2f0;
    max-width:736px;
    }

    should be background-color:transparent;

    a:hover, a:active, a:focus {
    background-color: #6de445;

    also applies to the img a.

    so

    img a:hover, img a:active, img a:focus {
    background-color: transparent;

    would fix that.

    Thread Starter megabiz

    (@megabiz)

    Thanks a lot for the tips, nykm! Transparent background-color makes sense… But it doesn’t seem to have any effect.

    A lot of people forget than when you look at an (X)HTML page without any CSS styles imported or attached, you’re not looking at a clean style-less page. But you see the browsers default style. The browser styles make header tags bold and lager, adds margins to the body and blockquotes, underlines links and turns them blue and adds a border around image links etc.

    When you want more control over your styles you can undo a lot of these styles with a wildcard selector in your CSS file. Just add something like this to the top of your stylesheet to rid you of those unwanted margins and other browser styles:

    * {
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Getting rid of borders around image hrefs’ is closed to new replies.