ie6 padding bug

IE6 calculate double padding with same float in container.
For Ex.

If we have a div with class name "main" with float left.
div.main{
 float : left;
padding-left : 20px;
}

in ie6 it always calculate 40 left padding . so be careful with padding in ie6.

Thank You

IE6 css tips and css problem

Trying to get CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers. All is not lost, however, as many of the differences you see across browsers are caused by the same Internet Explorer CSS issues.


If You want to define some property for same class or id for different browsers

1.)  For IE6 write :-    * html id/class name

         .wrapper{    /// run for all browser
                          width : 500px;
}
ex:    * html .wrapper{  //   this code run for only ie6 for wrapper class
                                  width: 200px;
                                  }

form this tips we can  adjust all property . so enjoy and best of luck

CSS Layouts

Abstract

The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations.

 

Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Months in the making, the final design successfully duplicates WebRef's layout without the use of tables. Numerous bugs were discovered in Netscape and Internet Explorer in how they handle CSS, and we found some elegant workarounds to these and other problems. What follows is a step by step CSS layout tutorial that shows how we got to the final design.

 

Introduction

 

In "Evolution of a Home Page" Andy King threw down the gauntlet, challenging readers to duplicate WebRef's tabled (and fabled) home page in CSS. Kwon Ekstrom came up with a solution, that worked in a number of browsers. After investigating his solution, I found a few problems with his design, and thought I'd try and improve on it. Andy, Kwon, and I went back and forth over a number of months tweaking and improving my design. What follows is a step-by-step account of my attempt to duplicate WebRef's table-like layout using CSS, while avoiding some of the bugs and problems found in other implementations.

  

The ultimate goal is to create a CSS layout that exactly resembles the WebReference.com layout made with tables and also behaves well with small window sizes and large fonts.

 

The target browsers are all the generation five and greater browsers, for both Windows and Macintosh platforms. We are also looking to use the same style rules for all of these browsers. This constraint makes the task more difficult and the final code larger and more complex than it would be for a browser with good compliance to CSS level 2, like Netscape 6. Thus, we cannot use those features that aren't supported for all browsers and sometimes the necessary workarounds to solve bugs or other problems yield a not so straightforward use of CSS.

 

 The Layout Challenge

 

The WebReference home page circa Spring 2001 has six big blocks that hold and organize the content (using three main tables to lay out the page):

• A top navigation bar with five text links and a search form.
• An advertisement block that holds a banner.
• A left navigation bar that holds the WebReference logo and text links.
• A right navigation bar that holds text links organized as the structure of the site.
• A main content area that holds the most recent articles and resources in the site.
• A colored box inside the main area that holds the "Tip of the day"

 Can this complex layout be replicated using only CSS? Yes indeed! Read on to find out how. Disregarding the top navigation bar, the advertisement block and the "Tip of the day" we have a three column layout. We can ensure that the middle column is going to be the one with more content, and therefore, the height of the document will be dictated by this block, and the three columns should be the same size vertically. Notice that there is a white gap that separates the left column from the main content area and another one that does the same for the right column. These separators have the same width (9 pixels) as the margins around the table to the edge of the browser window.

 

Web Designing Tips

Useful Tips for Effective Web Design

Here are some essential web design tips that every web site should follow. Design your web site by following these tips and I guarantee that visitors will have a great first impression of your site.

Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.

Clear Navigation - Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links. Click here for navigation tips.

All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels. Click here to learn how to design websites for all screen resolutions.

Browser Compatibility - Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.

Readable and professional looking fonts - Don't ask me how many times I've clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don't use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.

Minimize the use of images - I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don't clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye - catching icons that will draw a visitor's attention to a particular section of your site. Tip - Visitors are usually more interested in content than in design.

Use of white space - Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.

Check for broken links - Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.

Vector Resources for Designers

BittBox (http://www.bittbox.com)

Vecteezy (http://www.vecteezy.com/)

Go Medias Arsenal (http://www.gomedia.us/ )

 

Blog.Spoon Graphics (http://www.blog.spoongraphics.co.uk/)

Free Web Recourses….

Tips For Sending Valid E-mails From Websites

E-mails are one of the key elements of a website/web application. They are used in contact forms, sign-ups, notifications, newsletters, etc.

It is a common experience that sometimes e-mails sent from websites go to the junk folders or never reach.

Although it is not always possible to detect the reasons for this, there are several things that we can do to minimize the risk. Here they are:

Send E-mails Through A Valid E-mail Server With Authentication

This is the most important one which you may be automatically offering all the tips below.

It is mostly a good idea to send website e-mails through the e-mail server that will require authentication rather than the web server's SMTP server. Servers that are specifically set to send e-mails generally have Reverse DNS & SPF records, support greylisting ,etc.

Every scripting language offers methods to send e-mails with authentication.

On the other hand, sometimes, using e-mail servers are not enough as you may need to send lots of e-mails but the hosting provider may be applying limits, etc. In such cases, if you'll be sending e-mails through your web server, make sure to check these all:

Reverse DNS (rDNS)

As every domain resolves to an IP address, optionally, IPs can resolve to domain names which is called reverse DNS.

Many spammers use non-existing or dynamic e-mails without reverse DNS records. E-mail servers generally check if the sender IP has a reverse DNS record or not.

How to add reverse DNS records?: reverse resolving uses the pointer DNS record type (PTR record) which you should be asking your hosting provider to create it

SPF Records

Sender Policy Framework is being used by more & more e-mail providers everyday (Gmail, Hotmail & Yahoo uses it) as a criteria to detect if a message is spam or not.

It simply allows the owner of a domain to specify their mail sending policy, (like which mail servers they use to send mail from their domain).

SPF records are DNS TXT records which an online setup wizard can help you creating it (you'll need to create new DNS records).

Using A SMTP Server That Supports Greylisting

A very powerful spam prevention method used by mail servers is called greylisting.

When you send an e-mail, the server receiving it can say to your SMTP server:  "send it to me again in x minutes" which is mostly not supported by the methods spammers use.

So, you need a smart SMTP server who can understand this command (IIS SMTP can not) that will re-send the e-mails when requested.

No Bulk Mailing

Both the SMTP server you'll be sending e-mails & the servers that will receive them generally have rules to define an IP/e-mail as spammer who sends x number of mails in y seconds.

So, if you have a large userbase to send e-mail, it will be a good idea to send them in intervals.
No Sending Of E-mails In Alphabetical Order

Again, if you'll be sending e-mails to a large userbase, don't send them in alphabetical order of e-mails as mail servers can mark them as a dictionary attack.

Check If The Server IP Is Blacklisted

Blacklists are systems, that are used by most of the e-mail service providers, that has bot or human e-mail accounts which analyze the common e-mail traffic & can blacklist IPs according to e-mails sent from them.

The server you're using to send e-mails can be shared by many other users. And, a spam that is sent by anyone on that server can lead to a "blocking" by e-mail blacklists which will damage the communication of every account on it.

How to make the beautiful link?

The most simple way to freshen your design - to change appearance of links.
Changes of styles will borrow all some seconds, but the result for certain is pleasant to visitors of your site. Below I shall result some examples of styles for links.

1. Color, underlining is the most habitual for us a kind of links on the majority of sites. Color allocates the link from the usual text, and the link will let know underlining{emphasis} to users, what is it.

a {color: #0000ff; text-decoration:underline;}

2. Color, without underlining - underlining is not always obligatory, sometimes it is enough to allocate the link with color to not distract attention of the user from reading article, forcing him to pass under links.

a {color:#0000ff; text-decoration:none;}

3. The fat text, underlining - if at you minimal

a {font-weight:bold; text-decoration:underline;}

4. A fine font, underlining - small letters one more good way to allocate your link. And underlining to the user, what is it the link, and uneasy unusually allocated text besides will let know.

a {font-variant:small-caps; text-decoration:underline;}

5. Underlining by strokes - we have got used, that the link is underlined by a continuous line. Underlining by strokes will give to our link unusual style and users

a {border-bottom: #000000 1px dashed; text-decoration:none;}

6. The color background, underlining - Allocation of the link by the text more habitually, than allocation of a background of the link, therefore such effect will by all means draw attention of the user and will noticeably update design. And as

a {background:#a6d4ff; border-bottom:#99c4d5 1px solid; text-decoration:none;}

Effects at prompting on the link as are important, as well as, for example,

Here some advice, what effects is better to apply:

1. Removal/addition of underlining - the most habitual and effective way of the indication of the active link.

2. Change of color - is better to change color for more contrast that the difference in change of color from one on another was appreciable. Also it is possible to change and color of a background.