FBML, IE and side-by-side DIVs

[d3n1se]

I'm trying to do side-by-side divs in fbml and it works fine with Firefox and Safari - but IE refuses to listen and keeps putting the divs on top of each other instead of side-by-side. Can anyone help me please? How do i put the divs side-by-side too in IE (I've even added display:inline and it still doesnt work)? Thank you very much!

Oh, and here's the code:

<script> 
<!-- 


var numslides = 7;
var slidesvisible = 1;
var currentslide = 0;
var slidewidth = 520;
function goright() {
	if (currentslide <= (numslides-slidesvisible-1)) {
		Animation(document.getElementById('slideshow_inner')).by('right', slidewidth+'px').by('left', '-'+slidewidth+'px').go();
		
		if (currentslide == (numslides-slidesvisible-1)) {
			Animation(document.getElementById('right_button')).to('opacity', '0.3').go();
			Animation(document.getElementById('left_button')).to('opacity', '1').go();
		} 
		if (currentslide < (numslides-slidesvisible-1)) { Animation(document.getElementById('left_button')).to('opacity', '1').go(); }
		currentslide++;
	}
}
function goleft() {
	if (currentslide > 0) {
		Animation(document.getElementById('slideshow_inner')).by('left', slidewidth+'px').by('right', '-'+slidewidth+'px').go();
		if (currentslide == 1) {
			Animation(document.getElementById('left_button')).to('opacity', '0.3').go();
			Animation(document.getElementById('right_button')).to('opacity', '1').go();
		}
		if (currentslide > 1) { Animation(document.getElementById('right_button')).to('opacity', '1').go(); }
		currentslide--;
	}
}
//--> 
</script>


<style>
	h1 {color:#fff;font-family:Arial;font-size:26px;font-weight:normal; padding:0 15px 0 5px;}
	.content {background-color:#4c4c4c;height:600px;padding:30px 0 10px 0;}

	#slideshow_wrapper {width:520px; margin-bottom: 20px;  padding:0; margin:0;}
	#slideshow { overflow: hidden; padding:0; margin:0;}
	#slideshow_inner { position: relative; width:3640px; height:388px; padding:0; margin:0; overflow:hidden; float:left; display:inline;}
	/*#slideshow_inner a { opacity:0.7;}*/
	
	.slide {width:520px; height:388px; float:left; display:inline;}
	.slide em {padding:2px 0 20px 8px; color:#a5a5a5; font-style:normal;}
	
	.slide img {padding:0; margin:0; border:0; height:348px;}
	a {padding:0; margin:0; border:0;}

</style>



<div id="slideshow_wrapper">

<div class="content">
	<div id="slideshow">
		<div id="slideshow_inner">
			<div class="slide"><a href="link 1 goes here" title="title"><img src="link1.jpg" /></a><br><em>Caption goes here 1</em></br></div
			><div class="slide"><a href="link 2 goes here" title=""><img src="link2.jpg" /></a><em>Caption goes here 2</em></div>
		</div>
	</div>
	<img id="right_button" src="http:/yoururl.com/images/right_button2.gif" width=20 height=20 onclick="goright(); return false;" style="float: left; display: block; width: 41px; cursor: pointer;" />
	<img id="left_button" src="http:/yoururl.com/images/left_button.gif" width=20 height=20 onclick="goleft(); return false;" style="float: left; display: block; width: 41px; cursor: pointer; opacity: 0.3;" />
	
</div>

</div>

[Borzoi]

For inline text, you should use <span> instead of <div> . They are pretty much the same except <div> is naturally a block, with a line break before and after whereas <span> is inline with no line breaks. Try using a <span> and see if that works.

[d3n1se]

Thank you! But it still doesnt work, and the row still breaks only in IE.:c

[Borzoi]

You have a <br> tag in your first <div class="slide" tag. Could that be the problem?

[d3n1se]

If i dont put the BR tag, the text is hidden by the image in IE. And now it's a row in IE, but only if i put it as html. When i try applying it in fbml (to put as a tab in facebook), IE puts it in columns again. I added this to make it a row also in IE6:

<!--[if lte IE 6]> 
<style> 
.slide {zoom: 1;} 
</style> 
<![endif]-->

My other problem in IE (particularly 6 and 7) is that in HTML, it's a row now BUT it shows the overflow, when the overflow is supposed to be hidden. Sorry to bug you and thanks for the help!:)