Feb 02

First thing to try when sorting out cross-browser CSS issues

tips No Comments »

This is really straightforward. Almost embarrassingly so. Web designers with even a modest amount of experience know this, and I’ll even go so far as to say that most of them do it regularly. But then, there are the ones like me who, despite its obviosity, tend not to remember, and suffer the consequences.

I do most of my web styling in CSSEdit, and most of my browsing in Safari. These are both about as standards-compliant as you’ll find, as they both use WebKit to display their loveliness, so I don’t normally think much about cross-browser compatibility until I’ve finished most of the work and come back to do the tweaking, testing and fixing. So, I’d recently finished working on a site and went over to test it in IE7, and a lot of it looked inexplicably stupid. Titles overlapped each other, indents looked frankly random, and so on.

The solution? Put this at the beginning of the CSS file:

* {
margin: 0;
padding: 0;
}

Simple huh? Like I said, very well-known, but easily forgotten.

Explanation: Each browser makes default assumptions about how to display various elements. So, in the absence of any other instructions, an h1 will be bold, a certain size, have a certain margin and padding, and so on.  When making a stylesheet you override these assumptions with your own instructions. But here’s the thing: different browsers can make different assumptions from each other. So unless you’ve explicitly stated the value of, for example, the margin underneath a heading, each browser will display it according to its own rules and you can’t assume it will look the same.

By putting that little snippet at the beginning of your stylesheet, you’re defining a rule that applies to everything. In other words, you’re overriding every assumption about (in this example) margins and padding, for every element. It will immediately change the look of your page, of course – because margins that were there by default suddenly won’t be any more. But from there it’s an easy matter to go through and add them back again. And hey presto: in my case, the layout was fixed for IE in about three minutes.

Tagged with: • • • •
Nov 10

Saving graphics from a PDF to use on the web

tips No Comments »

Now and then I get sent stuff and asked to turn it into other stuff. I’m sure there are better ways of phrasing that, but this will do for my purposes. Let’s agree to overlook the wording and move on to the content, shall we?

In the spirit of “please turn this stuff into some other stuff,” I was sent a very large PDF document so that I could use some of the images in it in a web design I was working on. It’s not too tricky to extract the graphics from a PDF — I found a tip here, for example — but then I ran into a problem. Each picture I extracted had its colour and contrast almost irrevocably strangified. I tried a bit of fiddling around in Aperture but it was clearly going to be a long and laborious process.

It seemed clear enough that the problem related to colour profiles, which are something I try to avoid learning about whenever possible. (To be honest, my calibrated iMac screen, InDesign’s PDF export, and every litho printing shop I’ve used work so well together that colour accuracy has never been a problem.) All these pictures had been converted for CMYK printing, rather than the RGB I needed.

But the solution turned out to be pretty straightforward if you have Acrobat Professional and Photoshop:

  • First of all, open the PDF in Acrobat Pro.
  • Choose Advanced – Print Production – Convert Colors.
  • In the Document Colors window that appears, look for anything that mentions CMYK; if it’s there, that’s your problem.
  • Select it, choose Convert from the Action drop-down, and choose an RGB profile in the Destination Space box. (I used Adobe RGB 1998).
  • Click OK and let it do its thing, then save the PDF. It won’t look any different at this stage, because Acrobat Professional had been converting the colours to display them on your screen anyway.
  • Now open the PDF in Photoshop.
  • When the Import PDF box appears, choose images (rather than pages).
  • Select any or all of the pictures you want, and the pictures are imported, correctly displayed, and ready for you to enact your nefarious schemes upon them.
Tagged with: • • • •
preload preload preload