Containers won't line up in different IE's

This html and css looks good in IE7 and FireFox, but container-search20 won’t line up horizontally to the right of the Flash container - in IE6. The web script I’m using has a seperate IE6 css file and I’ve played around with the IE6 css, but have been unsuccessful at making it line up horzontally like it does when displayed in IE7 and Firefox. If you can provide assistance to get it to line up in IE6, I’d appreciate it. Thanks. (If your advice is to just forget IE6, no need to reply).

CSS:

	.container-search10
	{
	border:1px solid #E5E5E5;
	background:;
	padding:3px;
	width:965px;
	height:254px;
	float:left;
	margin:5px
	}
	
	.container-search20
	{
	border:1px solid #;
	background:#E5E5E5;
	text-align:left;
	font-size: 11px;
	font-family: arial;
	color: #ffffff;
	margin:0px 0px 0px 0px;
	padding:0px;
	padding-left:0px;
	width:361px;
	height:40px;
	}
	
	.martin
	{
	float:right;
	margin: 0px;
	padding: 0px;
	width:360px;
	height:249px;/*200 + 49 */
}

td.flash {
width:86px;
height:16px;
margin:0px 0px 0px 0px;
float: left:
}

HTML:

<div class="container-search10">
	<tr><td class="flash">
<iframe src="../jukebox/index.html" frameborder="1" height="252" width="595" scrolling="no">
  </iframe>
  </tr></td>

		<div class="martin">
			<div class="container-search20">
					<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
							<p>
							<style type="text/css">
								.form_label {
									font-size: 100%;
									color: #000000;
								}
								#user_name_login {
									width: 70px;
								}
								#password_login {
									width: 70px;
								}
							</style>
							<label for="user_name_login" class="form_label">Username&nbsp;</label>
							<input type="text" name="user_name_login" id="user_name_login" size="10" />
							<label for="password_login" class="form_label">Password&nbsp;</label>
							<input type="password" name="password_login" size="10" />
							&nbsp;&nbsp;<input type="image" src="images/login.png" value="[var.lang_login_now]" class="btn_vid2" style="vertical-align:middle" />
							<input type="hidden" name="submitted" value="yes" />
							<input type="hidden" name="remember_me" value="remember_me" />
						</p>
					</form>
				</div><!--container-search20-->
		</div><!--martin-->
	</div><!--container-search10-->

That was very helpful…thanks

If it doesn’t resolve the problem then post a little more code and we’ll have another look

Hi,

What’s this broken piece of code supposed to be?


<tr><td class="flash">
<iframe src="../jukebox/index.html" frameborder="1" height="252" width="595" scrolling="no">
  </iframe>
  </tr></td>


Where are the table tags?
Why is the tr closed inside the td?
Why id td.flash only 86px wide yet the iframe it holds inside is 595px wide?

Until you resolve all that it will be difficult to help.

It seems that table would need to be floated not the td but as you have omitted the table element that might prove difficult :slight_smile:


table.test {
    float:left
}


<div class="container-search10">
    [B]<table class="test">
[/B]        <tr>
            <td class="flash"><iframe src="../jukebox/index.html" frameborder="1" height="252" width="595" scrolling="no"> </iframe>[B]</td>[/B]
      [B]  </tr>[/B]
   [B] </table>
[/B]