?

Log in

No account? Create an account

Previous Entry | Next Entry

Order of CSS code lines [SOLVED]

  • Dec. 2nd, 2009 at 10:41 AM
[EDIT: actually, the whole question is totally unnecessary. all this happened because in spite of many controllings, i oversaw 1 carriage return.. sorry!]

does the order of the codelines play a role in a CSS sheet (or the CSS customize box)?

i just "installed" a custom cursor a few days ago, actually 3 of them: normal, link hover and 1 for the header (kinda special effect with header motive).
they worked fine. and then at once they didn't. i thought maybe LJ restricts them, since for some people, custom cursors are an issue.

but as i coded CSS for a friend's LJ yesterday, i noticed the hover cursor i put in for her works fine. so i tested mine at home, and it worked when i just used the cursor code lines.
so, it wasn'tLJ, it wasn't my storage server, just my code. i actually had added some lines after the cursor coding.

but my lines were ok, i read and read them. searching for the missing comma or bracket, nope.
rewriting the lines in my home test page, i casually changed the order- andoh wonder it worked! so i just placed them in this order back in my LJ - it works!

i really wonder why..


body {
cursor: url(http://fc09.deviantart.net/fs51/f/2009/326/b/5/chinese_symbol_for_love___blue_by_portisHeart.cur);
}

a {
cursor: url
(http://fc03.deviantart.net/fs50/f/2009/335/1/d/symbol_male_male___blue_cursor_by_portisHeart.cur);
text-decoration: none;
}
a:hover {
text-transform: uppercase;
text-decoration: none;
}

a img {border: 1px solid transparent;}
a:hover img {border: 1px solid #94A0AE;}


DOESN'T WORK. 1ST CURSOR APPEARS, 2ND NOT.
IMAGE HOVER BORDER WORKS.

------------------------------------------------------------------------------------

body {
cursor:url(http://fc09.deviantart.net/fs51/f/2009/326/b/5/chinese_symbol_for_love___blue_by_portisHeart.cur);
}
a {
cursor:url(http://fc03.deviantart.net/fs50/f/2009/335/1/d/symbol_male_male___blue_cursor_by_portisHeart.cur);
text-decoration: none;
}
a:hover img {border: 1px solid #94A0AE;}
a:hover {
text-transform: uppercase;
text-decoration: none;
}
a img {border: 1px solid transparent;}

APPARENTLY WORKS. BOTH CURSORS APPEAR,
IMAGE HOVER BORDER WORKS.

-------------------------------------------------------------------------------------

a little information:

a img {border: 1px solid transparent;} , why?:

without it, the image moves 1px down as does the whole layout as it gets hovered over, since the border adds 1px over + 1 px under the image. the thickertheborder, the bigger the move.
with the "fake" border when it's not hovered over, the spacing is already created.
actually only works in mozFF, not in IE8.

Comments

( 13 comments — Leave a comment )
nomoreprinces
Dec. 2nd, 2009 02:32 pm (UTC)
Yes, CSS takes order into account

If two rules have the same weight, the latter wins. So the browser values get over written by an external stylesheet, externals one gets overwritten by internal styles, and internal styles will get replaced by inline ones.

Basically the most recent instructions are taken into consideration and the ones before it are ignored.

Where that doesn't count is if you put !important before the ending semicolon.
portisheart
Dec. 2nd, 2009 10:59 pm (UTC)
yeah i seem to remember, that's why they're called "cascading style sheets"..

even then, my question wasn't really about the precedence between external-internal-inline rules, more about the order in which the rule lines are written INSIDE THE SHEET itself. see my example above.

the rules for body, a, a:hover, a img, a hover:img are all taken in consideration over the theme html, stylesheets etc, since they are my user modifications. and being into the same stylesheet, they must be in the same level of precedence.

some are even applied at the same moment: when the linked img gets a border due to hovering, the cursor changes too. same for text links who go uppercase.

what i don't understand, is why the casual order in which i put the rules in the 1st example didn't work, but the casual order in which i put the rules in the 2nd example did.

if i know what went wrong and why, in the future i'll be careful of the order in which i place the rules for the different elements.
is the cause the order? always in css? only in LJ? or sheer bad
luck?
if i hadn't discovered by chance, as i examined my friend's LJ (who has lots of my code since i'm pimping her LJ, but not ALL the rules) that her cursors worked, i'd have continued to believe LJ support restricted cursor use, or my storage server causes issues.
i never thought it was my css code, since it previously had worked perfectly until i added some new rules, hence the order problem.
av8rmike
Dec. 5th, 2009 04:09 pm (UTC)
I'm not seeing any difference between the two sets of codes. Neither custom cursor is working on your journal anyway.
portisheart
Dec. 5th, 2009 05:18 pm (UTC)
depends on your browser. with IE you should be able to see them, at least with XP IE8. i do, my girlfriend does, i see hers.. but on MozFFox it's normal you don't, i guess Opera/Safari etc either.
but wuth those, you see the round corners that IE ignores..
av8rmike
Dec. 5th, 2009 05:41 pm (UTC)
Oh, OK, thanks. For some reason, I didn't think to check in IE (the icons work in IE7). So which journal is it that uses the "non-working" other CSS?
portisheart
Dec. 5th, 2009 06:46 pm (UTC)
uh..LOL.. we have a misunderstanding here..
the two css versions i joined under lj-cut are the ones applied to my lj. but naturally not at the same time..

the first is not active any more because it was rewritten into the second. it was as the added code to the simpler cursor rules i wrote (i think it was img hover) caused the hover cursor not to work any more.
as i changed the order totally casually (explanation above), it then functioned again.

so my question isn't about a cursor not working, since i've repaired the css, but about how it was possible that the 2nd version works and the 1st didn't - even if i solved the problem, i've no clue why, it was pure chance, this means the same issue could arise again if there is something like an inner sheet order or something of that kind..
av8rmike
Dec. 5th, 2009 07:30 pm (UTC)
You kept mentioning a "friend's journal", so I was assuming there was another journal where the CSS you posted in the first example was working.

The answer to your question has nothing to do with order of CSS rules. The first example doesn't show a custom cursor on links because of the carriage return or space between "url" and the "(".
portisheart
Dec. 5th, 2009 07:57 pm (UTC)
hmm.. i wonder if this carriage return actually was in the original code i wrot on LJ..
i've got the habit of copying text i'll need shortly after (for reference or whatever) in the win notepad. this stupid contraption adds returns and stuff sometimes when you copy it again to paste it somewhere else - except if just before you click on "format -> no line break", which gives you a text spread on a very long line, and paste it that way. then it doesn't add the unwanted carriage returns which appear when you use "format - line break" which adapts your text to the window's width.

to post this here, i copied both versions of my code in the notepad, edited my text, and then pasted it into the LJ post form. without taking the line break away, since i discovered this only later. until recently, i usually had then to delete the cr manually, maybe i forgot this one.

we're no further LOL..
av8rmike
Dec. 5th, 2009 08:47 pm (UTC)
So what else did you want to know? I'm not seeing any unresolved issue here.
portisheart
Dec. 5th, 2009 09:08 pm (UTC)
what i don't understand, is why the casual order in which i put the rules in the 1st example didn't work, but the casual order in which i put the rules in the 2nd example did.
if i know what went wrong and why, in the future i'll be careful of the order in which i place the rules for the different elements.


even if i solved the problem, i've no clue why, it was pure chance, this means the same issue could arise again if there is something like an inner sheet order or something of that kind..
av8rmike
Dec. 5th, 2009 09:17 pm (UTC)
And I've already told you, the order of the rules didn't make any difference to the cursor appearing or not, it was the break in the URL statement.
Just to check, I copied the code from your first example exactly into my journal and changed only that line break. Both cursors worked fine. Therefore, that was the problem.
portisheart
Dec. 5th, 2009 09:30 pm (UTC)
so it seems this linebreak was really in the original statement then.. weird. at this time, i copied it as well in my 1st page editor to test, and was obviously so dense i didn't notice it (the break).. because it didn't work there either.
big big sorry for the bother!! *red & ashamed*
nomoreprinces
Dec. 2nd, 2009 11:34 pm (UTC)
It looks like ljextras.css or base.css or even screen.css is loaded as part of the style might be messing things up. I notice there's an "a img" declaration setting the borders initially to none.

Expressive loads a whopping seven style sheets before it loads the one with your adjustments. Something in those seven is at war with your changes and making strange things happen. I can't figure out what's going on in the LJ css.

Someone better versed in Expressive should be able to help.
( 13 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars