[hiddentrack]

On a site that I'm developing, I have two bars designed to hold images that are 7 pixels tall. Of my testing browsers (Firefox 1.0.6, Safari 2.0.1 and IE/Mac 5.2.3) only under IE/Mac displays are the bars displayed properly.

The first bar contains one image and it displays perfectly within the bar border in all three of the browsers.

However, if I push the envelope a tad and add two images to the bar (as I have in the second bar), with the intent that the two bars appear adjacent to each other the graphics are pushed down 4 or five pixels and display partially outside the bar border.

The reason I use two images in the second bar is the graphics are sentences which use Kottke's Silkscreen pixel font. The second image in the second bar is a mailto: link -- the problem still remains if I remove the link from around the second image, so that isn't the root cause.

(One funny thing about when I add the link is my style sheet calls for one pixel of padding for the link, but Firefox 1.0.6 adds an extra pixel of padding. Any ideas why that happens?

My hunch is the image alignment problem is something relatively trivial to fix, but the solution is eluding me. Any thoughts would be appreciated.


The relevant CSS from my style sheet is:

Code:
#bottom 
{
background: 630px #fff;
margin-bottom: 25px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #d7d7d7;
border-top: 1px dotted #e2e2e2;
}

#bottom a
{
text-decoration: none;
border-bottom: 1px dotted #ffcc33;
padding-bottom: 1px;
}

.block1, .block2
{
text-align: center;
border: 1px dotted blue;
height: 10px;
}

.block1
{
margin-bottom: 3px;
}

and the relevant HTML from my layout is:

Code:
<div id="bottom">

<div class="block1">
<img src="image1.gif" height="7"/>
</div>

<div class="block2">
<img src="image2.gif" height="7" />
<img src="image3.gif" height="7" />
</div>

</div>

[hiddentrack]

After trying a slightly different tack--using a list instead of a custom classes--I was able to come up with exactly what I wanted after discovering the max-height tag and adding a slight top-margin to the images inside my list style which cleared up a slight problem in Safari.

I was also able to get the link in the block to display as I intended (turns out the error was mine, not one of my browsers...silly me).

Sometimes it just helps to write out the problem and get the mind working on it that way...

~ h.t.