CODEWITHSUNDEEP
css
mpen
mpen

Reputation: 282885

How to remove CSS attribute such that HTML attribute will take effect again?

I've got this HTML:

<td align="right">$12</td>

But the text isn't right-aligned because somewhere in the stylesheet it says

td { text-align: left; }

I can override this style further down by doing something like this:

.bugnote table td, .bugnote table th {
    text-align: inherit;
}

But "inherit" doesn't have the effect I was hoping for: to clear the attribute. It's still left-aligned. Is there a way to essentially remove/clear any previously set text-align attributes?

Upvotes: 0

Views: 899

Answers (6)

reubano
reubano

Reputation: 5363

Katie's solution didn't work for me so I overrode the markdown table filter.

app/tables.py

# -*- coding: utf-8 -*-
"""
    tables
    ~~~~~~~~~~~~~~

    Process Tables (add default 'left' alignment and inline styles)
"""

from flask.ext.markdown import Extension
from markdown.extensions.tables import TableProcessor, etree

class BSTableProcessor(TableProcessor):
    """ Process Tables in a Bootstrap compatible way """
    def _build_row(self, row, parent, align, border):
        """ Given a row of text, build table cells. """
        tr = etree.SubElement(parent, 'tr')
        tag = 'td'
        if parent.tag == 'thead':
            tag = 'th'
        cells = self._split_row(row, border)
        # We use align here rather than cells to ensure every row
        # contains the same number of columns.
        for i, a in enumerate(align):
            c = etree.SubElement(tr, tag)
            try:
                c.text = cells[i].strip()
            except IndexError:
                c.text = ""

            a = (a or 'left')
            c.set('style', "text-align: %s;" % a)

class TableExtension(Extension):
    def extendMarkdown(self, md, md_globals):
        """ Add an instance of TableProcessor to BlockParser. """
        md.parser.blockprocessors.add(
            'table', BSTableProcessor(md.parser), '<hashheader')

app/init.py

# -*- coding: utf-8 -*-
"""
    app
    ~~~~~~~~~~~~~~

    Provides the flask application
"""

from flask import Flask, render_template
from flask.ext.markdown import Markdown
from app.tables import TableExtension


def create_app():
    """Create webapp instance"""

    # Flask application
    app = Flask(__name__)
    md = Markdown(app)
    md.register_extension(TableExtension)

    # Views
    @app.route('/')
    def index():
        return render_template('markdowned.html')

    return app

Upvotes: 0

Christoph
Christoph

Reputation: 51211

Please never use any style attribute like align="right". As you noticed, it's evil. Also try to avoid inline-styles as much as possible. Use clean css, and you won't run into those troubles.

Edit:

You can try improving your selector specifity and/or use the !important keyword.

Upvotes: 0

KatieK
KatieK

Reputation: 13853

inherit means that the element will assume the style of its parent.

You can't "clear" existing style specifications, so you'll have to override it with your desired result. Ex:

.bugnote table td, .bugnote table th {
    text-align: right;
}

If your browser support requirements allow it, you could refine the selector to use CSS2's attribute selector. Ex:

.bugnote table td[align="right"], .bugnote table th[align="right"] {
    text-align: right;
}

Upvotes: 1

Ajay
Ajay

Reputation: 100

Just use this

$(document).ready(function(){ $('.bugnote table td, .bugnote table th').css('text-align','none')});

Upvotes: 0

mpen
mpen

Reputation: 282885

This seems to work:

.bugnote [align=right] {
    text-align: right;
}

Browser support is probably not all there, but that's OK. It's for an internal site anyway.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Don't use obsolete attributes.

Instead, use style="text-align: right;" on the table cell like you're supposed to. Inline style attributes override styles defined in a stylesheet.

Upvotes: 3

Related Questions