Why does IE not recognise <br> properly?! What to do to solve the problem?

[Ex-RoNiN]

I have 2 tables in my website, and I want to display one below the other. In FF, I stick a

<br>

tag between the two and the browser correctly inserts a line break.

In IE, however, it does not seem to have an effect, instead the 2 tables are displayed next to each other! In order to get the 2nd table below the first, I have to use

 

twice in order to achieve the same effect!! Also, if there's too much data in the first table, this still doesn't help!

Of course, taking the 2nd approach results in a horrible looking page in FF, with a huge gap between the two tables.

So what can I do to force IE to insert a line break where I want it to?

 

[elkdanger]

Would wrapping each table in a <div> tag work?

 

[Ex-RoNiN]

Tried it, but it didn't work

 

[Wimnat]

Is this for all versions of IE?

If its IE7 maybe they've implemented some weird standards thing so you have to close the break i.e. <br />

 

[Ex-RoNiN]

Is this for all versions of IE?

If its IE7 maybe they've implemented some weird standards thing so you have to close the break i.e. <br />

Tried in both IE6 and IE7, both with normal br and with closed br, still no luck.

 

[elkdanger]

Can you post your code?

<table border="1">
	<tr colspan="2">
		<td>Table 1</td>
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	</tr>
</table>

<table border="1">
	<tr colspan="2">
		<td>Table 2</td>
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	</tr>
</table>

The above produces two small tables in IE and FF that are stacked on top of each other, not side by side. See if that works for you?

Edit: I've just stuck a <br/> in between them, and the gap widens in both FF and IE.

 

[Ex-RoNiN]

<div id="head">
<table align="left" width="100%" border="0">
		<tr>
			<td width="15%"><img src="images/***.gif" alt="***" width="166" height="58" /></td>
			<td><h1 align="center" class="style2">Head </h1></td>
	  		<td width="15%"><img src="images/***.JPG" alt="***" width="170" height="48" /></td>
		</tr>
</table>
</div>
<br />
<div id="menu">
<table align="left" width="160" border="0">
		<tr>
			<td align="center"><a href="index.html" onMouseOver="movr(1);return true;" onMouseOut="mout(1);return true;"><img name="img1" src="images/overview_inactive.jpg" alt="Overview" width="150" height="29" /></a></td>	
		</tr>
</table>
</div>

These 2 tables appear 1 after the other in FF, but next 2 each other in IE.

 

[elkdanger]

Taking the 'align' attributes out on both tables sorted it for me; both tables now stack vertically.

Much better to use CSS for that sort of thing anyway - any particular reason you need those align's in?

 

[Ex-RoNiN]

Taking the 'align' attributes out on both tables sorted it for me; both tables now stack vertically.

Much better to use CSS for that sort of thing anyway - any particular reason you need those align's in?

Oh so that's what it was Thanks very much for helping me out mate

No idea where these align's came from, maybe dreamweaver added them? Anyway, am v. happy this works now, many thanks