Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Annoying FF background image spacing

    I am working on a website for myself and I have run into some funny spacing with some background images in Firefox.

    The page is here:
    http://www.ashleywalters.net/templat...sp/default.htm

    The CSS is here:
    http://www.ashleywalters.net/templat.../css/style.css

    I am using a simple rollover effect using CSS, links, and background images to create icons that highlight. I am using a spacer image in the code with a link and class attached to get the desired effect. The spacer is the same size as the background icon images. However Firefox displays the background image halfway down the spacer image cutting the icon off. I have noticed this before on a least two other occasions while working on other websites and have used a hack. Instead of using a hack this time, I want to know why it is happening, and perhaps if there is a way to fix it.

    The icons look fine in IE, go figure.

    Here is a snippet of code from my website that creates the bar with the icons in it:

    Code:
    <div id="bar">
    <a class="home" href="#"><img  src="images/icon.gif" alt="Go to the Home Page" /></a>
    <a class="contact" href="#"><img  src="images/icon.gif" alt="Go to the Home Page" /></a>
    <a class="support" href="#"><img  src="images/icon.gif" alt="Go to the Home Page" /></a>
    
    </div>
    Here is the corresponding CSS:

    Code:
    a.home  {background:  url(../images/home.gif) no-repeat top left; width: 32px; height: 27px;}
    a.contact  {background:  url(../images/contact.gif) no-repeat top left; width: 32px; height: 27px;}
    a.support  {background:  url(../images/support.gif) no-repeat top left; width: 32px; height: 27px;}
    
    a.home:hover  {background:  url(../images/home2.gif) no-repeat top left; width: 32px; height: 27px;}
    a.contact:hover   {background:  url(../images/contact2.gif) no-repeat top left; width: 32px; height: 27px;}
    a.support:hover    {background:  url(../images/support2.gif) no-repeat top left; width: 32px; height: 27px;}
    Any ideas? Most likely the problem is deep within my CSS so I have provided the link to it above. Thanks for your help.

  • #2
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Figured it out! I made my links display:block and then made them all float right. I added some right-margin and now it looks just the way I wanted.

    Posted this in case someone else had the same problem.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    The efficiency of your CSS could be improved. Currently, you have:

    Code:
    a.home        {display:block;  float: right; background:  url(../images/home.gif) no-repeat top left; width: 32px; height: 27px; margin-right: 1.5em;}
    a.contact {display:block;	 float: right; background:  url(../images/contact.gif) no-repeat top left; width: 32px; height: 27px; margin-right: 1.5em;}
    a.support  {	display:block; float: right; background:  url(../images/support.gif) no-repeat top left; width: 32px; height: 27px; margin-right: 1.5em;}
    
    a.home:hover        {background:  url(../images/home2.gif) no-repeat top left; width: 32px; height: 27px;}
    a.contact:hover   {	background:  url(../images/contact2.gif) no-repeat top left; width: 32px; height: 27px;}
    a.support:hover    {	background:  url(../images/support2.gif) no-repeat top left; width: 32px; height: 27px;}
    Better would be:

    Code:
    #bar a { float: right; width: 32px; height: 27px; margin: 0 1.5em 0 0; background: no-repeat; }
    .home { background-image: url(../images/home.gif); }
    .contact { background-image: url(../images/contact.gif); }
    .support { background-image:  url(../images/support.gif); }
    .home:hover { background-image: url(../images/home2.gif); }
    .contact:hover { background-image: url(../images/contact2.gif); }
    .support:hover { background-image: url(../images/support2.gif); }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Why thank you.

    I haven't had time to clean up my CSS yet. I have a lot weeding out to do yet with this template, but help is always appreciated.


    EDIT: Oops, nothing shows up when I do the way you suggested. I shall investigate.

    Hmm..

    I can't figure it out actually. Do you know why the code you present isn't showing the background images Arbitrator?
    Last edited by lithriel; 07-26-2007 at 10:33 PM.

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Actually, it was the background: no-repeat; that kept the icons from showing.

    Thus the code that works is:

    Code:
     #bar a { float: right; width: 32px; height: 27px; margin: 0 1.5em 0 0;  }
    a.home { background-image: url(../images/home.gif); }
    a.contact { background-image: url(../images/contact.gif); }
    a.support { background-image:  url(../images/support.gif); }
    a.home:hover { background-image: url(../images/home2.gif); }
    a.contact:hover { background-image: url(../images/contact2.gif); }
    a.support:hover { background-image: url(../images/support2.gif); }
    compliments of Mister Arbitrator. EDIT: Taking out the no-repeat might be dangerous for others wanting to use this rollover technique. I have checked in Firefox and IE and because the size of my link blocks have been specified with the same specifications as the images, the images aren't repeating. Hopefully taking out the no-repeat declaration will not affect the appearance of the background images for other people.
    Last edited by lithriel; 07-26-2007 at 10:46 PM. Reason: Clarification

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by lithriel View Post
    Actually, it was the background: no-repeat; that kept the icons from showing.
    Yeah, my mistake. I forgot that the #bar a selector would have greater specificity than the class selectors. If you want to declare no-repeat, then you need to use background-repeat: no-repeat so that the background-image declarations don’t get overridden.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Thank you very much for your help Arbitrator. It makes perfect sense now that you have explained it. Silly me for not thinking about the oder in specificity! *Hits head*

    Shouldn't have been such a mystery. The CSS your provided is much more efficient. I shall get to work on the rest.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •