CSS !important rule not overriding text alignment

html css layout css-specificity
Mathias Schnell picture Mathias Schnell · Jul 15, 2011 · Viewed 26.2k times · Source 
a {
        font-size: 8pt;
        text-align: left !important;
        text-decoration: none;
  }

.main {
        text-align: center;
  }

 <div class="main">
    <a href="#new_york_city">New York City</a><br />
    <a href="#long_island">Long Island</a><br />
    <a href="#upstate">Upstate New York</a><br />
</div>

This is a compact version of what I have and for me, using Firefox 5, the links are STILL centered, even though I I'm using !important on the "text-align: left". It's confusing and irritating because i thought !important was the highest specificity and overrode all other rules.

What's wrong here?

Answer

Tom Walters picture Tom Walters · Jul 15, 2011

The text alignment needs to be set on the parent element of the anchor-links, you cannot tell an anchor-link to align itself to the left as it is of a fixed width. You need to either remove text-align:center; from the .main section, or add another class to the div like 'alignLeft' and apply the alignment with the !important rule there.

Related questions

CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More
What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More
Fixed Table Cell Width

A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how …

Read More