image+text top alignment

Image and Text top alignment

[bearded]

I am using a php newsfeed system. In normal html when we put the image and text like this (below) it is normally aligned TOP. But when I am using the same code in my system the Image display a little higher and the text portion comes a little down. Please suggest me the code to top-aligned both.

example:
<img style="border: none;" alt="" align="left" src="http://www.mysite.com//test.jpg" /> <font face="verdana,arial" size="-2" color="gray">This is the content of my news article or anything in text material.</font>

[Mr_Z]

You may just have to use trial and error and do something like

margin-top:2px

in the style portion of your image tag.

[SuzyUK]

this in an interesting one, it shows the level of control that CSS has over normal HTML styling rules.

In IE the default line-height in of an anonyomus line box is 16px high.

this is what you are creating.. you have not tols the browser what it is you are creating a div? a <p> etc..

then when you specify <font size="-2"> (approx 10px) in the HTML it is adjusting the font size but not the line height, which remains at 16px, the top of the line is still level with your image. CSS automatically adjusts the line-height to suit the font-size unless otherwise specifed ;)

try this to show what I mean (keep the <p>'s on different lines meantime):

<p>
<img style="border: none; background: yellow;" alt="" width="50" height="50" align="left" src="http://www.mysite.com//test.jpg" /><font face="verdana,arial" size="-2" color="gray">This is the content of my news article or anything in text material.</font>
</p>

CSS:
p {background: #ffc;}

Then add font-size: 10px; to the CSS rule above!

I had to put the code into a <p> element (a div would've done too) in order to target the text through The CSS.

The code above also exhibits the IE Whitespace bug. If you remove the white space between <p>..<img... and </font>...</p> the problem naturally resolves itself anyway without the need to add a font size to the <p> element.

So what this doing is removing the browsers guesswork.
IE is creating the default inline box, but it doesn't know what it is so tell it from the outset and it should handle it correctly..

interestingly the problem also removes itself once the line of text gets long enough to break .. which I'm also assuming is IE's infamous guesswork ;)

Suzy

[DrDoc]

Good post, Suzy ;)