CSS problem in Opera?

100% width element in nowrap table cell

[ohfiddlesticks]

I'm having a problem getting this to work in Opera. Don't know if it is an Opera bug, or just non-standard CSS that IE supports.

I'm trying to basically have a 1 column table of hyperlink buttons (similar to hover buttons) that are all the same width and don't wrap at all. Below is the class style declaration and the html for the table of buttons. I've simplified the code below using div tags instead of hyperlinks to show the problem. This works in IE, but in Opera the long text goes beyond the backround color. It has something to do with the 100% width style conflicting with the nowrap on the table cell. Any help would be appreciated.

.barbutton{
width: 100%;
background-color: #999966;
padding: 5px;
}

<table border="1" cellpadding="0" cellspacing="5">
<tr>
<td nowrap><div class="barbutton">Blah</div></td>
</tr>
<tr>
<td nowrap><div class="barbutton">Blah Blah Blah</div></td>
</tr>
</table>

[rogerdp]

This looks fine to me using Opera 7.23.

However, I'd suggest getting rid of non-semantic tags as much as possible. Also, does the table have any meaning other than presentational?

<style>
.buttons td {
background-color: #999966;
padding: 5px;
margin: 5px;
border: 2px solid black;
}
</style>

<table class="buttons">
<tr><td>Blah</td></tr>
<tr><td>Blah Blah Blah</td></tr>
</table>

[ohfiddlesticks]

That is really weird. It doesn't work for me in Opera 7.23 or Opera 7.5beta. on either WinXP or Win2000. The text extends beyond the background color and the border of the table.

I know I could accomplish the same thing with just CSS and no table, but I want the table for viewing when the style sheet is not in use as well. Also I'm really new to style sheets and am not ready to jump into layout with it yet.

I like the idea of setting the class for the table instead of each cell, that is much more efficient. However I would like to apply the background color to the hyperlink and not the cell because I want to used :hover to change the background color, and :hover doesn't seem to work with cells in IE like it does in Opera. In my example I used divs just to see if it was a problem with divs as well as hyperlinks. But I really want to use hyperlinks. If I take away the "width:100%" on the style, or take away the nowrap on the cell, then there is not a problem, but obviously I don't get the effect I'm looking for that way.

Does anyone but me see the problem in Opera? Or have any workarounds to get the same effect.

Thanks

[TGecho]

The problem may be due to incorrect box model handling, though I can't tell without your full CSS. Do a google search on the box model for info.

Probably the best way to do this is to place all of the links in a single container (table or div) and set them to display:block without setting a width.

They'll automatically fill the available width without stretching outside their container.

If you want it to work well without styling, you might want to put them in an unordered list with list-style-type:none

[rogerdp]

Yes, bjorkien IE doesn't know about :hover except as applied to <a>. Always try to factor styles and semantics as much as possible.

<style>
ul.buttons {
list-style-type: none;
display: inline-table;
}
ul.buttons li {
padding: 0;
margin: 0;
}
ul.buttons a {
display: block;
background-color: #999966;
padding: 5px;
margin: 5px;
border: 2px solid black;
}
</style>

<ul class="buttons">
<li>Blah</li>
<li>Blah blah blah</li>
</ul>

[ohfiddlesticks]

Thank you both for your help. Setting the style for the links to "display: block" solved the problem. Changing my style class to apply to all the links in the table and not each individual links makes the code alot simpler too. I did not know how to do that, but that is a very handy thing to know. Thanks again.