Sign in to follow this  
choffstein

[web] CSS Precedence

Recommended Posts

On my website, I have a main css file that defines anything with the id of "main" to have the font properties of : 12px/12px Verdana, serif; This words great, except for when I want to change the font size. Everything in the "main" (read, dynamic content section) of the page is encapsulated within that div, and no matter what I do, I can't get the font size to change. Do I have to rework my paradigm, or is there another option? Thanks

Share this post


Link to post
Share on other sites
Generally speaking, all you need is a more specific CSS selector for the cases in hand. More specific CSS selectors take precedence over more general ones. By specifying elements as explicitly within that div, you end up with a more specific selector. For example, if you have paragraphs in there you want to have 8pt font, do this: div#main p { font-size:8pt; }

Share this post


Link to post
Share on other sites
The issue is that the style is not known before hand because the content is dynamically generated. I want to do something like:

<div style="font-size:<%= size %>"> Blah!


The issue is, it keeps adding new lines to my page and it doesn't actually work.
Eek.

Share this post


Link to post
Share on other sites
In the above example, I hope that the variable "size" has a "px" or "pt" or "em" or whatever unit at the end. It's possible you are outputting just an integer, and font-size: {int} won't change anything. You have the mention the unit.

Is there anyway you can show us the page?

Share this post


Link to post
Share on other sites
You would need to sign up on my site, but here is some example 'generated' code:


<div style="font-size:3px"><a href="/notes/search?keywords=SMLNJ">SMLNJ</a></div>

<div style="font-size:4px"><a href="/notes/search?keywords=Italian">Italian</a></div>

<div style="font-size:1px"><a href="/notes/search?keywords=Grammar">Grammar</a></div>




They all end up the same size and all on new lines. What gives?

Share this post


Link to post
Share on other sites
Divs are block elements by default, so they will always require a new line, unless you set display:inline (default = display:block).

Not all elements within divs or other elements, will inherit all properties, though most do.

You should put the style property on the anchor actually. It is probably an anchor style (defined in stylesheet?) that overrides it again.

Note: In FireFox (and some other browsers) you need to refresh the page twice sometimes, for CSS changes to take effect.

Share this post


Link to post
Share on other sites

<a href="/notes/search?keywords=Vocab" style="font-size: {3px}">Vocab</a>




Like that? Still doesn't seem to want to work for me...though, I don't think it is right. Again, it can't be hardcoded into the style sheet because the size is dynamic...

Share this post


Link to post
Share on other sites
Try putting the style inside a span.


<span style='font-size: 5px;'>smaller text goes here</span>




It may, however, be that your real problem comes from the "A" element having its own font size. Try putting the style directly into the "A".


<a style='font-size: 5px;' href='http://www.mindcontrol.org/~hplus/'>Best Site Evar!!1!one!!</a>




Or, worse case, put the "SPAN" with style inside the "A" tags.


<a href='http://www.forterrainc.com/'><span style='font-size: 24px;'>My Hammer Is Bigger than Your Hammer</span></a>


Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this