Images on 1 line

HTML & CSS
1

Hi all,

I have two images, and I’m trying to place them side by side with each other on my sidebar, but it doesn’t seem to be working. Does anyone know how to fix it?

.twitter {
background: url(link);
width: 40px;
height: 40px;
display: block;
opacity: 70;
text-indent: -99999px;
}

.facebook {
background: url(link);
width: 40px;
height: 40px;
display: block;
text-indent: -99999px;
}


```html
<div style='display:inline;'><a href='http://twitter.com' class='twitter'>Twitter</a><a href='http://facebook.com' class='facebook'>Facebook</a></div>



The images show up fine but on top of each other. The sidebar is 200px wide, and each image is 40px, so size shouldn't be the problem. I tried wrapping them both in <p> tags, but that didn't work.

I have another unrelated problem. Does anyone know why the colors used in Blogger look different compared with Photoshop even though I use the same color codes?
2

The problem is the display: block on each image. That makes them sit one on top of the other. Remove that and you’ll be OK. (If you need the block-like bahavior, you can use display: inline-block instead.)

3

Thanks, that did the trick!

Now I have another problem though… The text in the html that I got rid of with <code>text-indent</code> shows up above the images, and both images are cut off at the bottom.

4

Code tags don’t hide text. They just indicate that the text is code, but it still displays. We really need to see a link to know what you are doing, or at least some sample code.