Image float misbehaving in IE vs FF

I'm floating an image in the content area of www.togetherateastofengland.com/index.php?pageid=1 In Firefox it butts vertically with the div above as I want it to, but in FF it doesn't.

Bizarrely the image on www.togetherateastofengland.com/index.php?pageid=2 behaves itself in both browsers.

Code: Select all

 
 #main {
 clear:both;
 border: 1px solid #FFF;
  
 background:#FFF;
 width:900px;
 color:#1B1E3F;
 }
 #main p {
  margin-top: 0;
 }
 #main h2, #main h3{
  margin-top: 0; 
  size:1.25em;
    }
 
 #welcomepic
 {
 float:left;
 width:195px;
 }
 #facpic
 {
 float:left;
 width:255px;
 }

I have 2 questions
What have I done wrong?
Is float the best way of achieving text next to an image?

You seem to have a strange character in your code.

<div id="main">

HTML: Select all

'<img id="welcomepic" src="images/welcome.jpg" width="195" height="171" alt="Welcome" />

Try rewriting this piece of code as ie seems to be rendering this somehow.

If you view your source in ie it is more apparent.

Pat

Thank you so much!

The webpage is encoded as UTF-8 - but when the files are saved as UTF-8 files a weird little box (the standard what is that character) appears in the source, but not on the page, throwing the layout.

When I resaved the files using Notepad with ANSI, the character disappeared and i looks great. Now I can add the margins I want!!!

Can anyone explain how a UTF-8 xhtml site needs top have its files saved with ANSI encoding to work please???