I received a tweet the other day about these cool CSS3 buttons called BonBon Buttons. The site says they are named after the French word for candy, but after looking at them, they look like Pez to me. Hmmm…that is what I will call mine…Pez! Regardless they are very pretty. Even better, the creator of them lists where it won’t work. He was just tooling around one day and made these buttons. Well, I decided to do the “poor man’s version” of those. And unlike the BonBon buttons, my Pez button will work in IE6 as long as you use CSS PIE, with the exception of text-shadow, and the radial gradient. Those two properties don’t add all that much, and even without them they look good in IE.

View Demo

Are there 4 tons of CSS involved?

There is well over 100 lines of CSS in the BonBon version, so I wanted to reduce that amount to something close to manageable. It still looks good, but I had to cut a bunch of stuff out. Here is a look at the actual CSS code for my button.

a {
position: relative;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #76A14B;
text-decoration: none;
text-align: center;
-webkit-border-radius: 25px 10px 25px 10px;
-moz-border-radius: 25px 10px 25px 10px;
border-radius: 25px 10px 25px 10px;
border: 2px solid #BFE599;
padding: 10px 20px;
display: block;
width: 100px;
margin: 0 auto;
-moz-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
-webkit-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
text-shadow: 2px 2px 5px #ffffff;
behavior: url(images/PIE.htc);
}
 
.glassy {
background: -moz-radial-gradient(center top , ellipse farthest-corner, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), -moz-linear-gradient(top, #CCFF99, #99CC66);
background-image: -webkit-gradient(radial, 100 100, 32, 118 118, 15, from(rgba(255, 255, 255, 0)), to(#ffffff)), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFF99), to(#99CC66));
-pie-background: linear-gradient(top, #CCFF99, #99CC66);
}

The glassy part adds the background gradients as well as white radial gradient at the top of the button. So I reduced it down to like 30 lines of CSS for a pretty cool button.There are a few things to note:

1) As stated before, you MUST use CSS Pie for this to work in IE.

2) Ignore the webkit radial gradient, because I didn’t figure out how to do it correctly. Webkit’s syntax is a pain in the ass, so I just didn’t get it working correctly. If anyone wants to get that part done and post it, that would be great.

3) For IE6 to work, the ‘a’ tag MUST be positioned relative. The effects get blow away if you do not.

Final thoughts on this little experiment

The really cool part for me about doing this, is that I’ve used two things/techniques from my previous posts. I’m using CSS Pie, and using multiple box-shadows on an element, which I wrote about here.

I really like taking other people’s code, and seeing if I can do it with less code. Granted, here I am leaving some things out, but the overall effect comes through. My Pez button still looks like candy, and it didn’t take a vast amount of CSS to work. Would I use this button myself rather than cut images? Actually, with it pre-made, yes. If it wasn’t, then no. It took me a while to get everything the way I wanted it, and you just can’t waste that much creating a single button. So in production, I would have Sliced ‘n’ Diced an image. Now, if you had a library of pre-made, small weight budget CSS3 buttons, then I might start using these types of things more often. Maybe I’ll start one and throw it out for you guys.

Take the code above and have fun with it. If you come up with something better, let me know!

Coupon Code: webmachine

There are four types of positioning: static, fixed, relative, and absolute. Static is the default position state which means it isn’t positioned. It goes where it normally would on the page. Fixed is positioned relative to the browser window, and won’t move even if the window is scrolled. Relative positioning allows you to use the top, right, bottom, and left CSS properties to position an element relative to where it would appear in the document. Absolute is the tricky one, because it is basically removed from the document, and placed EXACTLY where you want it to go.

A note on :relative

If you position something relative, and then use top and left to shift it over, don’t expect everything below it to shift as well. It still occupies the space in the document normally, you are just shifting it from its initial placement.

Let’s take a look

View the following demos to get a clearer picture of what I am talking about.

When you position something absolute, you need to remember that it is removed from the flow of the document – everything else will ignore it. The element is positioned relative to the first parent element that has a position other than static, if there are none, it will use . If that is the case, and you set the element’s top and left to 0, it will appear at the very top left edge of the window. No matter how you resize that window, that element will always be at the very top left. Take a look at what we would have.

View Demo

Here is what the css looks like:

#one {
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 0;
	left: 0;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

How to put it where you want it

Let’s say though, that you want an element in a specific spot that shows exactly where you want it all the time. Easy. Position one of its parents to relative!

View Demo

Here is what the css would look like:

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

All that was changed, was adding position: relative to div #one, and changing the top and left numbers to div 2. Change them to 0 using Firebug, and you will see that 0 means positioned at the top left of div #one now.

One is never enough

Ooohhhh…I get it, you can’t just have one. You want another div there positioned absolutely. AND…you want this new div to appear under the red one.

View Demo

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
	z-index: 2;
}
 
#three {
	position: absolute;
	top: 85px;
	left: 550px;
	background: #999900;
	width: 200px;
	height: 50px;
}

All I changed there, aside from adding the styles for div #three, is add z-index to div #two. It doesn’t matter what order the absoluted divs are in, just what z-index they have. Whichever element has the higher z-index, will show on top.

Closing thoughts

CSS positioning is actually very easy. Once you know how to use them, figuring out why an element isn’t positioned the way you thought it would be, becomes a lot easier, too. I can’t think of a time where I have used :fixed, but :relative and :absolute are thrown around enough that it is a must to learn if you haven’t yet. Hopefully now, you get a more clear picture of what they do, and how to control them! Let me know if you have any questions.

Coupon Code: webmachine

So I read an article today that I thought was going to suck. Nope, I was wrong. While I knew most of it, there was one thing that popped out at me today. See? Learnin’ all the time! CSS3 has some cool stuff that is easier to do than opening up Photoshop and creating an image for it. If you got my tweet today, which most of my subscribers didn’t because you don’t follow me on twitter (FOLLOW ME!), then you have an inkling of what I am talking about.

Text-shadow is a really good addition to CSS, I use it on my titles and what-not, and with the use of blur on them, it creates a nice subtle effect. What I did NOT know, is that you can have multiple shadows on the text, adding more awesome to the already kick ass property. Let me show you what the styles look like.

text-shadow: 4px -2px 11px #0033FF,
	2px -7px 10px #00CCFF,
	5px -8px 26px #00CCCC,
	 4px 6px 9px #999999;

VIEW DEMO

Yep! You read that right, there are 4 shadows going on there

Holy hell, 4 text-shadows thrown on to create, while not a stellar looking effect, a crazy looking block of text. You know what is even more nuts than that? Can you guess? GOOD JOB! You guys are smarter than I thought, and you are right. You can add as many text-shadows as you want on that thing, seperated by commas. Not only that, but you can do the same thing for box shadows.

This just proves that there is always something new to learn about the things you think are are good at. Obviously I won’t be using this type of effect all that much, but it altered my way of thinking about CSS3 a little. If I can do this…maybe I can do something else that I didn’t think of.

Any other CSS3 stuff you guys know that others might not? Let us know here!

Oh, and I styled the demo buttons finally. Always adding stuff here.

Coupon Code: webmachine

$('p:only-child').addClass('highlight');

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).

I’ve read now a bunch of very bad ways to fix this, like using a negative top margin to move the bottom div up. Pure dumb, because there is an easy way to fix this. I’ve used zoom set to 1 before, but that doesn’t validate, so if you are one of the purest, this isn’t an option. Plus, this won’t work on this anyway. Real easy way to fix it. Give the image itself a display of block. Pure easy right? Now, I know most of you are not going to run into this problem, or maybe you just don’t care. I’m just demonstrating this so you are aware of it, and know how to fix it. It took me a while to figure out it had to be put on the image itself, and not the containing div. When using Spoon for Firefox, IE Developer kept showing text nodes underneath the image, so I was looking for a way to get rid of that. After about an hour of fiddling and trying everything I finally got it. And so do you now!

Let me know if you have come across any wierd IE bugs! I am always looking for stuff like that and how to fix them.

Coupon Code: webmachine

$('#container > *').css('color', '#000000');

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!

Easy stuff normally right? I’d put the div in the content wrapper, and float it right, then everything wraps around it. Done. Not in my case though, where I can’t inject further code into the default content. What I WANT CSS to be able to do, is allow me to plot the points of a div. In other words, I want to be able to control the shape of the div. The picture below shows what I want the div to look like.

What would the CSS look like?

Now that you see the basic shape I was looking for, what would the CSS look like for something like that? Well, here is a crack at that:

.mainContent {
border-points: 0 0, 0 200, 200 200, 200 400, 400 400, 400 0, 0 0;
}

What would all that mean though? Each two number set would plot a point for the div, so if you always start at the top left most corner, (top: 0, left: 0) you would tell the CSS where to plot each following points. In this case, the second point would be at 0px from the top, and 200 left of the starting point. The next would be 200 from the top, and 200 left. Then 200 from the top, and 400 left. And so forth until you completed the div again at 0 0.

But what if you wanted a circle?

.mainContent {
shape: circle;
shape-size: 200px;
}

Where is my flying car?

Obviously I’m coming up with the ridiculous CSS crap off the top of my head, but I think you understand what I am talking about. To me this is like the question “Why don’t we have flying cars yet?” CSS has been around a while, I would think it should be able to do some things like this. I don’t think it would cause to many issues with layout, that floats and proper math couldn’t handle. Now that you have read this, what do you think? Am I insane for expecting or wanting such a thing? Can you see a use for it? Seriously, imagine getting HTML text to wrap inside a circle or triangle shape? Some cool stuff could be done.

Do you have any CSS wish list items? Let me know, or tell me my idea is good or crap. Let’s talk!

Coupon Code: webmachine

$('.myClass div').innerHeight;

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:

.myClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px #000000;
behavior: url(/PIE.htc);
}

The last line there is the obvious call to the htc file you have to download, which you can get here.

A couple things to note:
1) Again, like the other one I talked about, the htc file is relative to the html file, NOT the css file. So either make it absolute from the domain root, OR, relative to the html file.
2) There are issues with static positioning and background images, which you can also read about here (I had to find this out the hard way with the other version I used). Easy solution is to make the target have position set to relative.

Other than that, this works like a charm. Works on IE6-8.

Conclusion

Usually I am not so into these types of things because you have to add a script to make it work. Not so here, and I see no reason for not implementing this in all of my projects. All you have to do is upload the file to your server, and you are done. Well other than making all the behavior calls to it in the CSS file.

Coupon Code: webmachine

var myMovies1 = ['Rocky','Better Off Dead','The Last Samurai'];
var myMovies2 = ['Goonies','Hangover','40 Year Old Virgin'];
$.merge( $.merge([],myMovies1), myMovies2);

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:

.roundedClass {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(images/border-radius.htc);
}

This being the important part:

behavior:url(images/border-radius.htc);

Where ever you are using the border-radius properties, you want the behavior added as well. Note that this does not work at all on anything in a form. So inputs, buttons, whatever…if it is in a form, I could not get this damn thing to work. Also, make the path in the behavior line relative to the document NOT the CSS file. Got it? If for instance, the .htc file is in the images folder and you are dealing with a root level document, then it would be images/border-radius.htc. If you have any questions about this, post a question in the comments section.

IE8 is not very nice – pay attention here!

I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:

<div class="roundedClass"><p class="textClass">This is the text that goes on top of the rounded corners div</p></div>

If you did this:

<div class="roundedClass">This is the text that goes on top of the rounded corners div</div>

Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.

To conclude

Have two wrappers (elements)…both positioned relative, the outer has the behavior and border-radius properties. Piece of cake. This works in IE6-8, and once I figured out the two wrappers and position relative thing, everything worked beautifully. Again, if you are still confused, ask away!

I will leave you with a quick tip. If you have multiple tabs open in IE8, press ctrl+q. It will show all the tabs you have open in one window, which you can then pick the one you want to view. Works kind of like Apple’s Expose. I wish I had known that a while back. It is actually a feature that they should have been promoting more. Especially considering that FF4 will have this feature now as well.

Coupon Code: webmachine

$('#wrapper').detach('ul');

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!

Click here for demo.

So how do you do it already?

It took me a while to understand what all of the numbers meant, and how to move the gradient around. Using the image below, I’ll explain what each does in plain English. After reading it, the best way to really get a grasp of it is to mess with it in Firebug, adjusting the numbers.

Firefox:
A: This number, as it goes down, moves the center of the gradient left/right, while shrinking/increasing the amount of the center color displayed.
B: Same as A, only top/bottom
C: Adjusts the angle of the gradient, but in circle shape, this doesn’t do anything
D: Shape of the gradient – This can be circle or ellipse
E: Size of the gradient. This is like PS, where you can start and end your gradient at any point. This can be set to: closest-side, closest-corner, farthest-side, farthest-corner, contain (same as closest-side), and cover(same as farthest-corner)
F: This is the center color of the gradient
G: The color stop position – can be from 0 – 100%

Safari:
A: This sets what type of gradient: linear or radial
B: Moves the gradient left/right and top/bottom while keeping the center of the gradient in the middle (will look like a cone if you move the numbers far enough
C: How much you are fading in or out the center color
D: Moves the center of the gradient left/right and top/bottom while keeping the gradient in the middle
E: How much of the center color that is solid (not faded out) – mess with this and you will see some cool stuff!
F: The outer color
G: The center color
H: Think of this as the color between the outer and inner colors, and its percentage to show. Note you can do a very smooth gradient without F & G, and only use a bunch of color-stops.

Here is the CSS I used for the circle:

#container {
	-moz-border-radius: 100%;
	border-radius: 300px;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	background: 
		-moz-radial-gradient(150px 150px 0deg, circle closest-side, #ff0000 0%, orange 50%, yellow 100%);
	background: 
		-webkit-gradient(radial, 150 150, 100, 150 150, 40, from(yellow), to(red), color-stop(.4,orange));
}

Take a look at the demo, copy the HTML and CSS, and start messing around. Once you start fiddling with it, everything will start to make sense. Hopefully my image and little lists helped you to understand CSS3 radial gradients better, and you get a clearer picture on controlling them. Now you can go and do some experimenting and come up with more raindrops.

Coupon Code: webmachine

$('.touchThis').live('click', function() {
alert('You totally just touched that!');
}

If you have kept up with me, then hopefully you read my post on Sass 3. If not, well hopefully you are not out of the loop and have at least heard of it. This post is about LESS and LESS.js (which you can read about here). LESS used to be a Ruby Gem install, not sure what that means exactly other than it is a pain the ass to install if you are not familiar with the command line.

There is a brilliant new way to actually use LESS, and that is to simply use javascript. Nothing to install, just include this line:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

You will also need a link to a LESS file, which will look something like this:

<link rel="stylesheet/less" href="css/test.less" type="text/css" />

A simple text file with a .less extension.

So what exactly is LESS? I would define it as a simplified and easier to use version of Sass. It incorporates the cool parts of Sass, such as variables, mixins and nested rules. Operations are also included, but I haven’t delved too deep into it yet. But a small test was all it took to see what I liked and disliked. First, lets take a look at the VERY basic page I did.

Click here to see the demo.

Again, LESS does all the basic stuff Sass can do, only with slightly different syntax. For instance, when declaring a variable, you use the @ symbol instead of $. When doing Mixins, you do something like a class: .className(values go here), instead of the @mixin that Sass uses.

Why it kicks ass

Lets get on with what is good about LESS. First, it took me less time to learn LESS…hmm that is going to be annoying isn’t it? Anyway, less time to learn than Sass. Now keep in mind that I have already begun using Sass, so that could be a factor in how quickly I was able to pick it up. It’s not really all that hard to understand. If you know CSS well, then this is a twenty minute learning process, and probably only an hour to master. This is a huge plus in its favor.

Another would be the fact that they came out with a javascript version of it. All you need is that one line of javascript, and a text editor for creating the .less file. For a second dose of cool, add this after it:

<script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
</script>

This basically auto-refreshes the CSS whenever you save the .less file. You make a change to the file, save it, and freakin’ BAM! the browser shows the update pretty much instantly, without having to refresh(this is for working locally). On top of that, if you make a mistake, you will know it big time, as it puts out a giant ass warning on top of the page. This makes it fast and easy to deal with. The only other thing I like, which is probably a huge plus if you are familiar with Sass, is that there is no manual compiling of the .less file.

Now what I personally don’t like about it. You were probably thinking this was just a ringing endorsement of a product, didn’t you? No, there are actually things I don’t like, and its difficult to say what others will say about them.

Every rose has its thorn…or two

One, take a look at my demo, check the source code, and click on the link to the .less file. What do you see? That’s right, not just plain old CSS. You actually see LESS, so if are unfamiliar with it, you will be asking yourself what all the crazy looking stuff is. I am not sure exactly why this bugs me, but it does. I just want to see the regular CSS output, not the LESS itself. This is opinion, so take it for what its worth. I’m just telling you what I personally don’t like, and what to expect.

Two, and notice that this is what I listed as one of its good points, is your CSS is now reliant on javascript. This above all else is the one factor that really bothers me. Where Sass is compiled ahead of time with the operation already over, LESS is doing it on the fly. Plus, while not big, if you are not using a minifier, you are adding http requests just to make your CSS work. I also have NO idea if LESS plays well with other javascript libraries such as jQuery or Ext (if ANYONE can answer that, I would HUGELY appreciate it).

Let’s wrap it up

After trying both LESS.js and Sass 3 now, I will say that at the moment I favor Sass 3. I prefer the mixin syntax even though it is longer, for the simple fact that I can spot them a mile a way. In LESS they can look like a class if you are not paying attention. I also prefer the $ method of calling a variable because I am familiar with jQuery, and the symbol is recognizable for me. LESS.js gets the advantage points in not having to install anything, ease of getting started, and no manual compiling, but ultimately scares me with having to rely on javascript for my CSS, and not knowing for sure how it behaves with other js libraries.

The article I linked to in the beginning of this post, about making CSS obsolete is jumping the gun way to early. I will agree that LESS.js is pretty damn cool, but it’s requiring people to learn something on top of CSS, which they might not have a terrific grasp of yet anyway. Will people use it? Yes. Will a LOT of people use it, to the point of taking over just plain old CSS? No, not in my opinion. But I would love to see this kind of thing incorporated into CSS, and its a shame that CSS3 doesn’t. I would almost rather have these types of advances in CSS, than being able to add a drop shadow or a rounded border. Almost.

For now…I’m still sticking with Sass 3.

Coupon Code: webmachine

$('#myID').select(function() {
alert("Do not select this text again, or you will be sorry!");
});

There are things that have to be done to make sure your site works in all browsers, and sometimes that means you have to do some things in your CSS to make sure everything is nice. I am going to show you the major methods of how to what we call “hack” a css file so that the browsers display the same thing. Let it be known, that it took me a while to be able to design a site without worrying about IE6. At the start, concepts of float, how margins and padding work, and other such things can be very confusing. I did a lot of hacking in the beginning before I knew how to build a site correctly. It would be great if you could just write the CSS and it all worked perfect, but even now, every once in a while, you have to do some fiddly things to get the older IE’s to cooperate. Let it be known, that I use the IE6 one quite a bit for image replacement, and if you do use these, you actually should put them in a seperate IE stylesheet. For getting things up and running quick though, I keep them in the main CSS file until I am done, and then take them out.

Now onto hacking!

First up, is how to hack the different IE’s. Here are the major four:

.myText1 { color: #00FF33; }
 
.myText2 { color /*\**/: #cc0000\9; }
 
.myText3 { color: #0000ff !ie; }
 
.myText4 { _color: #000000; }

Or, all in one style like so:

.myText1 {
color: #00FF33; 
color /*\**/: #cc0000\9;
color: #0000ff !ie;
 _color: #000000; 
}

So what do these do? Glad you asked! If you want, you can copy these styles, and test them yourself.

Line 1) Obviously targets all browsers. This is just a plain style. Nothing special here.
Line 2) Will only target IE7 & 8 (but not IE6)
Line 3) Will only target IE7 & 6
Line 4) Will only target IE6

All of these styles together will get you this effect (try it out if you don’t believe me): All browsers other than IE, will get green text. IE8 will get dark red text, IE7 will get blue, and IE6 will get black. Its crazy, I know, but still kind of cool. That is great and all, but what if Safari is giving you a problem? Well, that is pretty unlikely. But just in case, here is how you hack the CSS for it, just in case.

.myClass {
margin: 20px 0 0 ;
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass {
margin: 0px 0 0 ;
}
}

I have no idea why you would need to margin something from the top differently in Safari, I’m just using something easy to understand in that regard. That second part of the code though would change the margin for Apple’s little darling. Unfortunately, from the tests I tried, it looks like you need another @media for each CSS rule. Sucks, but at least you know how to do it now.

And of course, what if you had to overwrite an inline style? Suppose you had this HTML:

<div style="background: red;">The inline styles for this div should make it red.</div>

You can fight that with this:

div[style] {   background: yellow !important; }

I have never had the need to do that, but just in case you do, there you go. Just because I can’t think of a reason to actually do that, doesn’t mean no one else will. I only know it because I thought I was being cornered into using it, and had to search for a way.

I really only use one of these, and that is the one for IE6. Here is what I use it for mostly:

.myClass {
background: url(../images/myImage.png) no-repeat 0px 0px;
_background: url(../images/myImage.gif) no-repeat 0px 0px;
}

I know I can use a png replacement script, but this is easier sometimes. IE6 gets a fair image, though not perfect, but it is at a suitable level of graceful degrading. If you want to see that in action, take a look at this blog in IE6. All the pngs are actually gifs in IE6, put in place using rules like the one above.

I have given you the ones I have had a need to know at one point or other. What hacks have you used?

Coupon Code: webmachine

$('#myDiv').load('newText.html');