Question

I’m having an issue.

I’m trying to display some images alongside some text in a menu, however each image has a larger height than the text therefore the text is centered to the image.

Essentially, this is the site: http://www.sasstraliss.org/scme2202

And, it views perfectly fine in firefox.

In chrome, it displays vertically. In IE, the images are squashed.

Where has my CSS gone wrong?

I’m using this approach for the images…

#menu img {
min-height: 1em;
display: table-cell;
vertical-align: middle;
padding: 0px 0px 0px 10px;
}

Answer 1

I haven’t looked at your code but assuming that you have something like this in your HTML:

<div id="menu">
    <a href="someurl"><img src="someimage.gif" />Some text</a>
    <a href="otherurl"><img src="otherimage.gif" />Other text</a>
</div>

The following CSS should do the trick:

div#menu {
overflow: auto;
}
    div#menu a {
    float: left;
    margin-left: 10px;
    }
        div#menu a img {
        height: 60px;
        width: 60px;
        margin-right: 10px;
        vertical-align: middle;
        }

Note: it is good practice to always set the dimensions of your images explicitly, this speeds up page rendering and stops things jumping around as the page is reflowed during loading.