Ever done a CSS layout for a website, only to find that everything falls apart when you view it using Internet Explorer (IE)?

Every browser has its issues with CSS. IE is one of the most popular browsers and the most probably the more problematic with web designers. Hence they often use css hacks to work around the problem.

Here’s 3 essential tweaks you should know about IE and how you can tweak your css to make it work.

Tweak no.1 -  The box model tweak

IE reads the CSS box model differently. While modern browsers such as Firefox adopts the W3C box model standards, IE has adopted the traditional CSS box model and hence the difference.

Here’s how this will affect your css codes:

Suppose you have the following:

div {
margin: 4em;
padding: 3em;
border: 1em solid green;
width: 20em
}

IE computes the div’s width based on the margin and width. In this case, the total width will be 28em.

To make the box model work in IE, you need to write two types of css settings in your css file, 1 for IE and 1 for any other browser using css child selectors:

#1: #test {width: 40px;}
#2: html>body #test {width: 30px;}

#1 will be read by older IE browsers, while #2, with the css child selector “>” will be read by newer browsers (Both IE7 and above and non-IE browsers).

Tweak no.2 – The margin tweak

Just as the box model paradox isn’t enough to wreck your nerves, IE also handles margin spacing alittle differently.

If you find your div tags or web elements misaligned in IE, you can try fixing it by using padding instead of using margins.

Tweak no. 3 – Centralizing your layout in IE

If you centralize your layout using commands like margin:auto, you will realized that your design refused to budge in older version of IE (6.0 and below).

Help is on the way with this simple tweak.

Write the text-align:center command under the “body” tag of your css like this:

body {

text-align:center

}

There’s plenty of CSS hacks out there to tackle these and other CSS issues. Just always make sure the hacks you used are valid on the older and current browsers as well.

Do spread the tweak around and leave a tweak in the comments to share with everyone!

Related posts:

1. Typography Part 2 – Font art and text tweaks using CSS and Photoshop

Ever wanted to build a website, or a blog design from scratch? Other than your trusty photoshop and HTML skills, you will also need to know Cascading Style Sheets (CSS) in your line of skills.

CSS is not that hard to pick up, here’s how you can learn the essentials fast with these links.

1. Setting up

Choosing a text editor

For the purpose of fully appreciating the concepts of CSS, we will be using a simple text editor such as notepad.

I would recommend downloading notepad++, an enhanced version of notepad which highlights and identifies markup tags such as those in HTML and CSS

You can download notepad++ here. (Choose the installer.exe version if you are using Windows).

• Notepad++ download
  

Choosing a browser

Many modern browsers these days support CSS. I would recommend Mozilla Firefox for the tutorials and links of this entry. They are tested and proven to work on Firefox (by myself).

If you don’t have firefox, you can download it here.

• Firefox download
  

2. Learning the CSS Concept

Now that you’re all setup, let’s begin by understanding how website layouts are commonly arranged using CSS.

The awe of CSS is its ability to apply a “style” or setting to multiple web pages. Thus, you need to know how to configure CSS handles HTML elements and groups those using classes and ids to apply to many many web pages.

Web designers also use CSS to arrange web elements using a box model. Simply put, it is just visualizing your layout in rectangular blocks to arrange your web elements.

For example like in the picture, you can create DIV blocks for the following web elements:

1. “header” DIV which is the rectangular block to house your logo
   
2. a navigation DIV block for your navigation bar
   
3. a content div block for your content and picture
   
4. a footer div block for your copyright information and other footer contents.
   

CSS Box Model

I recommend this website to understand these CSS concepts and more:

• CSS Tutorial

If you are lost and do not understand any of these CSS functions and their uses, here’s a link that has the entire list of them and examples:

• w3schools CSS tutorial

3. CSS tutorials to get you going

Now that you have some idea on how CSS works and its common practices, here are tutorials that you can do to apply them – by creating a CSS layout from scratch.

These tutorials features popular layouts used on the Internet. They are easy to follow, with step-by-step instructions and ready-made images for you to use.

• Creating a CSS Layout from scratch
  
• Creating a 3 Column layout using CSS (you might wanna read through the tutorials on float featured on the website before starting this one)
  

Now that you’ve picked up CSS, you can try recreating websites by visualizing them with your new found skill to get the hang of it.Have fun!

No related posts.

Generators for MSN Nickname

Here are some ways you can make your MSN nickname look interesting:

• Upside down
• Reverse (Example: tsakeawt)
• Artistic (Example: (¯`·._.·[TWEAKAST]·._.·´¯) )
• 1337 translator (Example: +\/\/E@k45+)
• Weird

More at:

• http://www.minderlegaal.nl/
• http://www.isola-atlantide.com/msn/nickname/
• http://www.msnletters.info/
• http://www.sherv.net/weirdmaker.html
• http://www.msnparadiso.com/index5.php?Ve…
• http://www.nuevodisplay.com/conversor.ht…
• http://www.messletters.com/
• http://www.armatudisplay.com
• http://www.fanzer-chk.com/conversor_nick…
• http://www.weirdmaker.webb.se/
• http://www.eslamoda.com/
• http://emotik.com/index.php?msn=nicks
• http://www.msnweirdmakers.com/
• http://www.revfad.com/flip.html
• http://www.messengerfreak.com/text_maker…
• http://msn.omduena.com/ascii_arts01.html
• http://msnnames.msnman.com/ascii.msn.nam…
• http://www.zptweb.net/Generador-nicks-AS…

Symbols for MSN Nickname

Here are some symbols for you to insert into your MSN nickname:

More at:

• http://www.sherv.net/symbols.html
• http://almaweb.es/tutos/gruposmsn/nicks.html

Conclusion

This post is just some tweaks to your MSN nickname. If these weaks don’t fancy you, then you can download Messenger Plus Live! & Nudge script and try to nudge your friends continuously.

Last but not least if you have any more interesting MSN nicknames to share, feel free to post them as comments below.

Related posts:

1. Make yourself disappear in MSN

So I have included below some tips on searching with Google. Hope they will proved handy in your quest for information!

3 Basic Search tips:

1. Provide appropriate keywords
Google fundamentally matches results based on your keywords provided. And now with stemming technology, Google attempts to produce results based on keywords having similar meanings to the one provided.

You can afford to be general in your keywords here, but do supply appropriate and meaningful keywords.

For e.g. if you’re searching for baseball team caps online, it would be better to supply keywords such as “baseball team caps” than “baseball caps” or “nice baseball caps”.

2. Use wildcards
You can use * in your search phrase if you have forgotten some of the words. As long as you still have the contents of your search phrase intact, Google will attempt to fill in the blanks for you.

3.Quotes
You can ask Google to search for a particular phrase by ending “” at the beginning and the end of your phrase (for e.g. “This is a phrase”). Google then displays results which contains the phrase.

Now, keeping the 3 basic search tips in mind, below are some of other cool things that you can do Google!

4.A Calculator
Just enter any numerical calculations in the search field, and search it. Google will interpret and calculates the answer as your first result. (Displayed together with the calculator icon).

It also does your unit conversions ranging from pounds to kg, miles to kilometers.

This calculator is so powerful, it even knows “the answer to life, the universe and everything” try it!

5. Isolate site/domain types with site:
With the site: command, you can specify Google to search within a particular domain type or within a web page.

For e.g. lions site: edu specifies Google to search on “lions” within websites with addresses containing “edu”.

for e.g. guitars site:www.guitars.com specifies Google to search only within the website: www.guitars.com for the search phrase, “guitars”.

6. Search linked pages with link:
link: allows you to search for pages which have links to the website specified in the search field. Bloggers and fellow SEO users might be interested to play around with this feature.

for e.g. link:tweakast.com searches for pages which have links to our blog.

7.Specify and search within a number range:
You can specify and search within a number range in Google such as the following search phrase:

Olympics 1996..2004

The above will return anything related to the Olympics within the year 1996 to 2004.

8.Search for music and movie reviews with movie: and music:
Google returns movie reviews and music reviews when you use movie: and music: within your search text respectively.

9. Use Google as a dictionary using define:
This is my favourite feature in Google! It functions as a dictionary checking up the meaning of the words entered into the search field. It also can explain definitions of acronyms too.

10. Filter specific file types with filetype:
This feature is also very useful for academic projects and researches. By specifying for e.g. “hand injuries filetype:pdf”, Google will only return pdf files with hand injuries contents.

Hope these tips help you in your daily surfing! Feel free to share other tips you might know, in the comments section. Google on!

Related posts:

1. My SEO Skill. My SEO Grave Mistakes!

25 Websites that showcase nice designs and tickle your inspirations

1. Netdiver

My all-time favourite website. Netdiver contains all the finest websites that you probably have never seen them before.

2. Design is kinky

Design is kinky? Yes it is when it’s designed with heart and soul. Do check out how kinky they are now.

3. Artzmania

Nothing beats anything that is for free. Artzmania offers good content on design. It’s worth investing your time on it.

4. CSS Zen Garden

Good CSS resource website that features the entire nice CSS-designed website, be it a novice or an expert. CSS Zen Garden is definitely a beautiful garden for those CSS lovers.

5. Adobe Kuler

If you are something like me, who doesn’t have any color sense. Try adobe kuler community if you need some help on choosing right combination of colors.

6. Colourlovers

Same as above, a community that brings colours to your life.

7. Deviantart

Deviantart may be the largest art community on the internet (as far as I know). Be it a bad art or a good art, you are free to post your arts and prepare to receive comments on deviantart. But one thing for sure, most of the arts are nicely beautifully created. Take a peek.

8. Smashing Magazine

Smashing Magazine is one of my favourite sites for its in-depth information, which sometimes can make you envy and jealous.

9. DigitalThread

Featuring the entire nice designed website.

10. The best designs

The best designs website shows you all websites, with tags, that you will be expecting from them.

11. FWA

The Favourite Website Awards go to all websites that are featured on FWA. Kudos to them. If you are looking for tons of flash goodness, you are at the right place. Dive in now.

12. Best Web Gallery

Not many websites are listed on the site but the websites that are showcased on the Best Web Gallery deserve to be mentioned. Worth a look.

13. Fcukstar

Fcukstar is back again with more updates on nice flashy sites. These websites are the top notch.

14. Strangefruits

Strange fruits? I don’t really know what it means, but I’m certain that you will see some strange websites.

15. Mowsnet Web Awards

Awards are given to websites in term of gold, silver and bronze. I’m not sure about their criteria but it’s worth a look.

16. Website Design Awards

Another Design Awards website

17. Pingmag

Pingmag is a Tokyo Based magazine featuring illustration arts to fashion design.

18. Threadless

Want to have your design on the shirt? Yes you can with Threadless, Threadless offers user to submit their work and vote the works. It’s really more than just a shirt.

19. Before and After Magazine

Before and After Magazine offers tutorials on how to make your design rock. There are couples of free ebooks for downloading, or rather if you have money, you can subscribe their magazine.

20. IconBuffet

Collection of beautiful icons that are available on the web, but not at the cost of nothing. Nevertheless, what we need to see is the beauty of these icons.

21. Logopond

Lazy to think of a web 2.0 logo design? Logopond has an answer for you, it has nice collection of logos for you to inspire and refer.

22. Walk around your neighbourhood

Take a slow stroll with your dog in the evening. Sometimes, while walking, you may find interesting idea along the way.

23. View movies and Posters

I believe everyone has seen a movie and poster, you should take note on why the poster/movie is designed in this manner, how the typeface is used if you need some inspirations. Besides analyzing these, do remember to enjoy the show too!

24. Hit the bookstores/libraries

I always love to go to the bookstore/library whenever I’m free to look at books on designing. The amount of books that are found in a bookstore/library can be a reward for designer; this is what I called instant result to inspiration. You don’t have to search high and low for inspirations on the net. With just a glance across the books, you should be able to tell what the books that you are looking for.

25. Photography

Take as many photos as possible on interesting objects with your trusty camera. You would be shocked to see some of your shots which can be used for your design.

As for now, feed yourself with those creative and nice designed website. Hope that this list will prove useful to you when you need inspirations for design.

No related posts.

Firstly, you may want to try checking out on how fast you can type at Joshua Rennert’s typing speed measurement page, and get a sense of your current skill level. If you achieve a “wow”, you probably are a fast typist. My highest record is 89 wpm (which is below average in my opinion).

How I achieve 89 words per minute?

1. Learn the proper and fastest technique of typing
Touch typing is definitely faster than hunt and peck. Learn that.

• Why learn to touch type? When you can do it well, touch typing is the fastest way to write. Many people can soon learn to touch type faster than they can write with a pen. [BBC – Dancing Mat typing]
• Fingerwork offers some useful tips on how to achieve touch typing in the shortet time possible. [Fingerwork – touch typing tips]
• Online Java tutorials on learning how to type [Nimblefinger]

2. Practice, and practice, and more practice
Grab your favourite book and start typing from first to last page. Sooner or later, your typing speed will be faster without you noticing.

3. Play some typing games/software
Have fun typing with games/software, if you are bored.

Games:

• Jonathan Miles: Fingerjig Typing Game
• 2addicted letters
• 2addicted words
  
• Typer Shark
• Addicting Games – Typefast
• The Typing of the Dead (Commercial)

Software:

• 10 Finger BreakOut – Free Typing Game 6.2
• Stamina typing

4. Chat with your friends online
The more you chat with your friends, the faster your typing speed gets.

5. Use your keyboard you feel comfortable with
When you are using your keyboard, be sure to not to strain your wrist while you are typing. It’s important to place your wrist in a comfortable area. I would suggest you to use ergonomic keyboard.

• CNET – Pain-free typing tips

Related posts:

1. How to define your goals

How to define the features?

1. Set your priorities about what will be included. These should be based on your users’ needs and your goals.

2. Make a blue-sky list is to brainstorm ideas on what your site can do, with as many ideas as possible. From the list, you can slowly filter out the ideas and refine them about how the site should be organized, how it might help or entertain users, how it will generate revenue, and how it will be different from competing sites.

3. Identifing core features without which your site couldn’t launch. Before even prioritize your list, you should pull out the “must-have” features, that’s the main attraction of your site.

4. Prioritizing other features you’d like to include.

Related posts:

1. Writing mission statement for your site
2. How to define your goals
3. Blog Explosion. The good and the bad.

The goals themselves will vary, depending on the type of site. But it doesn’t matter what is it, it’s important to define your goals.

By stating your goals, you

• Create attainable measures of success
• Provide an objective framework for making decision
• Help prevent meddling

What kind of goals?
Goals will vary depending on your focus, they can be things like achieving 100 unique visitors per day, earning $1 per day, reducing page loading time or even building your community.

Whatever your goals are, they should be

• Relevant
• Measurable
• Have a deadline
• Realistic

The last point can’t be stressed enough. Website may be powerful but they’re not magic. Don’t expect them to achieve it for you.

Read further
How to achieve your Goals by Problogger

No related posts.

A mission statement…

• Clarifies what you’re creating
• Clarifies your objectives
• Prevents your mission from off-tracking
• Insulates you from the whims of others

Every mission statement should include

• Who the site is for
• What the site does
• How the site differs from its competitors

You need not spend a lot of time on this but mission statement must capture the essence of your site’s purpose and they must be meaningful too.

Related posts:

1. Defining your site’s features in 4 simple steps
2. How to define your goals

1. Reach new customers & markets
With all the latest technologies (Youtube, Google, Myspace and etc), they can help you find (and keep) new customers, regardless of location or lifestyle.

2. Convert people with passing interest into customers
After seeing your ad, hearing your name or passing your store, new customers can visit your site and learn more.

3. Encourage repeat business
Using email, newsletter and your website, you can keep existing customers, readers or fans informed about the latest news.

4. Reduce bad leads
By Clarifying who you are, what you do and what you don’t do too!

5. Follow up on ads & press coverage
When you appear in any ad or magazine, the web lets reader learn more.

6. Save money on offline marketing
It helps to save money by replacing flyers and mails with website and email.

7. Provide better, faster customer support
Some websites offer live support while others provide information such as company background, location and hour, and product specifications.

8. Save money on phone support
A penny saved is a penny earned. Moreover, you will have more time to focus on other areas.

9. Gauge customer interest
By looking at what your visitors’ surfing habit, you can get a rough sense what they are looking for. This is extremely useful when it comes to planning events, ordering new inventory, or predicting sales

10. Stimulate creativity!
Let your creative mind run wild! That’s how Digg, Wikipedia, MySpace were born.

No related posts.