Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Posted on
- Text to line up level with top of image
May 3, 2010, 4:43 am
rate this thread
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%">
<td id="headerImg" style="height:224px; vertical-align:top">
<img src="images/LogoTR2.gif" />
<span class="style1">The information you seek<br
The "headerImg" which creates a background picture is:
margin: 0 auto;
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):
font-family: "Bookman Old Style";
I tried putting vertical-align:top in the style1 class that did nothing.
Re: Text to line up level with top of image
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...