I'm having a lot of problems getting things to look right in Internet Explorer. Even worse, I'm having problems finding anyone who knows how to fix it. Currently the page looks good in Firefox and Safari but there's numerous display issues with IE.

http://www.pixels-and-polygons.com/site/xx.html

(the above page is a "demo" to showcase the problem, links don't work, etc., don't worry about that)

If you view in Firefox it looks fine. (the way I want it anyway)

http://www.pixels-and-polygons.com/site/firefox-ver.jpg

If you view it in IE the text that should fall to the right of the "okay face" image instead falls directly below it:

http://www.pixels-and-polygons.com/s...text-below.jpg

How do I get the text to sit next to the image? I'm hoping this is something easy like adding some sort of align code somewhere, but everything like that I have tried yields no difference. This problem occurs numerous times throughout my site.

The page has been validated - shows no errors. Any help is much appreciated.

Have you tried simply floating the image left rather than using align left? i would also recommend some padding on the text or the image so there is some breathing room.

The page may have validated, but you are using <center> attributes(deprecated) everywhere and you also may want to specify sizes for images.

I really appreciate you taking the time to reply. I think your suggestions helped drastically. I'll admit, I don't really know what I am doing when it comes to this, but I researched your suggestions and from that I have this:

http://www.pixels-and-polygons.com/site/fixed.html

I don't really know if what I did is the best solution - if anyone has any feedback, please share it. I basically added the below code to the page:

span
{
float:left;
width:2.3em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}

Which is a direct copy/paste of some code I found when I looked up "how to float an image". It works, but I'm sure it looks sloppy to you pros out there.

I changed the <center> tags to <div align="center" > which is the non-depreciated form, right? And I added image sizes.


What I couldn't work out how to do was add padding - specifically on the right hand side where the text is basically bleeding into the edge.

Also, I now have that spacing issue between each line that seems to occur with Internet Explorer.

* { margin:0; padding:0;}

Is already in my .css file and all of the other solutions I've looked up don't seem to work.

If anyone can give me some pointers on the above two issues that'd be great. In the meantime, thanks racer x.

First I would suggest viewing the page source and see what doctype they are using. I also suggest deleting this: img{position:relative;} as it may conflict with the div float.