PDA

Click to See Complete Forum and Search --> : Why did this fix work?

Sylvan012
09-07-2006, 10:03 AM
Good day, everyone...

I have a very odd occurance that I managed to fix but don't know why. Maybe someone here has run into this, before, and can tell me why my code behaved in this fashion.

Environment: Windows XP, FireFox 1.5.0.6
DOM: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I was trying to target a <p> tag on a page with some specific CSS font traits as well as box-model padding and margins. For some reason my border, font-weight, and similar elements were effecting the targeted region. However, margin and padding were not. In fact, even with an inspection tool, it appeared that there were no padding commands on my <p> tag and a margin command that was not being set anywhere in the document.

Thinking that it was a matter of some style, later in the CSS declaration, that was overriding my code, I placed my snippet at the very end. Still, no luck.

It seems as if the elements governing the internal and external spacing around the item were not targeting correctly but the "soft" changes were.

When I put all of my styles into a "style='xxxxx'" attribute, it worked just fine.

So, I knew my CSS was correct. Somehow, it just wasn't reaching it's target ... selectively.

So, this time I put in the full path -excruciatingly detailed- featuring every last encompassing tag in one, long string.

That made it work.

So, has anyone seen this before? Why should targeting from the nearest unique ID not work but targeting all the way down from the highest named <div> do the job?

I mean, it's working -now- but I'd love to know why...

Yours,
Dave
ray326
09-07-2006, 03:27 PM
I believe it's "specificity" getting you.
Sylvan012
09-07-2006, 03:47 PM
I believe it's "specificity" getting you.
Hmmm...

Any idea why it wouldn't work without it? I mean, it just doesn't make sense...
toicontien
09-07-2006, 04:05 PM
Somewhere along the line, the padding and margin was removed from the target element by a CSS declaration that had greater precedence, or power, over the one that applied the fonts, padding and margins.

<div id="foo">
<p>Yada yada yada. <span>Brilliant.</span></p>
</div>



#foo p {
color: green;
}

#foo p span {
color: black;
}

#foo span {
color red;
}

Using the markup and CSS above, the text inside the SPAN tag will be rendered black, despite another declaration setting it to red. That's because #foo p span { ... } is a more specific declaration than #foo span { ... }. Hence the term "specificity".
Sylvan012
09-08-2006, 07:04 AM
Somewhere along the line, the padding and margin was removed from the target element by a CSS declaration that had greater precedence, or power, over the one that applied the fonts, padding and margins.

...snip...

Using the markup and CSS above, the text inside the SPAN tag will be rendered black, despite another declaration setting it to red. That's because #foo p span { ... } is a more specific declaration than #foo span { ... }. Hence the term "specificity".
Interesting. That would have been hard to locate, then, which is probably why I wasn't finding it: there were several hundred lines of CSS in this document. I thought about this, briefly, and used a CSS inspector that told me what unique characteristics the border of the box had and -then- tried to track it down by doing a "search-find" in the source code but, well, no such luck.

It may have been several specific CSS commands giving me headaches and, as a result, I couldn't find just one.

Thank you for the explanation; it makes sense...!

Yours,
Dave
toicontien
09-08-2006, 07:49 AM
If you have Firefox, look in the Tools menu for the DOM Inspector. Otherwise, download Firefox, choose the custom install and install the web developer extensions.

In the FF DOM Inspector in the right hand pane, you'll see a little square icon with a down pointing arrow. Click it then select CSS Style Rules. This lists out all the CSS styles that affect the element selected in the DOM tree in the left pane. That should give you some good insight.
Sylvan012
09-08-2006, 08:09 AM
If you have Firefox, look in the Tools menu for the DOM Inspector. Otherwise, download Firefox, choose the custom install and install the web developer extensions.

In the FF DOM Inspector in the right hand pane, you'll see a little square icon with a down pointing arrow. Click it then select CSS Style Rules. This lists out all the CSS styles that affect the element selected in the DOM tree in the left pane. That should give you some good insight.

For some reason, I don't have this. However, I have dozens of developer extensions and am not eager to have to spend hours re-loading them all. Is there any way -short of re-installing FireFox- to get the DOM Inspector? I really, REALLY am busy every day and don't have tons of time for my primary browser to be unavailable to me.

(Yes, I did check the Firefox Extensions page and found Dom Inspector 1.8 but it would not install.)
toicontien
09-08-2006, 08:58 AM
You'll have to uninstall FF and reinstall it. Make sure you download the latest version.