Always problems with using CSS
So again I am trying to build yet another toolbar in CSS (so much for making design simple hoping everything is possible and easy in CSS)
This time, here are my requirements:
1) Fill entire width of screen, actually container, which width: 100% seems to do well
2) there is a repeated background but L & R side has a seperate rounded image
3) The toolbar must be padded or marginized about 10 pixels on each L & R side, using end images with padded white space won't work aesthetically, so the padding MUST be done using CSS
Basically in table form, I have the following:
Code: Select all
<table width="100%">
<tr style="background-image: url('images/bkgnd.png')">
<td><img src="left.png" width="24px" height="10px" /></td>
<td width="">
Some drop downs, input, etc goes here :P
</td>
<td><img src="right.png" width="24px" height="10px" /></td>
</tr>
</table>Code: Select all
<form>
<div style="margin-left: 10px; margin-right: 10px; width: 100%; height: 24px; background-image: url('images/main_menu_bkgnd.png')">
<div style="display: inline; width: 10px; height: 24px; background-image: url('images/main_menu_left.png')"></div>
<select style="display: inline">
<option>-- Option --</option>
</select>
<div style="display: inline; width: 10px; height: 24px; background-image: url('images/main_menu_right.png')"></div>
</div>
</form>The right margin is causing the toolbar to push past availble space and making the horizontal scroll bars to appear (VERY BAD AS I ABSOLUTE HATE THAT)...
I considered using a width of 96% instead and dropping the margin, which works, but the the right side is not flush against the container...so that won't work as aesthetically it looks bad...
Any ideas???
Thanks again
