Images stacking incorrectly in IE8

Dev Shed Forums Sponsor:

March 10th, 2013, 06:41 PM

charlyanderson

Registered User

Join Date: Mar 2013

Posts: 5

Time spent in forums: 2 h 59 m 15 sec
Reputation 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;}

March 10th, 2013, 11:06 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 41 m 9 sec
Reputation Power: 4192

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. I'm available for hire at Dynamic Site Solutions.

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).

March 11th, 2013, 04:05 AM

charlyanderson

Registered User

Join Date: Mar 2013

Posts: 5

Time spent in forums: 2 h 59 m 15 sec
Reputation Power: 0

Hi thanks for getting back to me and for explaining that. The additional code however did not seem to solve my problem.

Images stacking incorrectly in IE8

Developer Shed Advertisers and Affiliates