I'm using a DIV and UL to emulate a table and TD's:
Code: Select all
<form action="scripts/signin.php" method="post">
<div id="user_menu">
<ul>
<li>
<div style="position: absolute; top: 4px; left: 4px; height: 23px">
This is a test
</div>
</li>
<li><label for="email">Login</label></li>
<li><input class="input_text" type="text" size="15" name="email" id="email" value="email@domain.com" /></li>
<li><span>»</span></li>
<li><input class="input_text" type="password" size="8" name="pass" value="test" /></li>
<li><input type="submit" value="Go" /></li>
<li><a class="ad_link" href="?page=resetpwd">Lost your password?</a></li>
</ul>
</div>
</form>
Code: Select all
#user_menu {
width: 100%;
height: 23px;
font-size: 9pt;
background-image: url('../images/layout/user_menu_bkgnd.png');
}
#user_menu input {
position: relative;
top: 1px;
}
#user_menu ul {
margin: 0px;
padding: 0px;
text-align: right;
white-space: nowrap;
}
#user_menu li {
padding-top: 2px;
display: inline;
list-style-type: none;
}
I want the above to emulate this exactly:
Code: Select all
<table width="100%">
<td width="100%">First column</td>
<td><input></td>
<td><input></td>
<td><input></td>
</table>And if I use float and inline techniques, when resized the content from all the other LI's (excluding the first) break onto a new line???
Anyone have any ideas of how to fix this and acheivee desired result???