Archive for the ‘CSS’ Category

IE6 has bugs…let’s kill them

Everyone know how to fix the the double margin IE6 puts on an element that has a left/right margin on it, without using a hack? If not, it’s an easy one…set display to inline. That’s all it takes. Have you ever run into the 3px margin gap though? This took some hunting for me to find out how to fix it. If you have any idea of what I’m talking about, you will know how infuriating it is. A co-worker and I ran into this problem months ago, figured out how to fix it, and forgot about it. The problem came back, and we drew a blank. Basically, we are using a component that says “Hey, if a flash banner is present, use it, otherwise, use this image over here instead.” Well, when it puts the image in, it doesn’t give it a height or a width. Why would that be a problem? Because it doesn’t have ‘Layout’ according to IE.

What does ‘hasLayout’ mean?

I’ll give you the definition that I got from here: “Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content…”.

I would like to be able to explain why this happens, but the link above does a better job of it than I ever could. I just want you aware of what happens. To better illustrate this, take a look at the link below in IE6.

Click here for demo (again, look at it in IE6 – you won’t see it in any other browser).

Effects are cool, but come on, it could do more

Note: Comments have been disabled on this article due to an INSANE amount of spam ping comments. Must have been my title or something.

We can all agree that CSS3 added some really cool stuff. Linear gradients alone made it worthwhile for me. Add in border-radius, box/text-shadow, transitions (available in FF 4 if you didn’t know yet) and whatever else I’m forgetting to mention, and you have a pretty good upgrade to CSS. Today though, while working on a site, I was frustrated by something that CSS can’t do. I Google’d the hell out of it, and I couldn’t even get the right topic to come up. It made me stop and think that, ya all those cool effects are great, but there are some things I would like it to do beyond that.

Plotting Div Points

I didn’t think of it until today. I work within a custom content management system that feeds default content into specific sections on the site. I want the main content block, I call a specific ‘id’ on a div, and boom, it throws in some default content pertaining to whatever market I am building for. The problem though, is I can’t put a div/image/whatever into that content block, until after the site is ordered. Not a problem if I am building a custom site, because I have the ability to change that content. If I am building a template site though, I don’t have that ability because it has to fit any number of clients. What I needed today, was to wrap text around another div. See the image below and you will see what I mean.

NOTE: I think I am going to build this and sell the template here, so if you are interested, contact me!

Flash back to…

A little while back I wrote an article about getting border-radius working in IE. Well, if you haven’t been keeping up in the blogging world, I came across CSS PIE. It basically does the same thing, only more. If you use things like box-shadow, linear-gradients, AND border-radius, then this is the version you will want to use. Basically the same call in the css file:

Border-radius on IE? That is just crazy!

It’s funny how many things from my job come up as posts. Well, I guess not funny, because I end up working on things that I am not familiar with and have to fix. Which is the case tonight. I’m not sure if you have read any articles, but there are plenty, about getting the CSS3 property border-radius to work in IE. It is actually rather easy, so let’s get to it, and I’ll show you how!
Actually, I’ll tell you how. And then I’ll tell you some of the troubles I ran into.

Wait, that’s it?

So getting your rounded corners is pretty damn easy. There are three things you have to do:

1) Go here and download the htc file.
2) Place the downloaded file in your images folder
3) In your CSS file, on the style that you want the rounded corners you add something like this:

Finally, something not so outrageous using CSS3 that we can all understand

I got a link through twitter about a raindrop done using CSS (don’t bother looking at this in Safari or Chrome, because he write the additional CSS for that). Normally this is the kind of thing that I will look at and say cool, but waste of time. This one caught my eye though because it is actually pretty simple. I’m not going to recreate the damn thing, but all it is, is a bunch of divs and a surprisingly small amount of CSS. I was actually impressed with this one, and I think it could have been done with just an ul and list items. Now, I would still use an image in a real life situation, but I picked this piece because I did not really know how to use the new gradients. This guy obviously does.

Learnin’

That led me to do some small bit of research and tests, and found it is not all that hard, just slightly confusing to get a grasp of what the numbers do. On top of that, the CSS Safari uses to do radial gradients is pretty different.

Some things to note about Safari while doing my demo. I could not get it to recognize percentages for the values in the border radius, so I had to do pixels. I’m not sure it can or not, and I didn’t find anything about it. Safari 5 does not need -webkit- in front of border-radius – it will still use it, so I would include it anyway to support the older versions.

If you look at the demo, you can see a div with a basic radial gradient, with rounded corners set to 100% in FF, and 300px in Safari. This should appear as a circle with red in the middle, then orange fading out to yellow. The second, is just to show you something easy to do with it. It is a png with the word GRADIENT cut out of it, and a drop shadow layer style put on. It then has a div behind it with a radial gradient, which if you ever wanted to change the colors, you wouldn’t have to use photoshop to do it. Just change the CSS!