[web] CSS Precedence
Author
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
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; }
Author
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.
<div style="font-size:<%= size %>"> Blah!
The issue is, it keeps adding new lines to my page and it doesn't actually work.
Eek.
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?
Is there anyway you can show us the page?
Author
You would need to sign up on my site, but here is some example 'generated' code:
They all end up the same size and all on new lines. What gives?
<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?
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.
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.
Author
<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...
Try putting the style inside a 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".
Or, worse case, put the "SPAN" with style inside the "A" tags.
<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>
Author
Figured it out. I needed this:
Thanks guys!
<a href="/notes/search?keywords=Vocab" style="font-size: 3px">Vocab</a> Thanks guys!
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
