• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

CSS Hacks & Help

Question

LG-2    0

Ok this is a short thread, but I find it important to those who are beginning to code CSS. I am not a professional myself, I know just couple of the basics, and will share them with you guys. Feel free to contribute. :)

First One:

Most develepers now HATE IE for the lack of support of the new technologies. One thing is, sometimes the measurements totally mess up. So how can you fix this?

I have come across couple of useful hacks, one of them is to simply put a " * " behind the rule, like this:

#my_table {
margin:5px; /* FireFox & Others */
* margin: 7px; /* IE */
}

Or

* #my_table {
margin:5px; /* IE */
}

There was another one with an underscore I believe, but I don't know it well, you might want to Google it if you are not satisfied with the " * " results.

Second:

Do you hate the fact that in IE the only thing you can hover is links? Doesn't that suck? Doesn't it suck that you have to use an extra javascript and add it to the top of your pages to just have that cool effect? Well, I can't tell you that you won't need something else external, but this is better I guarantee you.

User Peter Nederlof's hover hack: http://www.xs4all.nl/~peterned/hovercraft.html

Simply upload to your CSS folder this file: http://www.xs4all.nl/~peterned/htc/csshover.htc

Then in your CSS's body add:

body {
		behavior:url("../htc/csshover.htc"); /* You can change the path of course */
	}

Now you have added the :hover pseudo class to IE.

Third:

Oh yea, you created that NICE looking website. Some guy that appears to have a resolution of 99999 x 99999 and cant read your site. He is using Internet Explorer, and then when he tries to resize the text, it does nothing. He'll be mad and probabbly never visit again... What causes this? Mostly is the measurement units you select. Many times that px(pixels) option might look nice, because you control how you want it to look, but users don't really care how you want it to look. Is not what you want, is what the customer likes. :shiftyninja: . So, change the measurement units. Use em's instead, those are resizeable by IE. Em's are measurements derived by the width of characters in a font, meaning, they vary in size depending on which it is or in some cases where they are.

Example of a good em measurement of the nice Arial sans-serif font you guys seem to love is font-size:0.8em; . It gives you the size close to 12px which seems like a default.

You can also use em's for objects, but like I said, size varies.

Now some tips:

1. Always select your widths, padding & margins even if what you create looks how you wanted it in your favorite browser. - I have seen in IE that I ignore the padding, and it looks good on IE, but then when I go to FireFox, it has a big gap...

2. Is good to width by percent and ems. - I once put everything by pixels, and when I resized, lot of things overlapped each other. You wan't to make your website as flexible as possible.

3. Position your stuff even if it meets your needs without it. - Again, I have had ocasions were I don't position my objects, and then they end up in the wrong position.

4. Don't waste $35 dollars on a CSS book. - I did. It has many resources and tips, but with good Google searching skills, you can learn a lot more.

5. Have fun doing what you do. - Don't be frustrated if your website is looking too boring. Treat it like a sandbox, you can always spice it up later if it has the right base.

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.