Another CSS toolbar problem
Posted: Sat Aug 12, 2006 12:16 pm
Ughhhh...
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:
What I currently have in CSS form:
It almost works in IE, but I can't get the right image to right align to the end, but in FF it's a totally different story...
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
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
