Text to line up level with top of image

[tshad]

I have table cell with an image and some text.

The Text ends up below the image even if I float the text to the left. The
text does move to the left but is still below the image.

I have tried vertical-align:top and it doesn't help.

I could fix it be creating another table in the cell.and separate them but I
would like to see if there is another way to do it.

The table is:

<table cellpadding="0" cellspacing="0" border="0" style="height:100%">
<tr>
<td id="headerImg" style="height:224px; vertical-align:top">
<img src="images/LogoTR2.gif" />
<span class="style1">The information you seek<br
/>Experienced Specialists</span>
</td>
</tr>
</table>

The "headerImg" which creates a background picture is:

#headerImg {
margin: 0 auto;
height: 224px;
background: url(../images/bg/header_image.jpg) no-repeat top left;
}

and the class "style1" for the text that I am trying to move to the top of
the cell (which is now on the left below the LogoTR2.gif image):

.style1
{
font-family: "Bookman Old Style";
font-weight: bold;
color: #3A4C76;
float:right;
}

I tried putting vertical-align:top in the style1 class that did nothing.

Thanks,

Tom

 

[dorayme]

I have table cell with an image and some text.

The Text ends up below the image even if I float the text to the left. The
text does move to the left but is still below the image.

I have tried vertical-align:top and it doesn't help.

I could fix it be creating another table in the cell.and separate them but I
would like to see if there is another way to do it.

The table is:

<table cellpadding="0" cellspacing="0" border="0" style="height:100%">
<tr>
<td id="headerImg" style="height:224px; vertical-align:top">
<img src="images/LogoTR2.gif" />
<span class="style1">The information you seek<br
/>Experienced Specialists</span>
</td>
</tr>
</table>

The "headerImg" which creates a background picture is:

#headerImg {
margin: 0 auto;
height: 224px;
background: url(../images/bg/header_image.jpg) no-repeat top left;
}

and the class "style1" for the text that I am trying to move to the top of
the cell (which is now on the left below the LogoTR2.gif image):

.style1
{
font-family: "Bookman Old Style";
font-weight: bold;
color: #3A4C76;
float:right;
}

I tried putting vertical-align:top in the style1 class that did nothing.

Try putting <span class="style1">The information you
seek<br>Experienced Specialists</span> before your <img
src="images/LogoTR2.gif" />

 

[Andy]

I have table cell with an image and some text.

The Text ends up below the image even if I float the text to the left.
The text does move to the left but is still below the image.

I have tried vertical-align:top and it doesn't help.

I could fix it be creating another table in the cell.and separate them but
I would like to see if there is another way to do it.

The table is:

<table cellpadding="0" cellspacing="0" border="0" style="height:100%">
<tr>
<td id="headerImg" style="height:224px; vertical-align:top">
<img src="images/LogoTR2.gif" />
<span class="style1">The information you seek<br
/>Experienced Specialists</span>
</td>
</tr>
</table>

The "headerImg" which creates a background picture is:

#headerImg {
margin: 0 auto;
height: 224px;
background: url(../images/bg/header_image.jpg) no-repeat top left;
}

and the class "style1" for the text that I am trying to move to the top of
the cell (which is now on the left below the LogoTR2.gif image):

.style1
{
font-family: "Bookman Old Style";
font-weight: bold;
color: #3A4C76;
float:right;
}

I tried putting vertical-align:top in the style1 class that did nothing.

Thanks,

Tom

Hi Tom,

Just add align="left" to your img...

<img src="images/LogoTR2.gif" align="left">

....that should do it.


Andy

 

[tshad]

Try putting <span class="style1">The information you
seek<br>Experienced Specialists</span> before your <img
src="images/LogoTR2.gif" />

OK,

That worked.

Why did it work?

I assume I would control the distance from the top using padding.

Thanks,

Tom

 

[tshad]

Hi Tom,

Just add align="left" to your img...

<img src="images/LogoTR2.gif" align="left">

...that should do it.

That worked as well as doraymes suggestion.

Why did that work?

Doesn't it default to left?

Thanks,

Tom

 

[dorayme]

OK,

That worked.

Why did it work?

Put up a url of what did not work and I (or someone) will look
further. Snippets of markup on usenet are misleading, sometimes
the spaces can affect some browsers and call for specific
remedies. Did you say in which browser you were having unexpected
results? This too is important.

All I can say for now on a general note is that different
browsers differ in their treatment of the mix between floated
children and normal flow children and even handle line breaks and
spaces a bit different. Also it is all a bit different across
browsers in their interactions with shrink-to-fit properties of
tables. You might find that giving your table a decent width,
even 100%, will change the results. You might find that removing
the spaces or line breaks between the inline elements will too...

 

[tshad]

It sounds like the bug that existed in Firefox until quite recently
and also in IE (don't know which versions) where floats never went
higher than the second line if they were preceded by any non-floated
inline stuff (e.g. text).

So if I were to float the image to the left, that would also solve the
problem?

Thanks,

Tom

 

[tshad]

[...]
Why did it work?


Put up a url of what did not work and I (or someone) will look
further. Snippets of markup on usenet are misleading, sometimes
the spaces can affect some browsers and call for specific
remedies. Did you say in which browser you were having unexpected
results? This too is important.

All I can say for now on a general note is that different
browsers differ in their treatment of the mix between floated
children and normal flow children and even handle line breaks and
spaces a bit different. Also it is all a bit different across
browsers in their interactions with shrink-to-fit properties of
tables. You might find that giving your table a decent width,
even 100%, will change the results. You might find that removing
the spaces or line breaks between the inline elements will too...

It sounds like the bug that existed in Firefox until quite recently
and also in IE (don't know which versions) where floats never went
higher than the second line if they were preceded by any non-floated
inline stuff (e.g. text).

So if I were to float the image to the left, that would also solve the
problem?

No, you'd still get the image on the second line (if that is the problem
and the cause of it-- I don't think I ever saw your actual test case).

I didn't have one to display.

And now I can't make it happen.

After I moved the image, that seemed to fix it - but when I put the image
back just to check - the text was still at the top of the window???

Not sure what happened.

Thanks,

Tom