Problem with "<img align=" in IE

[Cy]

Right now I'm developing a fan site and I’m working on the front page. On the front page I have an image (photo rather) and text aligned to the right side of the image (so align=left). When in 800x600 resolution the horizontal scroll bar is activated in IE, but not mozilla firefox. It seems that when there isn’t enough room to place the text next to the image, Mozilla places it all directly below the image (which is what I want). But IE smashes it to the right side, thus casing the page to be bigger horizontally than it should be, which isn’t a good thing.

Since my page is on my local computer I uploaded a very simple example to what my problem is:

http://cywh.com/test.html

When you open it notice that the text is aligned next-to/around the image. Size the width of the window down to about the same as the image width. Notice in IE there is text smashed against the right side and the horizontal scroll bar. Do the same thing in mozilla.

Does anyone know how I can fix this? I thought about placing the image on it's own line and placing the text under it, but in bigger resolutions I have a big gap on either side of the image, and I’m trying to minimize emptiness.

 

[IdahoFarmer]

If you want the text to be to the right of the image on all browsers you'll want to place both the image and the text inside a table cell. Set the width of the table to X pixels (where X = pixel width of image + 200 or so pixels for the text). Set all the border values of the table to 0 so the table itself will be invisible.

 

[D@Z]

put a simple table;

<TABLE ALIGN=CENTER WIDTH=??? BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="image.gif"></TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>
TEXT!</TD>
</TR>
</TABLE>

 

[fisicx]

If you really want to fix this you need to get to grips with CSS. The problem begins with the padding/borders/margins that browsers put around images and text and inside the body itself. To get rid of everything you need to set them all to zero using a bit of CSS.

You also need to consider the chrome that each browser has by default and how each user had modified their chrome (chrome is the bits round the outside of the window). Each browser does this slightly differently which can really bugger up your design.

So you can see that there are a whole host of issues. Still not sure from your posts where you want the text to be. On the side or underneath? If it is underneath then why not put the text in a new paragraph. If you want to keep it to one side then make the image width dynamic so it resizes to fit your window.