Welcome to Gaia! ::


(Working from mule again)

Okay, I recently began to use the selector "head" in the coding as something to put credits in, and it worked well in this profile (in the top left corner under the header), but it's not working in the profile that I'm working with right now (on this account). It won't move! scream

I've been coding for a while, so this problem is pretty stupid to me and I don't know what I did wrong, since the commands I gave to it are similar to the ones I used before; I even checked the coding on a CSS validating website.

Here is the code that works:

head {display: block; position: absolute; left: -110px; top: 30px; width: 100px; height: 120px; background: url(http://i.imgur.com/ygVKgcz.gif) bottom center; text-align: center; padding: 3px; border: 3px solid #86939B; border-left: none; border-radius: 0 10px 10px 0; transition: left 1s}
head:before {content: 'Profile by Confelicity; Vector by Freepik.com, CC; Fonts from FontAddict.com, CC; Text graphics from Cooltext.com, CC'; font-family: 'B20 Sans', sans-serif; font-size: 13px; color: white; text-shadow: 2px 2px 2px black}
head:after {content: 'Credits'; font-family: 'Fingbanger', sans-serif; font-size: 13px; color: white; position: absolute; top: 5px; left: 110px; border: 1px ridge #86939B; border-left: none; border-radius: 0 5px 5px 0; padding: 0 5px}
head:hover {left: 0px}


And the one that doesn't:

head {display: block; background: rgba(255, 255, 255, 0.3) height: 100px; width: 100px; position: absolute; top: 30px; left: -112px; border-radius: 0 10px 10px 0; border: 2px dotted black; padding: 5px; transition: left 1s}
head:before {content: 'Profile coded by Confelicity; Art by Chrysoberryl; Text graphics from Cooltext.com, CC; Fonts from Google Fonts, CC'; font-family: 'Architects Daughter', sans-serif; font-size: 11px}
head:after {content: 'Credits'; font-family: 'Crafty Girls', cursive; font-size: 14px; position: absolute; top: 40px; left: 90px; font-weight: bold; border: 2px dotted black; border-radius: 5px 5px 0 0; padding: 0 3px; background: white; transform: rotate(90deg)}
head:hover {left: 0px}


I even tried copying the coding from the previous profile and sticking it into this one, but it still didn't work. (Ignoring the font sources, of course.)

Is there something that isn't there that I'm not seeing? Or maybe something that's there that shouldn't be there? Perhaps this profile is weird?! Maybe there's something wonky about this selector. (Are we allowed to use it? sweatdrop )

Prismatic Unicorn

76,950 Points
  • Fairy bread fancier 500
  • Just A Regular User 500
  • Wing Mastery 100
First thing I do if in doubt, is check my CSS. (This validator is a bit funny about some browser prefixes, just as a general note)

I can't tell if there's anything else wrong, but you're definitely down one semi-colon in your second block of code.

Try

Quote:
head {display: block; background: rgba(255, 255, 255, 0.3); height: 100px; width: 100px; position: absolute; top: 30px; left: -112px; border-radius: 0 10px 10px 0; border: 2px dotted black; padding: 5px; transition: left 1s}
head:before {content: 'Profile coded by Confelicity; Art by Chrysoberryl; Text graphics from Cooltext.com, CC; Fonts from Google Fonts, CC'; font-family: 'Architects Daughter', sans-serif; font-size: 11px}
head:after {content: 'Credits'; font-family: 'Crafty Girls', cursive; font-size: 14px; position: absolute; top: 40px; left: 90px; font-weight: bold; border: 2px dotted black; border-radius: 5px 5px 0 0; padding: 0 3px; background: white; transform: rotate(90deg)}
head:hover {left: 0px}


I've never used the head selector before, so I can't tell if there's some other issue, but that should definitely eliminate one problem.
Zzyli


That's funny, I could have sworn the semi-colon was there... anyway, I put the semi-colon in and it's still not moving upon hover like it's supposed to crying

Thank you for spotting that error, though!

I'm at a loss here emotion_sweatdrop

Prismatic Unicorn

76,950 Points
  • Fairy bread fancier 500
  • Just A Regular User 500
  • Wing Mastery 100
gothygrimgirl830


That's funny, I could have sworn the semi-colon was there... anyway, I put the semi-colon in and it's still not moving upon hover like it's supposed to crying

Thank you for spotting that error, though!

I'm at a loss here emotion_sweatdrop

Okay, I've been doing some more investigation, and this is where it gets really weird

This is what your profile looks like in Chrome
User Image - Blocked by "Display Image" Settings. Click to show.


This is what your profile looks like in Firefox
User Image - Blocked by "Display Image" Settings. Click to show.


I'm set to auto-update browsers, so this should be the most recent version of both. I can't see at a glance anything which you would have done which would require browser prefixes to function, but I'm no expert.

I do think that 'columns' is sitting on top of 'head', because when I tried to inspect element on Chrome, I couldn't actually access the head selector. This would make it impossible to hover on that part of the profile, hence preventing the hover code from ever activating. I'm not sufficiently familiar with Chrome's dev tools to dig deeper, as I prefer doing coding on FF and just use Chrome to check for compatibility issues. Again, I don't really have enough experience with how these things should behave to explain why, I can just see what is going wrong. sweatdrop
Zzyli


Not even gold and silver can


Whoa, that is quite unsettling. I know people say it's better to code on Firefox than Chrome, but I prefer using Chrome all the time just because I like using the BetterGaia extension.

I fixed that cross-browser compatibility thing by entering a character into the background url space while editing my profile theme, updating, and saving; common and annoying v2 bug that is.

That last detail is just what I needed! I totally forgot that the columns were covering the head... all I had to do was give it a higher z-index and it did what it was supposed to do. Thank you tons!

One more thing, though. For some reason the fonts aren't showing up. It's using the default fonts even though I have fonts from Google Fonts put in there.

I checked my coding using that other website and it was just fine. Um...

It's fine if you don't have the answer to this; you've helped a lot already. Thanks again for looking into this!

break the two of us...

Prismatic Unicorn

76,950 Points
  • Fairy bread fancier 500
  • Just A Regular User 500
  • Wing Mastery 100
gothygrimgirl830

The only thing which I can think which may be affecting your webfonts is that I see you have a woff2 extension, and I've always imported Google Web Fonts using a woff extension. Replacing the fontface imports with the CSS I'd use to import fixes the issue.

There's something here about FF handling webfonts slightly differently than Chrome, and I don't entirely understand it, but it could be the problem.

Profile coding for me is rather like reading Japanese; I understand some of the basic stuff, but a lot of the more complex things I just sort of try to figure out by context.

So, try
@font-face {
font-family: 'Crafty Girls';
font-style: normal;
font-weight: 400;
src: local('Crafty Girls'), local('CraftyGirls'), url(http://fonts.gstatic.com/s/craftygirls/v4/0Sv8UWFFdhQmesHL32H8o3hCUOGz7vYGh680lGh-uXM.woff) format('woff')
}


and
@font-face {
font-family: 'Architects Daughter';
font-style: normal;
font-weight: 400;
src: local('Architects Daughter'), local('ArchitectsDaughter'), url(http://fonts.gstatic.com/s/architectsdaughter/v5/RXTgOOQ9AAtaVOHxx0IUBOkI_DLF4EgbZt3mhU8gQFo.woff) format('woff')
}


Hopefully, someone will come along with a more comprehensive explanation for why this is happening. I'd love to know myself
Zzyli



Not even gold and silver can


Oh, that figures... thanks for giving this to me! It's working perfectly.

I never noticed this when I was using Google Fonts before. I was always taking the coding from the url given in the "at import" tab, and I thought it was always woff extension. This woff2 extension is puzzling.

If I may ask, where did you get the woff extension ones?

break the two of us...

Prismatic Unicorn

76,950 Points
  • Fairy bread fancier 500
  • Just A Regular User 500
  • Wing Mastery 100
gothygrimgirl830

I just use the code from the at import (apparently Gaia hates this combination of characters?) section as well. I'm still a little puzzled. I'm glad you could get everything working though!

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum