Toluu

CSSnewbie

CSS Tutorials, Tips & Techniques for the uninitiated.

Internet Explorer Bug Fix: Disappearing Positioned AnchorsNovember 19

A while back when I was working on developing the jQuery popout tutorials, I ran across a significant and annoying bug in Internet Explorer 6 and 7. Specifically, Internet Explorer does not respect the height and width properties of block-level, absolutely positioned anchor tags if they contain no content (or if that content has been moved or removed).

Instead of your anchors being the size you’ve specified, the size of the clickable area is limited to the size of the content inside the anchor. And therefore, if your anchor is “empty” (either because it’s an empty anchor tag, or you’ve used “display: none” or a negative margin to hide the content), your anchor tag’s clickable area is zero!

Let me explain a bit of what I mean. Let’s say I have a website with a very stylized banner at the top of the page, and I’ve decided to load the banner as a background image. However, in order to play nice with search engines and keep my SEO high, I’m still going to use an <h1> tag for my banner text, and then just hide its content. I also want a portion of my banner to be clickable, so I can let users get

Parla italiano? Check out CSSblog.it!November 10

A couple of months back, I ran a contest for my subscribers here on CSS Newbie. The prize was a copy of Eric Meyer’s pocket CSS reference book and a plug on my site. The winner of that contest was one Matthew Moro. Hopefully, Matthew has received his book by now. And, finally, this is his plug. :)

Matthew runs a website called CSSblog.it, a CSS-phillic resource for web developers whose mastery of the Italian language (which is limited to barely deciphering the menu at our local Spaghetti Works) far exceeds my own. Luckily, Google’s translation of CSSblog.it seems to be fairly accurate – giving me a window into the sort of work Matthew is doing.

CSSblog.it is part of a larger network of tech-related blogs in the Italian language. Other blogs include Tuxblog.it for Linux users and PHPblog.it for PHP aficionados (to borrow a Spanish phrase).

Howe

Styling Zebra Striped Tables With CSSNovember 3

I recently spent a bit of time on the OneHundredPushups website, and the aspect of the site that most caught my eye (aside from ninja-girl on the front page) was the zebra-striped tables strewn throughout. (For those not in the know, zebra striping tables refers to alternating colored backgrounds on table rows, a la iTunes.) Studies have shown that there is (or at least can be) a slight performance increase associated with zebra striped tables (or at least there isn’t a decrease), and that most users prefer zebra striping to traditional lined tables.

I thought the tables on OneHundredPushups were fairly well done (take a look for yourself here), but a glance at the code showed me that the developer had put more work than was necessary into creating his stripes. Here, I’ll show you an easy way to create a table like the one in the image above (or on the example page here) that doesn’t require you to mess with your XHTML — in fact, you could easily apply this to tables a

Understanding XHTML SemanticsOctober 15

Even those of you in the audience who are new to web development (or perhaps just new to the site) have still probably heard the word “semantics” or the phrase “semantic development” thrown about in various web-related conversations (and if not, I certainly hope you will soon!). But what does that phrase really mean? Today, I want to take a brief step back from our normal how-to fare to talk about why we do things the way we do them: the semantics that guide our development.

A Definition of Semantic Development

So what does this whole “semantics” thing mean? In web development, we use the term to refer to using tags that describe what something is instead of what it looks like. Or to put it another way, as Dan Cederholm states in his fantastic book Web Standards Solutions:

[W]e’re striving to use tags that imply meaning, rather than a presentational instruction. Are you dealing with a list of items? Then mark it up as such. Is this a table of data? Then structure it that way.

So in short, when w

jQuery-Based Popout Ad: Part 3October 1

Note: Part 1 of this series is available here, and you can read part 2 here. I’d recommend reading both of those articles before continuing on to this one.

The previous article in this series explained how to take CSS- and XHTML-based advertisement we’d developed and animate it using the jQuery JavaScript library. Today, we’re going to expand our jQuery a bit to make our ad a little bit more user-friendly (if an ad can ever be said to be user-friendly, that is).

We’re going to expand our functionality in two important ways. First, we’ll give the popout a memory: when the user closes the ad, it will remain closed for a predetermined number of days, unless they choose to open it again. And second, we’ll allow the user to open and close the ad by clicking the permanent sidebar cap. And before I get started, I’d like to point out that these two examples are really expandable to countless practical uses — don’t feel limited just because I’m talking about a popout here!