Text to line up level with top of image

Discussion in 'HTML' started by tshad, May 3, 2010.

  1. tshad

    tshad Guest

    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
    tshad, May 3, 2010
    #1
    1. Advertising

  2. tshad

    dorayme Guest

    In article <uvsDn.271052$>,
    "tshad" <> wrote:

    > 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" />

    --
    dorayme
    dorayme, May 3, 2010
    #2
    1. Advertising

  3. tshad

    Andy Guest

    "tshad" <> wrote in message
    news:uvsDn.271052$...
    > 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
    Andy, May 3, 2010
    #3
  4. tshad

    tshad Guest

    dorayme wrote:
    > In article <uvsDn.271052$>,
    > "tshad" <> wrote:
    >
    >> 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" />

    OK,

    That worked.

    Why did it work?

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

    Thanks,

    Tom
    tshad, May 3, 2010
    #4
  5. tshad

    tshad Guest

    Andy wrote:
    > "tshad" <> wrote in message
    > news:uvsDn.271052$...
    >> 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.
    >

    That worked as well as doraymes suggestion.

    Why did that work?

    Doesn't it default to left?

    Thanks,

    Tom
    >
    > Andy
    tshad, May 3, 2010
    #5
  6. tshad

    dorayme Guest

    In article <btBDn.343282$>,
    "tshad" <> wrote:

    > dorayme wrote:
    > > In article <uvsDn.271052$>,
    > > "tshad" <> wrote:
    > >
    > >> 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" />

    > 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...

    --
    dorayme
    dorayme, May 4, 2010
    #6
  7. tshad

    tshad Guest

    Ben C wrote:
    > On 2010-05-04, dorayme <> wrote:
    >> In article <btBDn.343282$>,
    >> "tshad" <> wrote:

    > [...]
    >>> 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?

    Thanks,

    Tom
    tshad, May 6, 2010
    #7
  8. tshad

    tshad Guest

    "Ben C" <> wrote in message
    news:...
    > On 2010-05-06, tshad <> wrote:
    >> Ben C wrote:
    >>> On 2010-05-04, dorayme <> wrote:
    >>>> In article <btBDn.343282$>,
    >>>> "tshad" <> wrote:
    >>> [...]
    >>>>> 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
    tshad, May 11, 2010
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Frederic HOUDE
    Replies:
    4
    Views:
    586
    Frederic HOUDE
    Aug 31, 2004
  2. pabbu
    Replies:
    8
    Views:
    711
    Marc Boyer
    Nov 7, 2005
  3. Cuthbert
    Replies:
    8
    Views:
    423
    Ancient_Hacker
    Sep 13, 2006
  4. kaushikshome
    Replies:
    4
    Views:
    753
    kaushikshome
    Sep 10, 2006
  5. Replies:
    2
    Views:
    135
Loading...

Share This Page