Table styling problem

[PsychomIKE]

Hi, I'm having an issue with a table nested within another table in FF and Chrome, but displays as I want in IE. Chrome doesn't seem to want to use my padding values and instead shrinks the BG colour to the edge of the text.

<table style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
      <tr bgcolor="#330000">
        <td align="right" colspan="4"><font style="FONT-WEIGHT: bold; FONT-VARIANT: small-caps" color="#FFFFFF">gfd gfag  gfag fa</font></td>
      </tr>

      <tr bgcolor="#D9D7C5">
        <td><b>Project:</b></td>

        <td>gfsdgfdas</td>

        <td><b>Date:</b></td>

        <td>gfgsafd</td>
      </tr>

      <tr bgcolor="#ECEBE1">
        <td><b>Client:</b></td>

        <td>gafdgfda</td>

        <td><b>Value:</b></td>

        <tdhgafdhfdh</td>
      </tr>

      <tr bgcolor="#D9D7C5">
        <td><b>Application:</b></td>

        <td>hgsdfds</td>

        <td><b>Sensor:</b></td>

        <td>hgsafdhsfd</td>
      </tr>
    </tbody>
  </table>

I know it's an awful mish-mash of inline CSS and HTML, but it's what I had to work with. Can anyone see what's causing me grief?

 

[tsinc80697]

Was going to try and help but I dont have chrome as I'm on a mac

Try setting a min-width on the <td>

Also you have an error in your HTML code, not closed a <td> opening tag!

<tr bgcolor="#ECEBE1">
<td><b>Client:</b></td>

<td>gafdgfda</td>

<td><b>Value:</b></td>

<tdhgafdhfdh</td>
</tr>

Should be

<tr bgcolor="#ECEBE1">
<td><b>Client:</b></td>

<td>gafdgfda</td>

<td><b>Value:</b></td>

<td>hgafdhfdh</td>
</tr>

 

[PsychomIKE]

Ahh, I had to amend the table contents as they are sensitive in nature. Must have accidentally deleted the td>

With further testing my table seems to act correctly if I move the inline CSS into the <td>. This really isn't desirable for me atm, due to the number of tables. Is there something I'm missing from making the table inherit the CSS from it's <table> tag?

 

[Eye seven]

Wouldn't you be better off just getting rid of the table, getting some nice css design sorted out instead held as an external file and saying welcome to web design post 2000? Your code will love you as there will be so little of it on each page - just content. Browser support will be an issue yet again but depending on whether you need to support IE6 should be a lot easier to get consistent design over all the modern browsers.

 

[tsinc80697]

Instead of having the CSS inline why not make an external stylesheet.
That way you can style ALL of the <td>'s you want at the same time?

Is the code you posted above the exact code you are using? I'm assuming the table you posted above is one of the nested tables? Is it possible to post the full HTML page?

 

[PsychomIKE]

I hear what you're saying but unfortunately, for the time being, it's not possible. This is a website with content added from all across Europe. We have a CMS system but unfortunately that's more bug ridden than Clear Sky and the standard CSS we've got is pretty awful... hence having to deal with everything via inline CSS or deprecatted HTML.

That is one of the nested tables but I can't really paste anymore of the HTML on here atm. I will try to later...

 

[Eye seven]

In that case I feel your pain! CMS, great in theory until you add that ingredient that can undo a website faster than a Microsoft browser programmer - the end user. Approach them with extreme caution (end users that is).