css - OL numbering in chrome not left-aligning, appearing on the right -


i'm experiencing strange behavior ol numbering in chrome, here's markup:

<ol>   <li>     <div class="block left">       <span class="block">main title<span class="alert">!</span></span>       <input type='text' name='title-1' />     </div>      <div class="block left">       <span class="block">subtitle<span class="alert">!</span></span>       <input type='text' name='title-2' />    </div>      <div class="block left">       <span class="block">add image<span class="alert">!</span></span>       <input type='file' name='image' size='30' />     </div>   </li>  <ol> 

the classes used are:

    .block { display:block; }       .left { float:left; }       .alert { color:red; } 

the problem i'm having need number of ol appear left of li's contents, chrome seems attribute kind of float property numbers, making appear on right.

can provide assistance on matter? in advance.

ol li { margin-left: 60px; list-style-type: decimal; } 

will make numbers visible.

wrapping tags inside li-elements <div class="wrap"> , apply css it:

.wrap { display: inline-block; position: relative; top: 12px; } 

will fix problem --> http://jsfiddle.net/gpfyk/2/

position: relative; top: 12px; makes position nicer.


Comments

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -

php - Controller/JToolBar not working in Joomla 2.5 -