Tag Archives: css

CSS Outlines

I’d never bothered with the outline property in CSS before, mainly because I could never see what made it different from border. OK, it doesn’t affect the object’s size or position, but you can account for that when designing a page. And I could see it might be useful if you wanted to have a two-layer border around an object, since the outline starts just outside the border.

Well, Firefox is nearing 1.1 alpha, and among the new features is real support for outline. I figured I’d set up a test page and see what happened.

I set up two classes, one which applied an outline and one which applied a border, and just tried them on different objects. <p> only looked different in positioning (since border is just inside the edge, and outline is just outside), but <span> illustrated the difference clearly:

Screenshot of outline and border.

The first paragraph has some text with an outline. The second has text with a border. In both cases, the text wraps at the edge of the window, but while the border breaks and picks up again on the next line—as if the span had simply been chopped into pieces—the outline completely encloses each section on its own. This fits with its intended purpose, which is “to make [elements] stand out.”

Opera and Konqueror (and presumably Safari) seem to handle outline already, and display my test page the same way as Firefox 1.1.

Trusted Site, Untrusted Browser

I installed the just-released Netscape 8 Beta. It imported most of my settings from Firefox, including bookmarks, cookies and even history. One of the first things I always check with a new browser is how it identifies itself, which in this case is as Firefox 0.9.6. (Presumably they’ll get on this by the time the final version is out.)

First impressions: importing was clean and worked well. UI is a bit freaky, as things are spread all over the place—like the main menu, which is in the upper right and in line with the title bar instead of where the menus are on every other Windows application. The multiple toolbars seem confusing at first (it took a while to dig up my bookmark bar, for instance). Then I looked at the site trust/rendering choices, the big exciting feature of this release. And I’m not impressed. Or rather I am, but not favorably.

The current tab shows a shield icon indicating the trust level of the site: Green if it’s been verified by a “Netscape Security Partner,” yellow if not, and I would presume red if it’s a known phishing/virus/etc. site. There’s also an icon indicating the trust level: a check mark if it’s trusted, an ellipsis for “not sure” and an exclamation point for not trusted. Unverified sites are, by default, in the “not sure” category. So far this makes sense.

Clicking on the shield icon opens a site controls dialog box enabling you to choose to what extent you trust the website, and below that, whether to display the site using the Mozilla Netscape or Internet Explorer engine: Continue reading

Random Links

AKA stuff I wanted to write about earlier this week but need to just slam out while they’re still topical.

  • Judge slams SCO’s lack of evidence against IBM. Also Groklaw’s take. After all the wild claims they’ve made without providing evidence, it’s nice to see even the judge is getting sick of it.
  • Coke may try out coffee cola – Yeah, it’s a month old, but it’s news to me. (Incidentally, I hate CNN’s practice of deleting stories from their website. That’s where I read about this earlier this week, and I had to go hunting for an article that was still up.) [Note: I’ve had to track down a third copy of the article.]
  • MP3tunes.com shuns DRM – former MP3.com founder starts a new legal download service, and sticks with unencumbered MP3s instead of messing around with ultimately-flawed digital rights management. I’m reminded of Cory Doctorow’s famous talk on why DRM is bad for everyone.
  • Beware the unexpected attack vector – Your enemy may not come at you from the direction you expect. Set up sentries around the beach, they’ll get you through the ocean. Set up a firewall, they’ll get you through web browsers. It’s mainly about computer/network security, but it has an interesting story explaining why there’s only one major newspaper in Los Angeles.
  • CSS Zen Garden parody: Geocities 1996 – I’ve been meaning to post a link to this for over a month. It’s fully valid code, and manages to bring back the worst of 1990s web design.

Pure CSS Firefox Buttons

A few months ago I started using css-based buttons on my website for things like the W3C badges, and on Wednesday I decided to add a Firefox link to pages where I didn’t want to use a graphic.

The basic idea is that instead of a graphic, you use a basic text link with the structure: <a><span>Get</span> Firefox</a> and style it to appear like this: Get Firefox

The span lets you style two regions in the link, and you apply two classes to the the a: one for the general look (borders, padding, font) and one for the specific category (standards/validation, features, etc.)
Here’s the HTML:

<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=880&amp;t=1" class="btn ff"="Get Firefox! Take back the web."><span>Get</span> Firefox</a>

(Don’t forget to update the link to use your ID!)

And here’s the CSS (cleaned up for readability; I condense it down to one line per rule):

a.btn {
font: 8pt Arial, Helvetica, sans-serif;
padding: 0 .5em 0 0;
border: 1px #000 solid;
text-decoration: none;
}
a.btn span {
border-right: 1px solid #000;
margin: 0 0.1em 0 0;
padding: 0 0.5em;
}
a.ff:link, a.ff:visited {
color: ;
background: #009;
}
a.ff:hover, a.ff:active {
background: ;
}
a.ff span {
background: ;
color: #000;
}

I arrived at this particular stylesheet after quite a bit of cross-browser testing (follow the link at the top to read about the whole process). It works perfectly in:

  • Gecko browsers (of course)
  • IE 5.5 and later
  • Opera 6 and later
  • Safari and (current) Konqueror

IE 5.0 gets everything but the borders. Older versions of Opera get the padding a bit off, and don’t quite get the hover effects right, but otherwise manage OK. Netscape 4 doesn’t recognize the multiple classes, which saves it from some really annoying CSS bugs (if you set padding, margins or borders on a link in NS4, it ceases to be clickable!) I haven’t tried it with Konqueror older than 3.2.

Originally posted on my Spread Firefox blog.

Creating CSS Buttons

Several months ago, I went on a minor site optimizing kick. One thing I decided to do was replace the validation labels with something smaller, less obtrusive, and directly on the page. I tried to duplicate the look of the classic antipixel-style buttons (like the ones you see on the sidebar here) by splitting a link into two <span> elements, but had so much trouble getting borders and height to match up correctly that I wrote it off completely.

After a while I came back to it, and started with very simple buttons like this:

How the first CSS badges should look

Your browser shows this as:

Valid XHTML XFN Friendly

Here’s the CSS and HTML used for this version: Continue reading