Category: CSS

The thingy on the taggy thing (CSS terminology)

One thing I have always struggled with is terminology. You know what you want to describe, you look at it on the screen and you go “yep, I want another one of those things” but when you are trying to communicate your ideas or pass on instructions to others, you get caught out very quickly when you start talking about “attaching things to other thingy’s” or “tweaking the value on the other thing.”

So I’m doing my best to learn the proper names of things. Starting with CSS.

I would step through all my own notes on tags, values, descriptors, etc, but why bother when there are pages that do it all so brilliantly already. And surprise of all surprises this one is a Microsoft page!

Checkit: http://www.microsoft.com/typography/web/designer/css02.htm

Why isn't there a font-size:default value?

Playing around with fonts trying to figure out the most efficient way of setting up font size values for a major website, and I keep running in to inheritance problems, mainly because the system is build on a CMS which unfortunately has a lot of in-line styles.

So trying to keeop a percentage/ems based font-size method running becomes problematic when every second div has it’s own font-size command.

What would solve my problems is if there was a font-size:default value. The tag would break any inherited font-size values that may have been brought down from any parent items, and allow you to start fresh no matter how deep in the page you are.

Of course, the other solution is to go through the CMS and kill all the font-size commands, but that sounds like far too much hard work!

EDIT: Thinking about this problem more, I’ve thought of a situation that would make this command extremely useful – building code-snippets for other websites. If you know you want your text to be a particular height, but don’t know the context that it will be used in, this would be very useful. Or in situations where you don’t have access to the style sheet for a page.

Hide the text of a link and show a CSS image

I was playing around with a CSS rollover method which uses the one image, and just shifts it around to simulate a rollover. There are posts for a bunch of different approaches to this around the place ->

The Problem

The problem I had was that to make the technique accessible, it needed content inside the anchor tag (which most of the examples above neglected to add in). This can be solved by hiding the text away somehow, but I soon found a bit of a deal-breaker.

Continue reading »

Absolutely positioned divs randomly disappear

We came across a problem today that had us completely stumped. With a certain site on IE7 an absolutely positioned div would randomly disappear. In IE6 the story was far worse with the div not showing up at all.

In the end we tracked it down to a bug in IE where an absolutely positioned item next to a floated item would cause the absolute item to disappear! The solution? Add in an empty div before and after the absolutely positioned one.

Continue reading »