wac
12-22-2005, 10:04 PM
I have a DIV which encloses a table. I want the DIV's width to be the same as the table (no javascript) without having to set the width of either.
The table takes the natural width of the cell contents (because of the nowrap style??), which is fine.
In IE, using width:0 as a style on the DIV does what I want, but on FF, it does what I say http://www.codingforums.com/images/smilies/redface.gif
:o
I can I get FF to look like IE?
HTML
<div id='mylist_div' class='sas_list_container'
style='height:6em;width:0' >
<table id='mylist' class='sas_list' cellpadding='0' cellspacing='0'
onmouseover='sas_list_onmouseover(event)' >
<tr>
<td id='i1' class='sas_item' >
item 1
</td>
</tr>
<tr>
<td id='i2' class='sas_item' style='background-image:url(../images/Radio.gif)' >
test item 2
</td>
</tr>
<tr>
<td id='i3' class='sas_item' >
my test
</td>
</tr>
<tr>
<td id='i4' class='sas_item' >
sample JSP taglet output
</td>
</tr>
<tr>
<td id='i6' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='sdaf' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='adsf' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='4wr' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='lkj' class='sas_item' >
another item
</td>
</tr>
</table>
</div>
STYLE
.sas_list_container
{
background-color:window;
color: windowtext;
border-style: inset;
border-width: 2px ;
overflow-y:auto;
overflow-x:visible ;
margin: 0 0 0 0 ;
padding: 0 0 0 0 ;
}
.sas_list
{
white-space:nowrap;
cursor:pointer ;
cursor:default ;
border-style: solid ;
}
.sas_item, .sas_item_hilite, .sas_item_selected
{
text-indent: 1.2em ;
background-image: url(../images/ListBoxView.gif) ;
background-repeat: no-repeat;
background-position: center left ;
border-style: none ;
border-width: 1px ;
background-color: inherit ;
color: inherit ;
}
The table takes the natural width of the cell contents (because of the nowrap style??), which is fine.
In IE, using width:0 as a style on the DIV does what I want, but on FF, it does what I say http://www.codingforums.com/images/smilies/redface.gif
:o
I can I get FF to look like IE?
HTML
<div id='mylist_div' class='sas_list_container'
style='height:6em;width:0' >
<table id='mylist' class='sas_list' cellpadding='0' cellspacing='0'
onmouseover='sas_list_onmouseover(event)' >
<tr>
<td id='i1' class='sas_item' >
item 1
</td>
</tr>
<tr>
<td id='i2' class='sas_item' style='background-image:url(../images/Radio.gif)' >
test item 2
</td>
</tr>
<tr>
<td id='i3' class='sas_item' >
my test
</td>
</tr>
<tr>
<td id='i4' class='sas_item' >
sample JSP taglet output
</td>
</tr>
<tr>
<td id='i6' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='sdaf' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='adsf' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='4wr' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='lkj' class='sas_item' >
another item
</td>
</tr>
</table>
</div>
STYLE
.sas_list_container
{
background-color:window;
color: windowtext;
border-style: inset;
border-width: 2px ;
overflow-y:auto;
overflow-x:visible ;
margin: 0 0 0 0 ;
padding: 0 0 0 0 ;
}
.sas_list
{
white-space:nowrap;
cursor:pointer ;
cursor:default ;
border-style: solid ;
}
.sas_item, .sas_item_hilite, .sas_item_selected
{
text-indent: 1.2em ;
background-image: url(../images/ListBoxView.gif) ;
background-repeat: no-repeat;
background-position: center left ;
border-style: none ;
border-width: 1px ;
background-color: inherit ;
color: inherit ;
}