force background color to be full column width in IE and Mozilla

Forum Moderators: not2easy

Message Too Old, No Replies

force background color to be full column width in IE and Mozilla

Mozilla is not putting the background color to the full column width

Christophe

10:10 am on Jan 15, 2007 (gmt 0)

I'm using JSF and I display a table with some data.
I want to color up each row depending on the content (if it is start then color = green and if if is stop then color = red basically).

Due to JSF generating the HTML I can't put the style on the tr or td object but only in the span.

I tried code below which is ok with IE but has one bug in Mozilla.
In fact the color is not using the full cell width in Mozilla and so the color effect is not nice looking.

Any idea of what to add/change in the css code to have the background color on all the column width?

HTML:
<table width="100%">
<tr>
<td><span class="orangeCell">my text</span></td>
</tr>
</table>

CSS:
.orangeCell
{
background-color: #FFC149;
width:100%
}

cmarshall

11:35 am on Jan 15, 2007 (gmt 0)

You would be better off using a <div>. Just set it to margin:0; width:100%. A <span> is inline, so it ignores width attributes. You can make the <span> display:block; width: 100%.

Christophe

11:46 am on Jan 15, 2007 (gmt 0)

In fact JavaServer Faces is generating the HTML code so I don't have the choice of using span or div, I can only change the css

But I tried the display:block and it seems to work (except for emtpy fields which I may correct putting a   instead of nothing)

thanks a lot for your help

Christophe

12:33 pm on Jan 15, 2007 (gmt 0)

In fact, putting a space is not working, any idea on how to update the css to make it work even with empty of space only string?

anyway, thanks for your help

cmarshall

12:57 pm on Jan 15, 2007 (gmt 0)

The space should be a non-breaking white space ( ). This will not be removed by the browser.

You shouldn't need it anymore though. Make sure your page has a valid, modern DOCTYPE.

Christophe

1:30 pm on Jan 15, 2007 (gmt 0)

I tried this one but same result :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

cmarshall

1:36 pm on Jan 15, 2007 (gmt 0)

Are you using a " " character?

Christophe

1:56 pm on Jan 15, 2007 (gmt 0)

in fact I cannot as it is generated by JSF ... but I think I've found a way to bypass tje jsf stuff ...

thanks a lot for your help