Jump to content

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


Recommended Posts

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: helpme.gif 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.

Edited by inoculated
  • Like 1
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Edited by dsonesuk
Link to post
Share on other sites

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*

Link to post
Share on other sites

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.

Link to post
Share on other sites
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. Edited by inoculated
Link to post
Share on other sites

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.

Link to post
Share on other sites
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.
Link to post
Share on other sites

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.

Edited by inoculated
Link to post
Share on other sites

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.

Link to post
Share on other sites

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)

Edited by inoculated
Link to post
Share on other sites

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. ^_^ )

Link to post
Share on other sites
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.
Link to post
Share on other sites

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.

Edited by ShadowMage
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...