Webpage Can "hear" My Css Code, But Ignores It. Help? (Solved!)

[inoculated]

Update again: Solved, thanks to ShadowMage! Turns out Dreamweaver was putting in strange characters that the browser didn't understand, most likely from copying & pasting from Firebug. Update: Posted an example, cant figure out how to link so scroll down to the bottom. I've been running into this problem on several occasions the past few months and it can be a major setback. What I have to do is take a Joomla website template and make changes to the CSS to get it to look how the client wants. I usually do this by making overrides as opposed to changing the original code (don't want to royally mess something up and be unable to fix it.) Every now and then I'll add a few lines of code to a CSS file and for reasons that are beyond me, it won't work. The syntax is right, there are no typos, its referring to the right IDs/classes. I use the Firebug addon for Firefox to check out elements and the CSS that's being applied to it, and it'll show me something like this: It knows I've got code on line 316 that should be applied, but it's not using it. I check the CSS file and the code's definitely there, and there's nothing wrong with it. It should be overriding the stuff on line 311 cause that's just how CSS works (or have I been out of the game for too long?) There have also been times where I'll make changes to the original code and it will ignore either the whole thing or parts of it. No typos, syntax is fine. Even dead simple stuff like just switching out a background image url. (Yes, it was a valid url.) I'm stumped. Am I missing something major about the way CSS works? I used to do a ton of web design, but then hardly any web stuff during college. Has something big changed in the past 4 years? Or do you think it has to do with Joomla and nothing to do with CSS? This is the most frustrating thing I've ever run into and has cost me tons of time.

[Ingolme]

I can't see your code or anything, but there are several rules that CSS uses to choose the priority of conflicting properties:

1. Any CSS rule with !important takes the highest priority. If two !important rules conflict, then the rest of these rules apply.
2. If the selector has an ID, it has priority over all selectors that don't have an ID
3. If the second rule doesn't settle the conflict, then the selector with most components in it will have prioirty. For example (div.className has more priority than .className; .class1 > .class2 has more priority than .class2
4. If the conflict is still not settled, then the rule that's last in the document takes priority. This means that the order you link your stylesheets in makes a difference.

[inoculated]

Thanks for the reply! That'll come in handy. But in these instances, the 2 selectors are identical, so the one appearing last should take priority... but its not. It's like its got a mind of its own, and its being sassy. :C

[Ingolme]

Hmm... If I could see the page and you could indicate which selectors aren't working I might be able to see where it's wrong. If Javascript is editing any styles on the page that's likely to take the highest priority.

[dsonesuk]

Are you sure you haven't made a typo error? I use joomla a lot, and I never know it to remove styling unless I made a mistake such as text-decoration; none; instead of text-decoration: none;

[inoculated]

I'm absolutely certain there's no typos, everytime this problem arises I zoom in and read the code over and over and over. The code's always fine, there's gotta be something wrong with the browser/Joomla loading it.

[dsonesuk]

Then access to style sheet, or better still the website itself to see for ourselves this problem. Edit: If javascript is changing the style it would show as inline styling change in firebug, place abovethe firebug css styling listing image shown.

[inoculated]

I actually don't have any examples of this problem at the moment - I've used halfassed-workarounds so far / lost track of where they occured. Next time it pops up, I'll leave it be and post a link. I hadn't thought of javascript complicating things, thats a possibility... but I haven't seen any inline styling, so maybe not... *headscratch*

[ShadowMage]

Maybe I'm missing something but: If you have this:

.art-menu ul {    color: #3E443C;    font-size: 18px;    font-style: normal;}

on line 311, and this:

.art-menu ul {}

on line 316, nothing will change. Just redeclaring the selector does not reset all the properties. You need to manually reset those properties.

[inoculated]

Maybe I'm missing something but: If you have this:

.art-menu ul {	color: #3E443C;	font-size: 18px;	font-style: normal;}

on line 311, and this:

.art-menu ul {}

on line 316, nothing will change. Just redeclaring the selector does not reset all the properties. You need to manually reset those properties.

I'm not redeclaring the selector--there is actually code within those brackets, it's just being removed/ignored when the browser loads it.

[Ingolme]

Can you post the code from you stylesheet on those lines? The image you posted isn't showing up for me, possibly due to the bad internet I have here.

[ShadowMage]

I'm not redeclaring the selector--there is actually code within those brackets, it's just being removed/ignored when the browser loads it.

Then, like Ingolme said, we'll need to see the code you're using. Copy and paste it from your style sheet so we see exactly what you're using. I know you said you checked and double checked your code, but it sounds like you have spelling or syntax errors. Like my teachers used to say, sometimes you need a second set of eyes. You might be seeing what you think you wrote instead of what you actually wrote.

[inoculated]

Aha! Got it to happen again. This is what I'm trying to override:

/* template.css line 206 */ .menutop li:hover .drop-wrap, .menutop li.sfHover .drop-wrap {	left: 0;	top: 58px;}

And this is what I'm using to override it:

/* template.css line 659 */ .menutop li:hover .drop-wrap, .menutop li.sfHover .drop-wrap {	top: 44px;}

Aaand here's what Firebug is showing me:

template.css (line 659) .menutop li:hover .drop-wrap, .menutop li.sfHover .drop-wrap {} template.css (line 206) .menutop li:hover .drop-wrap, .menutop li.sfHover .drop-wrap {	left: 0;	top: 58px;}

This might be a bad example cause there may or may not be javascript involved (but if its supposed to be displayed as inline css, maybe not?), I'm sure I'll run into it again today so I'll post another example and a link to the site.

[ShadowMage]

Definitely strange as line 659 should override 206. You could add !important to make it override: top: 44px !important;

[dsonesuk]

How are you editing this css file? joomla backend, or FTP by opening directly from joomla template folder, edit it then FTP it back? you should send it back as ascii not binary, but you should not have this problem as the ftp program should automatically do this for you.

[inoculated]

I'm editing in Dreamweaver. Using FTP to grab the CSS file, editing & saving to my disk, then uploading & replacing via FTP.

[dsonesuk]

As a test go into backend of joomla, make sure the css styling is there and correct, then save it, preview and refresh page, observe the difference if any.

[inoculated]

That's bizarre - went into template manager > css > template.css, and its totally blank. Which can't be the case, cause the whole site would be messed up. *chinstroke*

[dsonesuk]

I suppose you did select the correct template theme if more than one shown (usually with a yellow to show it is the currently used template theme) , also you may have template.css and template_rtl.css listed.

[inoculated]

It's happened again, this time I'm leaving it so you can check it out: http://dev.webpagede...com/higginson2/ The element to inspect is the blue "For" on "For Parents" Here's what Firefox is showing me:

custom.css (line 96) .module h3.header span.color {} blue.css (line 28).module h3.header span.color {	color: #1478C4;}

Here's what's supposed to be in those first brackets:

custom.css (line 96) .module h3.header span.color {	color: #FFFFFF;}

The selectors are the same, and custom.css comes after blue.css so it should be overriding, instead its ignoring.If I view the css file via Firebug, it still shows the empty brackets. But if I download the CSS file, the code IS there. http://dev.webpagedesignusa.com/higginson2/templates/yoo_corona/css/custom.css(its at the very bottom)

[dsonesuk]

I don't know if this is the problem, so humour me. But! as far as i know when using the background: shorthand the background color value should always come first, then image url, repeat, and then positioning.

[ShadowMage]

When I look at the css file in FireFox I see this:����color:�#FFFFFF;It appears that whatever program you are using to add the code is producing characters that are not recognized by FireFox. This is the likely culprit, because FireFox thinks the syntax is incorrect, which, technically, it is. Check your character encoding when you save the file. I think it should be set at UTF-8 but someone else might correct me on that. (Character encoding is not my strong point. )

[ShadowMage]

I don't know if this is the problem, so humour me. But! as far as i know when using the background: shorthand the background color value should always come first, then image url, repeat, and then positioning.

Actually that doesn't matter. The values can be in any order. Tested and verified (in FF at least). background: 10px 10px url(image.png) no-repeat #DDD;background: url(image.png) 10px 10px #DDD no-repeat;background: no-repeat #DDD url(image.png) 10px 10px; These all worked.

[dsonesuk]

I've always done in that order, as I went by what was stated here http://w3schools.com/css/css_background.asp

[ShadowMage]

I think I usually use that order too, but apparently FireFox can understand it in any order. I didn't check, but maybe other browsers get confused if the order is changed. EDIT: It appears that all the major browsers (FF, IE, C, O, and S) accept the properties in any order.