Abstract Sequential Stephanie Hobson's abstract thoughts in the sequence she has them.

FireFox’s buttons are wider than IE or Chrome/Safari’s

I hate form styling on the best of days. This is a good example of why:

Firefox’s buttons are wider than IE’s or Webkit’s. Why? This little gem in the browser’s style sheets:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
padding: 0px 2px 0px 2px;
}

That’s right, it’s 4px wider. Thank you FireFox.

Fortunately, we can fix it!

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
padding: 0px;
}

That was easy :)

We have a class on our site that is applied to every button. I call it “formbutton” (I didn’t get to pick it. My boss picked it 8 years ago. It’s a great name isn’t it? Epic and enduring.) So I can simplify that code up to this:

.formbutton::-moz-focus-inner {
padding: 0px;
}

Want a little more info:

I found this with a little help from this article on viewing FireFox’s default style sheets. The observant among you may notice there is another style in there. It is for keyboard navigation. Use your new found powers wisely, don’t remove it without replacing it.

Also, here’s a link if you’re wondering what is up with the double colon notation.

And so far it does not look like there are equivalent pseudo elements in Webkit or IE, but I will admit to not looking very hard since this fixed my problem ;)

Taking a photo of yourself with an iPhone

Bullets alligned to the top of the text

Know how IE and FF display list-style-image bullets at two different heights and it drives us all nuts?

Did you know it was possible to use vertical-align on any inline element? Did you know that first-line is an inline element?

If you’re working on displaying the bullets at the same height, this might be the fix for you.

CSS3 only cover flow

Nothing teaches me how to do something like a project and I was trying to learn CSS3 so I tried to make a CSS only cover flow.

Some of it works in FireFox but all the cool stuff works best in webkit: here’s as far as I got.

Have fun with it :)

Web Hot. Beer Foamy.

Like to talk about front-end web stuff? Like to do it with other people? Don’t object strenuously to the presence of beer or perhaps even see it as a benefit?

Are you free June the 2nd between 5:30 and 8:30? Join others like you at Steamworks. Look for the girl in the hat (That’s me! Hopefully there won’t be more than one…)

Please let me know if you’re coming so I can reserve the right number of seats:

[poll id=”3″]

PS – I know I said I’d go for a different day, but unfortunately I’m pressed for time this month :/

I (miss|missed) AEA

Miss An Event Apart? Missed An Event Apart? Or like to talk about web stuff over beer?

Are you free April the 28th at 5:30pm? Join others like you at the Irish Heather in Gastown. Look for the girl in the hat (That’s me! Hopefully there won’t be more than one…)

Please let me know if you’re coming so I can reserve the right number of seats:

[poll id=”2″]

I lie to Batman

Note: If you’re following me because you’re a code geek, like I am, and you want only my web design related feed and posts they have their own category now.

I was asked the other night who my favourite comic book character is and anyone who knows me would answer without hesitation: Batman. They’d be close.

It’s Robin all the way.

Not Dick Grayson, Jason Todd, or Tim Drake – Robin. You know, that colourful target that swings into action next to the dark knight.

I lie to BatmanI like the idea that Batman needs a little bit of light to balance his darkness. I like the energy, optimism, and ingenuity of a kid fighting in an adult world.

Who’s your favourite?

Maintaining your CSS helps maintain your site

Rather than doing one giant redesign and launch, at BCIT, we’ve been doing small updates for a while now.

Take our footer for example, I got to update all of them using the CSS a few times and then we decided we wanted to mix up the HTML. Templates and applications were updated with the new code in phases. There were a few different ways the CSS for this could have been managed but I chose to have the old code co-exist with the new in the same style sheet and differentiated the two with IDs (let’s say I called them #footer and #fatfooter).

We’ve phased in #fatfooter slowly across the 46ish templates, 3 CMSs, and only Brandon knows how many applications with their own code that make up our website.

We should be done now and, unintentionally, I made it easy for us to check. A quick search of the server for id=”footer” turned up all the stragglers.

Some of the stragglers had been neglected for a while and turned out to need more than just a new footer…

So what’s languishing in your code that you can delete?

Why Abstract Sequential?

Short answer: it’s my thinking style :)

It means I enjoy theory, logic, precision and abstract thought and that I learn best through lecture, independent research, and following procedures. This means I love web design but makes my blog very, very boring.

It’s one of four learning styles as categorized by Dr. Anthony F. Gregorc. (I totally just Googled that). I first heard about my style from my teacher and friend Cheryl Atwater. The thinking styles are actually very useful for figuring out how to deal with people. For example, if you’re discussing something with me you’re more likely to persuade me with logic than heartfelt pleas ;)

The other three styles are: abstract random, concrete random, and concrete sequential. The fun stuff starts once you know which you are or which one that person at work who drives you up the wall is. Floating Neutrinos has a great information page summarizing each style’s learning preferences, strengths, and weaknesses.

You may be able to figure out which one is you just by reading the descriptions, but here’s a good old fashioned pen and paper quiz to help you figure it out.

Imperfect Pitch

There’s been a lot of talk about copyright in Canada lately since we’ve been trying to perfect the updates the Conservatives are pitching to our outdated copyright legislation – so reading about Jeremy’s copyright woes in his recent post Perfect Pitch really struck a chord.

He discovered a page in The Sessions’s discussion form about perfect pitch had been removed from Google search results due to a copyright infringement accusation by a company that makes a product called Perfect Pitch – the page isn’t about the product and, in fact, barely mentions it. So there wasn’t a copyright infringement but fighting it might require someone to show up in a California court room.

The usual method for dealing with DMCA complaints is to contact the ISP, not search engines. So why did this company without a valid complaint go to Google? Well, one goes to Google to get sites removed from search results. Maybe… search results where it is pushing down your company’s results?

Screen capture of search results for perfect pitch - showing DMCA take down notice.

We don’t know, we don’t have the full story here, but it wouldn’t be the first time a DMCA has been filed to remove content which isn’t infringing on anyone’s copyrights. It happened to political videos during the US Presidential elections and it scares me.

This is a poignant example of why we need to think our new legislation through very carefully, and why I support a “notice and notice” system instead of the DMCA’s “notice and take down” one.

UPDATE: The Perfect Pitch people contacted Jeremy with an explanation and are attempting to reverse their submission. It was laziness, not malice, which in some ways makes it even scarier.

← Before After →