www.webdeveloper.com
Results 1 to 3 of 3

Thread: Alignment issue - Firefox vs. All others

  1. #1
    Join Date
    Oct 2011
    Posts
    2

    Alignment issue - Firefox vs. All others

    Hi,

    I built a photography website and I am having trouble aligning the navigation links and other items perfectly. In Firefox (where I developed the website), everything aligns nicely. However, when I run the website through Adobe Browser Lab it seems that the navigation links are 2-3 pixels off in all other browsers.

    Here is the website, www.gordonpellegrini.com. The alignment issue surfaces when you hover over the links, the directional arrows for the photographs and the small white/red dots under the photographs.

    I can also paste some of the code if that's helpful. Any tips are greatly appreciated.

    Gordon

  2. #2
    Join Date
    Mar 2011
    Posts
    1,148
    Your image aren't aligned because background images are aligned to an element's bounding box, and inline elements are often/usually aligned to the baseline. Try changing 'top' to '2px' in your stylesheet for the .buttonX elements, which seemed to work in the test I made. Note that this setting is specific to this instance. If you use the same technique elsewhere you may well need a different value. Good luck!

  3. #3
    Join Date
    Oct 2011
    Posts
    2
    I changed the code from,

    #navigation .button1 {
    background: url(images/home_button_f2.gif) no-repeat;
    width: 50px;
    height: 10px;
    padding: 6px 0 5px 0;
    }

    to

    #navigation .button1 {
    background: url(images/home_button_f2.gif) no-repeat;
    top: 2px;
    width: 50px;
    height: 10px;
    padding: 6px 0 5px 0;
    }

    It didn't have any effect on the appearance of the navigation. I then tried switching 'position' to 'absolute' and that did have an effect, but threw things completely out of whack. Are you sure your test showed a fix?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles