Are you a Front-end developer, then there’s a good possibility you already know the following – However, when I look at the web, I see Webdesigners, Developers etc, making alot of basic mistakes when they do they html/css markup – That’s why I’ve created this little lists of basic tips – I hope you can use them – And if you have something to add to the list, please comment

Padding & Width:

In your css, do not use left/right padding with width and not top/bottom padding with height.
Instead, create a div with a class inside your div with width, like this:

Source code

<div id="divWithWidth">
	<div class="DivWithPadding">
		CONTENT HERE
	</div>
</div>

Thereby you can ensure that the <div> behaves correctly in all browsers!!

Some browsers renders differently when rendering the padding included in the height/width property.

Floated elements

All floated elements should have a width, if possible.

Use a reset stylesheet

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

You can find alot of different reset stylesheets on the Web, or you can create your own – A really used reset stylesheet is: YUI2 Reset CSS
However, I would recommend that you build your own, that matches your general needs.

Width

There is no need to set a width on an element that fills the entire width of an div they are in.

Close your tags correctly

If your markup is XHTML, then make sure that you close the <input>, <img> tags correctly – I’ve seen alot of websites that run XHTML Transitional, where input and img tags are written like this:

Source code

<input type="text" name="text" value="myvalue"></input>
 
<img src="TheURLofIMG" alt="My img" title="My img"></img>

This is NOT correct!- Close your tags correctly like this:

Source code

<input type="text" name="tet" value="myvalue" />
 
<img src="TheURLofIMG" alt="My img" title="My img" />

Image and Links

• <img> tags should contain the image width and height, for SEO reasons
• <img> used in links must have an appropriate title and alt text, again for SEO reasons.
• links must have an appropriate title text

Make sure you make websites degrade gracefully.

Perfect example is using JS for certain portions of a website. Code it, then turn off JS and make sure it’s still functional.

Browsers

Make sure that your HTML/CSS validates according to W3C standard.

Check your website in all common browsers like IE, Firefox, Chrome, Safari, Opera

If your website for some reason doesn’t look as it should in IE, then use a IE stylesheet.

The markup for this is:

Source code

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="/Files/design/css/ieall.css" />
<![endif]-->
 
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="/Files/design/css/ie6.css?gfdjh" />
<![endif]-->
 
<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="/Files/design/css/ie7.css" />
<![endif]-->
 
<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="/Files/design/css/ie8.css" />
<![endif]-->

Always check on a MAC, both IE and Safari, and doing it at an early stage, That makes it easyier to fix mistakes!

That’s all for me this time…

I hope you can use these tips