Alignment issue - Firefox vs. All others

[Gmondun]

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

[rtrethewey]

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!

[Gmondun]

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?