CODEWITHSUNDEEP
htmlcss
Control Freak
Control Freak

Reputation: 13243

<li> list-style-image + Select box, make Select box align to top

When I try to do list-style-image and a select box inside the <li>, the select box aligns vertically at the bottom, but the list-style-image vertically aligns at the top. How do I make the select box also align at the top?

It appears the select box holds a margin-top:5px that i'm trying to get rid of, but its still there even when i set it to 0.

CSS:

  li { 
    list-style-image:url(image1.jpg); 
    vertical-align:text-top;
  }

  select { margin-top:0; }

HTML:

 <li>
  <select>
    <option>1</option>
  </select>
 </li>

Upvotes: 0

Views: 806

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114447

Never use list-style-image. Instead, use padding an a CSS background. This is the only way you can control the image position properly.

Something like:

li {
  background-image:url(BulletCheck.png); 
  background-repeat:no-repeat; 
  padding-left:30px; 
  margin-left:-30px;
}

See my tutorial: http://preview.moveable.com/JM/ilovelists/

Upvotes: 2

Related Questions