Rizo's

Sometimes backgrounds will be visible using firefox but not IE7 which makes you wonder…. why?

The reason is pretty simple. CSS needs to be perfect for IE to understand them.

A perfect example would be.

[sourcecode lang=’css’]
body{

background:#fff url(picture.jpg)no-repeat;

}
[/sourcecode]

That piece of CSS will work on Firefox but not on IE7 (funny thing is that it MIGHT work on IE7 but it wont most of the time)

[sourcecode lang=’css’]
body{

Background-image:url(’image.jpg’);
Background-repeat:no-repeat;
Background-color:#fff;

}
[/sourcecode]

This will on the other hand work. As you can see, they have the same content, just a different layout.

You can of course put it in one row but make sure to have the right format, otherwise you’ll still have the same problem.

[sourcecode lang=’css’]
body{

background:#fff url(picture.jpg) no-repeat;

}
[/sourcecode]

As you can see, the only difference is the space between ”.jpg)” and ”no-repeat”

Try this page with both Firefox and IE7 and you’ll see that IE7 won’t show the background, but Firefox will.

During a makeover of a site I ran into a great site which puts up what that  has been removed from strict xhtml and also a very good overview of all elements and attributes for different doctypes. You can search or browse all elements and see which attributes that are allowed which is of great help when you’re cleaning up a site that uses old attributes. Great example is ”accesskey” which is still allowed in href, labels and a few more, but not in header elements and so forth. Go over there and make sure to bookmark it!

*edit* Thanks Jonatan, what a misstake I made 🙂 the links are now correct

I’m fiddling around with input styling and runned across this really nice article regarding styling input styles. Gives you a few nice tips and tricks to make your otherwise ugly input fields to nicelooking (and still userfriendly) input fields. Take a look at it

Here’s a nice list of five popular CSS frameworks and also what you need to get started using them. A Quote from the article:

Main features of good CSS Framework is to 1) rapidly speed up our development time, 2) should have a very small size, 3) have good documentation and tutorials and 4) have clean grid structure. You will need a basic understanding of the CSS framework you are going to use to understand why and how things get solved.

Apperance is everything. That’s pretty much what goes around. Great SEO, cache and performance does often fall in the shadow of apperance, but that doens’t need to mean that pages that have great SEO, cache and performance have to look ugly. One trick to make a website look nice and trendy is to put your time on making a nice menu, but make sure to have a good fallback because  apperance alone wont take you far.

Anyways, over at devsnippets, you can find ten great technices on how to make your multi-level menus look great using jquery, mootools and some other goodies.