Importing Google Web Fonts, LightSpeed Web Store & SSL

As I am sure you know, SSL is very sensitive. Every link href, script src and img src in the document must be HTTPS for the page to be delivered completely secure.

If not, the encryption is partial and you may receive warnings about it. Worse, your customers will see warnings about it and might leave your site before buying or registering. So it’s better to never to let this happen, if possible. Especially in a production site (live). Goes without saying, I guess.

Anyway my latest thing is using Google Web Fonts because although I worship, love and adore WP-Cufon and Cufon and usually use them whenever I can I can’t use Cufon site-wide. Well, I could but not in good conscience if I care about how long the page takes to load and all of that.

Most of my clients choose 1 Universally available font for their main Body font and a couple of Specialty fonts for titles,headings and menus, to dress things up a bit. But my latest client wanted a Specialty font for their main Body font and so I found 3 compatible fonts in Google Web Font’s library. I used the @import in my main stylesheet and thought everything was going rather well.
Until we had to start checking SSL and wouldn’t you know it it wasn’t kicking in all the way.
Something was not getting encrypted and I could not figure out what it was.

Like I do whenever this kind of thing happens I reverted the template back to a default Web store Template and SSL kicked in all the way. After I looked through my customized files I still couldn’t find anything off…

Then I checked my main stylesheet and at the top was:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Alice);
@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

AHA! I switched it to:

@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(https://fonts.googleapis.com/css?family=Alice);
@import url(https://fonts.googleapis.com/css?family=Kameron:400,700);

And SSL kicked in all the way. JOY.

So don’t be silly like me. If you import fonts like this make sure the url is https. Good thing Google has SSL up the wazoo so this is not a problem. Awesome.

Internet Explorer and Z-Index and me

I’m sure you’re already aware of this but IE is a pain in the butt. I just spent more time than I like to admit trying to figure out why my dropdown menu would not stay open (on mouse hover) over my stupid slideshow. At first I thought it was because my stupid slideshow had a z-index value that was too high. So I spent time messing that up. But then I noticed a very curious thing: when I added a background color to the ul, the menu stayed open over the slideshow.

Hmmm.

I had added a background color to the ul but I’d used rgba for a transparent-ish background.Lower versions of IE(less than IE9) ignore rgba and I knew this. What I didn’t know, shockingly enough was that lower versions of IE will create a bug when they have an element with z-index and no background color. So if you want your drop down menus to stay open on hover over another element (no matter if it has z-index or not) you better add a background image or a color or both.

IE is so EVIL!!!!!!!!!!!!!!!!!

Doh!

If you switch your WordPress theme don’t forget to add your Google Analytics tracking code. I changed my theme 7 days ago and just now checked to make sure I was receiving data.Sure enough all reports stopped the day I switched the theme, earning me a big