0

I have a strange issue happening on a website I'm developing, when viewed in Firefox. I'm using relatively-positioned image links within an absolutely-positioned container.

The positioning and links work fine, but when I inspect in Firebug, I get these "ghost" links that appear in the locations where the images would have appeared had they not been re-positioned... if that makes any sense:

enter image description here

HTML:

<div id="container">
    <div id="logo">
        <a href="https://soundcloud.com/haelu"><img src="Button1.png" alt="Soundcloud" title="Soundcloud" class="button" id="soundcloud-button" /></a>
        <a href="/videos.html"><img src="Button1.png" alt="Videos" title="Videos" class="button" id="videos-button" /></a>
    </div> <!-- /logo -->
</div> <!-- /container -->

CSS:

#container {
   position: absolute;
   top: 50%;
   margin-top: -85px;
   left: 0;
   width: 100%;
}

#logo {
    background-image: url('logo1.png');
    width: 393px;
    height: 170px;
    margin: 0 auto;
}

.button { width: 53px; height: 53px; position: relative; }
#soundcloud-button { top: 105px; left: 115px; }
#videos-button  { top: 33px; left: 147px; } 

Does anyone know what is causing this? Is it a problem with positioning, or whitespace, or something else?

1
  • I'd rather position the <a> tags relatively, instead of the <img> within. BTW, you can see the "ghost" links even in chrome when you inspect the element.
    – techfoobar
    Oct 26, 2013 at 12:45

1 Answer 1

1

You have the same in chrome. To fix this apply your css to the <a> tag, not <img> inside <a>. Make 2 classes to adjust their position, .circle1 and .circle2, for example.

<div id="container">
    <div id="logo">
        <a href="https://soundcloud.com/haelu" class="circle1">
           <img src="Button1.png" alt="Soundcloud" title="Soundcloud"/>
        </a>
        <a href="/videos.html" class="circle2">
           <img src="Button1.png" alt="Videos" title="Videos" />
        </a>
    </div> <!-- /logo -->
</div> <!-- /container -->

#logo a {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 53px;
}

#logo .circle1 {
  top: 105px;
  left: 115px;
}
#logo .circle2{
  top: 33px; 
  left: 147px;
}

Look at the screenshot how it works:enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.