It's all about vertical aligning

<img src="images/logo.png" alt="embedchat.com" />
<div id="topmenu">
<ul>
<li><a href="#">Quick register</a> |</li>
<li><a href="#">Learn more</a> |</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Code (markup):

Okay so, the image has a height of 112px and I have a display:inline <li> for the menu's (SEO SEMANTIC CODING made me do this)

Any ideas how to put the text on the baseline of the image. The img is float left and the #topmenu is float right

Keep the information in mind, I can't change alot. Rep will be added and I highly appreciate an answer.

 

    <div>
      <img src="your.gif"
           alt="" />

      <ul>
        <li>first item</li>
	<li>second item</li>
      </ul>
============
ul, li {
  display: inline;
  }

Code (markup):

cheers,

gary

 

nah nah, I already know that, I needed the text aligned at the base of the image, at the bottom.

 

Just what do you think that does? You didn't even test it, did you?

gary

 

I don't know what wrong with mines, looks somehow similar, I removed the span and left it as you have it.

Maybe it's because of float:left (on the main div that contains all) and float:right (on the ul, but I removed it.)

 

<div id="logo">
<img src="images/logo.png" alt="embedchat.com" />
<ul>
<li><a href="#">Quick register</a> |</li>
<li><a href="#">Learn more</a> |</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

 

Keep in mind, the ul,li are inline.

 

Fixed with position:relative then absolute then bottom:0px;