The last post was about making registration marks look superscripted without the use of the tag, which disrupts line spacing. I mentioned that I was having a problem getting my relatively positioned class to work in IE.

The symptom was that the registration mark (®) stayed fixed in the middle of the page when one scrolled. That baffled me until I found out what it was - the IE resize bug.

To fix this, all I had to do was make sure that the containing div for the registration mark (in this case, the main content div for the text part of my page) was also set to position: relative. Easy fix.

When you insert a registration mark (®) into your HTML, it comes in pretty much right in the vertical middle of the line. It looks weird there, as many a client has pointed out to me. They’d like to see it superscripted and I agree that’s where it looks most appropriate.

So you might try superscripting it (^®) but this presents another problem. It also inserts a little bit of extra space above the line that contains it, throwing off the line spacing if it’s tight.

How to have a nicely superscripted registration mark that doesn’t destroy the even spacing of text? Try this - works in FF, Netscape and Opera…

In your CSS file:

span.reg {
position: relative;
top: -3px;
font-size: 10px;
}

And in your (X)HTML:

®

Now in IE6 and 7, what I see when I implement this is that the mark looks fine until I touch the scrollbar - then it (and all the other marks with the same class) stays put on the page (like it’s fixed) while the rest of the content moves. It looks like IE6 and 7 don’t like ‘position: relative;’ in a span tag? I’m not sure. Looking for answers about this issue now.

I’ve been looking around for places to submit my CSS-based sites (galleries, that kind of thing). I just got my business site listed in CSSGlance, an Italian CSS gallery.

I think my site’s getting three stars in the ratings because of that big ‘Colorado Rockies’ logo (which is of course no longer there on the live site!).

One of the things that I find disappointing about what I do is that the care I take in creating clean, valid sites pretty much flies right out the window once the site is launched and in the hands of the client.

It’s not their fault, usually. Even when I build a site in a CMS and take a lot of time setting up the WYSIWYG editor to guide and specify the types of content they can add, it still gets screwed up and it just gets worse over time.

I’m a regular reader of 456 Berea Street and last night I found this excellent post about helping clients keep their markup clean. This is a really great idea, and I plan to implement it on the next site I build.

Basically what it does is insert some styles into the CSS that make any deprecated elements (like font tags or centers) show up as big and red so that the client can see them (and actually know they’ve done something that has a negative impact on the qualit of the code).  This visual is critical because no matter how many times I tell someone, even a very savvy client, not to use that but to use this instead, sooner or later they’ll do just that. But being able to see it, that’s big. And helpful.

Top right corner: redkitecreative.com. I’m pretty happy about this!

I found this today - 125 code snippets for web designers on Paul Spoerry’s blog. Some of these will be very convenient, I can tell already…

I’ve used various tabs from Exploding-Boy on several occasions - they’re CSS-only, they look nice and have neat compact code. Kudos to Christopher Ware for putting these together.

For my new project, however, I need the tabs to drop down from the header div. After finding only the inverted sliding doors tabs from 456 Berea Street and not much else, I decided to try working with the Exploding-Boy tabs as a base.

So here in this example you can see the original tabs at the top and my inverted ones at the bottom. The CSS for both is in the example file - the only modifications I made were:

1. Changed the border on #tabs6a (my version) to the top rather than the bottom.

2. Changed the padding on #tabs6a ul so the tabs were moved up against the border in 1, above.

3. Took the two images (the left and right sides of the tabs) and flipped them vertically.

4. Changed the background position of #tabs6a a:hover from -42px to -15px.

5. Changed the background position of #tabs6a a:hover span from -42px to -15px.

Now it looks fine in IE7, FF, and Netscape.

One problem - Opera doesn’t seem to play well with image background-position; I’m using Opera 9.1 and I didn’t find anything specifically referring to this version, but I did for 7.5 and others. In any event, the background-position was a little off for Opera, so I had to have a workaround for that…

I don’t normally use hacks in my sites, but in this case I used the media queries hack for Opera - I would appreciate a better suggestion if anyone has one!

@media all and (min-width: 0px) {
#tabs6a a:hover {
background-position: 0% -17px;
}
#tabs6a a:hover span {
background-position: 100% -17px;
}
}

I’m happy with the way this is working now and hope this is of use to others too.

Today is the second day I’ve sat down and worked on the layout for my new business website. This is, without a doubt, the trickiest layout I’ve ever done. Which is a good thing…

Today I found this super-handy little hack (it’s a hack, I know, and ordinarily I wouldn’t use this but for now I’m going to because it works perfectly and I’m not sure about using the Microsoft expressions for IE lt 7…). This is from Dustin Diaz:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Sweet and simple. And it works with min-width too.