Images Not Aligning - Stepped Look

HTML & CSS
1

I’m having issues with my images not aligning vertically. I’ve tried position relative and position absolute with the same effect. The 2nd image is aligned slightly lower than the first image and the third image is aligned slightly lower than the second image.

See the attached image for what I’m seeing. I’m not quite sure what the issue is as I’ve tried many different configurations.

	.social_image {
		width: 40px;
		float: left;
		position: relative;
		margin: 0;
		padding: 0;
	}
2

Hey Jared. Welcome to Sitepoint. :smiley:

Is there any chance you can provide a link to a live version of this. As it’s Sunday and it might be awhile before an advisor approves that attachment (it could happen anytime though) plus it will be alot easier for us to help you out as well. :frowning:

You will not be able to post an actual link, but you can post it like: domain dot com. :slight_smile:

3

Hi,

What is the html to go with that code?

If it’s a list structure and you are only floating the anchors then you must also float the list element (or set it to display:inline) (See staircase bug here) .

If you are floating the images and the images have individual parent elements then you must float the parent also.

If they are three images in a row with no individual parent then it’s a mystery and I’d need to see the code :slight_smile:

4

Thanks for the replies. I’m working on an activerain blog that someone else updated the CSS on. I don’t have full control over the css and html so there are containers I don’t have control of.

The activerain blog where I see the issue (in the right sidebar with the twitter, linkedin, and rss logos). 6841ac3 dot activerain dot com

The HTML that I’ve added in the sidebar widget is:

<a href="http://twitter.com/Loan_Survivor"><img class="social_image" src="http://signitysolutions.com/images/twitter.jpg" alt="twitter" /></a>
<a href="http://www.linkedin.com/in/thelendingedge"><img class="social_image" src="http://signitysolutions.com/images/linkedin.png" style="padding-left: 50px;" alt="LinkedIn" /></a>
<a href="http://www.drewsygit.com/?cat=74&feed=rss2"><img class="social_image" src="http://signitysolutions.com/images/feed.png" style="padding-left: 50px;" alt="rss feed" /></a>

Thanks for the help and thanks for the welcome!

5

Hi, after each anchor (not shown in that code above you posted) there is a <br> and that’s what is causing the space :). Remove the <br>'s or if you can’t target the HTML then just set this CSS :slight_smile: (PS-also contain your floats and set haslayout for it in IE6)

#widget_body_140537
{
  overflow:hidden;/*modern browsers contain*/
  width:100&#37;;/*IE6 haslayout*/
}
#widget_body_140537 br{display:none;/*get rid of <br>*/}
6

Thanks for the quick help and multiple solutions Ryan.

I completely missed that the <br/> tags were getting added in automatically when I had a line break. I removed the line break and the <br/> tag was removed.

Thanks!

7

Glad it worked :slight_smile: