3

I have a fairly simple cell in a table with an inline style:

<td style="text-align: right;"> Current Status: </td>

And the text-align-right is being ignored, both in Firefox and Opera. I used Firefox's "firebug", and it shows me <td style=""> for this.

Any idea what could be going on? I thought that an inline style specified this way took highest priority over any linked style sheet or inherited style.

Thanks as always.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
doxguy
  • 185
  • 1
  • 3
  • 11
  • 1
    Do you have any other styles defined. If I just add a simple table with two rows and have no css styling otherwise, it works fine in Chrome and Firefox for me. Anything else about the markup that we should know to get to the solution? – Anne Schuessler Mar 05 '10 at 23:30
  • There is other styling (a complicated cascade), but I thought that inline style overrides everything. Apparently it doesn't. – doxguy Mar 06 '10 at 01:23
  • You can override inline styles, but it not showing up in Firebug suggest an error in formatting somewhere. –  Mar 06 '10 at 03:04
  • I would generally agree that inline styles take a higher priority. However, there are a couple of ways to override them, e.g. the !important attribute. Without any context I find your question hard to answer. – Anne Schuessler Mar 06 '10 at 08:42
  • try to set width to your cell. – Skay Mar 05 '10 at 22:58

5 Answers5

3

Usually Firebug does that when there is an error with the style declaration.

Sinan
  • 5,819
  • 11
  • 39
  • 66
  • Yep, but OP should definitely double-check production code to make sure it matches the example code precisely. –  Mar 05 '10 at 23:30
1

There are numerous ways to test what is going on here. Work through your CSS's classes in FireBug and enable and disable styles until you get a result your expecting. There is obviously some style declaration error some where that is causing this particular style to fail. Because you are right, inline styles take priority over external style sheets, and over parent styles. Since you know this focus on the table area of your HTML and see if there are any syntax errors, scripts that are overriding the value, etc.

Also test different text styles for this "td" tag to see if other styles work, such as: 

color: blue;
line-height: 10px;
letter-spacing: 5px;

Also note that text-align:left is a default value if the direction property is "ltr" (left to right) which is default. So it could be possible that some of your styles for this HTML table element are not being applied.

contactmatt
  • 18,116
  • 40
  • 128
  • 186
0

Instead of what you have try adding a span which will obey the text-align where the td will not

<td><span style="text-align: right;">Current Status:</span></td>
Matthew R.
  • 4,332
  • 1
  • 24
  • 39
RedSkeeter
  • 1
  • 2
0

(While Firebug no longer exists, it's capabilities were folded into Firefox which can still exhibit the style="" behaviour.)

Make sure to check the dev console as there might be errors listed if this is caused by Content-Security-Policy (CSP) settings/restrictions.

CSP settings can either be specified by a Content-Security-Policy header in the web server's HTTP response, or they can be added with a <meta http-equiv="Content-Security-Policy" ...> tag in the HTML (or browser extensions can also enable them on your page).

Silveri
  • 4,836
  • 3
  • 35
  • 44
-1

I don't think you can specify text alignment within a td tag. However, you can set the alignment of the contents of the td like this:

<td align="right"> Current Status: </td>
Clayton
  • 6,089
  • 10
  • 44
  • 47
  • 4
    A CSS text-align should work find for td tags. By using align you're messing up the separation of content and layout, which you should avoid. – Anne Schuessler Mar 05 '10 at 23:35