portisHeart (portisheart) wrote in s2expressive,
portisHeart
portisheart
s2expressive

  • Mood:

Order of CSS code lines [SOLVED]

[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.
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 13 comments