IE v Firefox - font size slightly different but <BR> and <P> don't render the same

[AussieM8]

Just trying to refine my tipping site and had a problem with the way Firefox and IE render the page. It's always been like this, but I thought I would try and tackle the problem this year before the season starts.

Basically, I have an iframe on my page that shows historical footy results that change based on a text hover.

Many of my users are running IE6 (yes, I know it's ancient but we're stuck with it for the time being). We use FF at home but the formatting doesn't look the same. The problem seems to relate to line breaks with FF ignoring them, or IE putting additional ones in.

I'll post a pic below and happy to post the full code if it helps. Note: I'm only a hobbyist, so not trained in website development so my coding is probably very poor.

[AussieM8]

Screen shot here:

[OSIRUS]

Edit: the tools I posted are a bit out of date now.....sorry

my advice to your problem is to see how your webpage looks in IE8 & IE9 & FF10...

if there is still problems look at the code

Cheers

[AussieM8]

Thanks for browser compatibility link Osirus. Exactly what I need

Yes, I know IE6 is a dead duck but our (work) systems guys are upgrading across the network sometime this year. Ffor the time being it's the standard browser we have to use . Very frustrating as many sites bring up the "kill IE6" message.

[AussieM8]

Here's the code:


CSS:
===

<style type="text/css">
html, body {
//height: 100%;
font-family:verdana;font-size:90%;
font: 10px verdana,sans-serif;
color: #ccc;
}

#table_column {
margin: 0;
width: 35px;
text-align: center;
float: left;
}

#table_fullrow {
margin: 0 0 0 0px;
width: 260px;
float: left;
}


#table_roundno {
margin: 0 0 0 0px;
width: 110px;
text-align: left;
float: left;
}


#table_heading {
margin: 0 0 0 0px;
width: 395px;
font-family:verdana;font-size:120%;
text-align: center;
float: left;
}
</style>



Contents of iframe:
==============

<div id='table_heading'><b>Game 4: Sat 7.30pm at Centrebet Stadium</b></div>
<br/>

<!--[if ! IE 6]><br/><br/><![endif]--> ** These lines don't seem to do anything

<hr/>

<div id='table_heading'><b>Panthers (12th)</b></div>

<br/>

<div id= 'table_column'>Year</div>
<div id= 'table_column'>Games</div>
<div id= 'table_column'>Win</div>
<div id= 'table_column'>Loss</div>
<div id= 'table_column'>Draw</div>
<div id= 'table_column'>Bye</div>
<div id= 'table_column'>For</div>
<div id= 'table_column'>Aga</div>
<div id= 'table_column'>Net</div>
<div id= 'table_column'>Pnts</div>
<div id= 'table_column'>Pos</div>

<div id= 'table_column'>2012</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>12th</div>

<div id= 'table_column'>2011</div>
<div id= 'table_column'>26</div>
<div id= 'table_column'>9</div>
<div id= 'table_column'>15</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>2</div>
<div id= 'table_column'>430</div>
<div id= 'table_column'>517</div>
<div id= 'table_column'>-87</div>
<div id= 'table_column'>22</div>
<div id= 'table_column'>12th</div>

<br/>

<!--[if ! IE 6]><br/><br/><![endif]-->

<br/><br/>

<div id='table_roundno'>Home Wins:</div>
<div id='table_fullrow'> from 1</div>
<div id='table_roundno'>Home Points:</div>
<div id='table_fullrow'> points (ave)</div>

<br/>

<a onclick='SelectHomeRadio(4);'><img src='images/logo_Panthers.gif' alt='Home Team' title='Select Panthers'width='75' height='75' border='1' style='position: absolute; top: 100px; right: 25px'/></a>

<div id='table_roundno'>Round 1 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 2 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 3 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 4 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 5 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>

<hr/>

<div id='table_heading'><b>Bulldogs (9th)</b></div>

<br/>

<div id= 'table_column'>Year</div>
<div id= 'table_column'>Games</div>
<div id= 'table_column'>Win</div>
<div id= 'table_column'>Loss</div>
<div id= 'table_column'>Draw</div>
<div id= 'table_column'>Bye</div>
<div id= 'table_column'>For</div>
<div id= 'table_column'>Aga</div>
<div id= 'table_column'>Net</div>
<div id= 'table_column'>Pnts</div>
<div id= 'table_column'>Pos</div>

<div id= 'table_column'>2012</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>9th</div>

<div id= 'table_column'>2011</div>
<div id= 'table_column'>26</div>
<div id= 'table_column'>12</div>
<div id= 'table_column'>12</div>
<div id= 'table_column'>0</div>
<div id= 'table_column'>2</div>
<div id= 'table_column'>449</div>
<div id= 'table_column'>489</div>
<div id= 'table_column'>-40</div>
<div id= 'table_column'>28</div>
<div id= 'table_column'>9th</div>

<br/>

<!--[if ! IE 6]><br/><br/><![endif]-->

<br/>

<div id='table_roundno'>Away Wins:</div>
<div id='table_fullrow'> from 1</div>
<div id='table_roundno'>Away Points:</div>
<div id='table_fullrow'> points (ave)</div>

<br/>

<a onclick='SelectAwayRadio(4);'><img src='images/logo_Bulldogs.gif' alt='Away Team' title='Select Bulldogs' width='75' height='75' border='1' style='position: absolute; top: 242px; right: 25px' /></a>

<div id='table_roundno'>Round 1 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 2 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 3 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 4 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>
<div id='table_roundno'>Round 5 </div><div id='table_fullrow'>(Not Yet Played)</div><br/>

<hr/>

<div id='table_heading'><b>** Historical Results **</b></div>

<br/>

<div id='table_roundno'>2006 (Round 1)</div><div id='table_fullrow'>Bulldogs 22 - <b>Panthers</b> 24</div><br/>
<div id='table_roundno'>2006 (Round 26)</div><div id='table_fullrow'>Panthers 22 - <b>Bulldogs</b> 30</div><br/>
<div id='table_roundno'>2007 (Round 2)</div><div id='table_fullrow'><b>Panthers</b> 40 - Bulldogs 10</div><br/>
<div id='table_roundno'>2007 (Round 18)</div><div id='table_fullrow'>Bulldogs 20 - <b>Panthers</b> 30</div><br/>
<div id='table_roundno'>2008 (Round 9)</div><div id='table_fullrow'>Bulldogs 4 - <b>Panthers</b> 30</div><br/>
<div id='table_roundno'>2008 (Round 23)</div><div id='table_fullrow'><b>Panthers</b> 52 - Bulldogs 16</div><br/>
<div id='table_roundno'>2009 (Round 2)</div><div id='table_fullrow'>Panthers 26 - <b>Bulldogs</b> 28</div><br/>
<div id='table_roundno'>2009 (Round 15)</div><div id='table_fullrow'><b>Bulldogs</b> 19 - Panthers 12</div><br/>
<div id='table_roundno'>2010 (Round 11)</div><div id='table_fullrow'><b>Panthers</b> 31 - Bulldogs 16</div><br/>
<div id='table_roundno'>2010 (Round 25)</div><div id='table_fullrow'>Bulldogs 18 - <b>Panthers</b> 24</div><br/>
<div id='table_roundno'>2011 (Round 17)</div><div id='table_fullrow'><b>Panthers</b> 20 - Bulldogs 6</div><br/>

[AussieM8]

Ok, sorry to waste your time but I managed to solve the problem thanks to this forum and poster John (jscheuer1).

Mods: not sure if I can post this, if not remove:


Quote:
"In IE 7 and earlier a float is considered to have the native height of its content. This is non-standard though. All others treat a float as though it has no intrinsic height until cleared or some other style is applied to it to give it intrinsic height.

If you add a clear: <div style="clear:left;"></div> before the <br> then the content height of the float will be used in the layout, and the <br> will work. Without the clear the <br> still works, its just that it's too high up in the layout to be noticed.