As we all perfectly know, designers are narcissists.

Archive for the tag “revamp”

Today I found this odd little bugger in mobile Safari. I was writing the mobile-specific CSS sheet for the website I’m revamping, and it was all going smooth until I stumbled upon this annoying little <p> tag. The problem? I had specified the font size and properties for this little paragraph tag earlier in my document, which looked like this:

Nothing tricky going on here, right? A bold, italic Georgia font at 16px, with a blue color. Simple as that. But when I wrote the following CSS to make the layout for mobile browsers, I noticed that the font size did not change at all in mobile Safari. Not in iOS 4.0.2, not in iOS 4.1, nor in iOS 4.2.

I’m getting very used to adding !important rules while writing for mobile, since you kind of have to override the ”normal” style rules, but this didn’t matter. I tried lots of different variations, like font-size: 10px !important;, font: 10px Georgia, serif !important; and font-size: small;, but neither worked. It didn’t even work when I tried it this way:

At last, I was starting to get a bit frustrated, and cursed this paragraph’s font size sorcery. Then I thought, ”Let’s try declaring it with two different methods, then maybe Safari will take the hint and make the font smaller!”, and this is what I finally came up with:

It worked! It baffled me, but it worked! I didn’t need the !important rule any longer, but I had to declare the font size twice with two different methods – one time with px and one time with small. If I removed either declaration it wouldn’t work, regardless of any !important rules.

This problem might be very specific, but it was weird enough for me wanting to post it. I don’t know why this problem occurred, but here’s the solution either way.