Adventures in HttpContext

Sure, you can use the !important css keyword in your stylesheets to override inherited styles, but what about when you want to simply wipe out or remove a style defined in a parent? Use the auto keyword.

Let’s say you have a style defined in a global.css sheet defining a position for a class called menu:

[code lang="css"] ul.menu { position:absolute; left: 10px; top: 10px; } [/code]

This will position a <ul class=”menu”> element</ul> 10 pixels away from the top left corner of the parent element.  But what if you want to move that menu to the right side of the parent element, but you can’t change the defined style in global.css?

You create a new stylesheet or define an inline style, and override the ul.menu class by specifying

[code lang="css"] ul.menu { right:10px; } [/code]

But this simply stretches the menu to the other corner.   We need to override the left:10px; style with the default style (as if we never specified the left:10px; to begin with).  left:none; won’t work and left:0; won’t either.  The solution is the auto keyword:

[code lang="css"] ul.menu { right:10px; left:auto; /* removes left:10px from parent */ } [/code]

Voila, you’re done!  It’s as if the left:10px was never defined!

No related posts.

Tagged css