#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    15
    Rep Power
    0

    Images stacking incorrectly in IE8


    This is only a problem in IE8. IE7 is fine and so is IE9 aswell as other browsers.

    I want the images to sit side by side but they are stacking incorrectly under each other

    Any suggestions?

    Html is as follows:-

    Code:
    <span class="socials fright">
                    		<a href="https://plus.google.com/" target="_blank"><img src="images/gplus.jpg" alt="" /></a>
                        	<a href="http://www.linkedin.com/" target="_blank"><img src="images/linkedin.jpg" alt="" /></a>
                        	<a href="http://www.twitter.com/" target="_blank"><img src="images/twitter.jpg" alt="" /></a>
                        	<a href="http://www.facebook.com" target="_blank"><img src="images/facebook.jpg" alt="" /></a></span>
              				<div class="clear"></div>
            			</div><!--footer-->
    CSS as follows:-


    Code:
    #footer{
    	padding-top:15px;} 
    	
    #footer a{
    	text-decoration:none; 
    	color:#5c5c5d; 
    	font-size:13px;} 
    	
    #footer a:hover{
    	text-decoration:underline;} 
    	
    .socials img{
    	margin-left:5px; display:inline;}
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, charlyanderson.

    The code you posted here was not sufficient to see the problem, but I see you've posted more code for this page in another thread. The important rule is the one for ".fright" which tells us that the <span> is floated to the right. Some older browsers are known to handle the shrink-wrapping of floated elements that don't have set widths differently from other browsers. In this case, it seems that the issue can be solved by use of the white-space property. I suggest you add this to your stylesheet:
    Code:
    .socials {
      white-space: nowrap;
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    15
    Rep Power
    0
    Hi thanks for getting back to me and for explaining that. The additional code however did not seem to solve my problem.

IMN logo majestic logo threadwatch logo seochat tools logo