SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Location
    Detroit, MI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images Not Aligning - Stepped Look

    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.

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

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Jared. Welcome to Sitepoint.

    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.

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Location
    Detroit, MI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 (PS-also contain your floats and set haslayout for it in IE6)
    Code:
    #widget_body_140537
    {
      overflow:hidden;/*modern browsers contain*/
      width:100&#37;;/*IE6 haslayout*/
    }
    #widget_body_140537 br{display:none;/*get rid of <br>*/}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Location
    Detroit, MI
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •