CSS help requested

Ovid on 2005-04-17T19:34:07

Any CSS gods out there willing to take a look at this presentation? Those are the opening few slides on my talk about Logic Programming in Perl. However, I have two problems. First, the software I'm using to create the presentation produces awful HTML (it's txt2slides, if you must know.) Second, I suck at CSS. I've no idea what it looks like on IE for Windows (IE 5.2 on Mac OS X is terribly broken) and I know it looks terrible at lower resolutions.

Any advice welcome. I've been fixing the software to write better HTML, so if that helps, let me know. CSS tips -- or just style comments -- really appreciated.


IE5.2

jj on 2005-04-17T20:51:56

I hear you about IE 5.2 on OS X... the CSS and JavaScript used on perldoc.perl.org does not work on it at all.

Does anyone actually use this browser? Should I worry about making the site compatible?

JJ

Re:IE5.2

Ovid on 2005-04-17T21:07:29

I suppose it depends upon your target audience. I doubt that Perl folks are going to bitterly complain about not being able to use IE on a Mac. If this was some popular news site, it would be a different story.

Re:IE5.2

merlyn on 2005-04-18T03:49:12

IE on a Mac? Been years since I've used that. I'm typing this in Safari (the most native browser on the Mac), and I sometimes use Firefox. But I can't remember the last time I even fired up IE.

Re:IE5.2

Ovid on 2005-04-18T06:39:49

I gave up on Safari. It's slow. It's buggy. It sucks. I recently started using it again when the latest Firefox security hole showed up because of how serious that problem was, but as soon as Firefox had a new version out, I grabbed it and didn't look back.

Scaling

Smylers on 2005-04-17T21:55:47

The presentation doesn't scale well at the moment.

By using font sizes in px you're making things very small for somebody who's got a very high res monitor.

The most portable thing to do is to put font sizes in percentages: assume that 100% is the size that is appropriate for 'normal' text on a webpage, and work relative to that — so you probably want at least 150% for text on slides.

Those slides also degrade badly in smaller windows. If the window is sufficiently small that the bullets don't all fit in then the lower ones continue under the footer!

One approach is add in rules along the lines of:

.slide {
  position: absolute;
  top: 10%;
  height: 70%;
  overflow: auto;
}

That means that if the content doesn't fit then a scrollbar appears, but which just scrolls that inner region and doesn't hide behind the footer.

Also note I've used percentages for the heights there; these are percentages of the available height of he entire webpage, and you should probably use these percentages rather than absolute pixel values, to avoid making assumptions about the number of pixels readers have.

For things like padding and margin values the relative units like em can be useful: if you set padding of, say, 0.5em then a reader with larger fonts than you will have the padding scale up in proportion.

Hope that helps.

Smylers

Re: CSS help requested

jmcnamara on 2005-04-17T23:42:49


Have a look at S5.

John.
--

someone's done all this...

lachoy on 2005-04-17T23:42:59

S5 (Simple Standards-Based Slide Show System) is pretty nifty; customizing it doesn't seem to be too difficult either. I have no idea if it works in Mac IE, but I think it works well on Win32 IE.

Re:someone's done all this...

pemungkah on 2005-04-18T16:30:48

S5 works well in all the Mac browsers; I've used it to do a couple of presentations and I really like it. I redid the standard UI templates to work better on a 12" power book (see this link).

I'm working on a pod2s5 translator at the moment.

Re:someone's done all this...

lachoy on 2005-04-18T16:43:23

I'll take a look at these, thanks. The only customizations I've done were fairly minor for an internal presentation (logo, standard corporate look, etc.).

And please let me know if you get the pod translation done!