ie6 double float margin bug

Webdevelopers gets irritated when they give a margin value to a block, suddenly only in ie6 they can see the value gets doubled. For example: if you give margin-left:10px, ie6 will take the value as 20px. Thank god they have fix this issue in ie7. This is because, when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any other left-margined floats that are displayed in the same row won't show the doubled margin.

The simple way to handle this issue is to put display inline fix. By placing this will not affect any other browsers.

For Example:
.fltt{
float:left;
width:300px;
margin:5px 5px 0px 10px;
display:inline;
}

Read more...

Html Css tools for web developers

Tools made life easier. A web developer, for example who can develop a page with in two hours approx, he can be done with in an hour with the help of developer tool. He can find the errors so easily with these kinds of tools. Leading browser such as ie, firefox, chrome are giving the tool as an addon along with the web browsers. Its must for the web developers to use these tools, coz in interviews this topic is given as the most preference.

IE:
IE developer tool
Using ie developer tool, developer can edit the css part and you cannot edit the html part. You can download this tool from microsoft site for free. A brief discussion about how to use this tool will be briefed later.

IE Watch
Using ie watch, you can edit html as well css just like firebug. You can download this tool from microsoft site for 30days trail version. A brief discussion about how to use this tool will be briefed later.

Firefox:
Webdeveloper tool:
Web developer tool has got many option to do for web devlopers. You can edit html, css, disable javascripts, cookies, css, images... Provide information on anchore, block size, table depth, title attribute and many more. It also gives an outline for tables, links, headings, meta tags etc. This is a very useful for beginners.

Firebug:
If you any web developer to vote for firebug, every developer including myself will vote 100/100 marks for firebug. Firebug is an addon comes along with firefox. You can download this from Addons for Firefox website. Most of them feel very comfort in editing the html and css using firebug. You can also edit the javascripts using this. You can have a look at the dom events. They have introduced plugin called coder, where you have to install it separately along with firefug. With coder you can find the functions and the code used in javascripts.

YSlow
Yahoo's Yslow is a pluggin comes along with firebug, have to be downloaded separately and installed with firebug. This is used for site optimization. To check for your site download spead, image optimization, response time taken etc...

Page Speed
Just like Yahoos yslow, page speed. This is used for site optimization. To check for your site download spead, image optimization, response time taken etc...

Google Chrome
Goolge chrome also have given a pre-installed plugin where you can inspect for html and css to edit.

All the tool which i have mentioned above will be given a brief details about how to use in up coming post.

Read more...

Google’s success is the site’s speed

One of the most fundamental reasons for Google’s success is the site’s speed — search queries typically take a fraction of a second, and most of the company’s other services are usually very snappy as well (save for Gmail, which occasionally bogs down). Part of this speed can be attributed to the company’s obsession with minimalist design and its vast server farms, but you can be sure there’s no shortage of optimization that’s going on to make sure pages load as quickly as possible on the front end, too.

To help streamline its sites, Google has been using an internal tool called Page Speed, and starting today it’s opening up the tool to the developer community. The newly open-sourced tool is a Firefox plugin that integrates with Firebug, making suggestions on how to speed up your site based on best practices.

From the Google blog post:

For example, Page Speed automatically optimizes images for you, giving you a compressed image that you can use immediately on your web site. It also identifies issues such as JavaScript and CSS loaded by your page that wasn’t actually used to display the page, which can help reduce time your users spend waiting for the page to download and display.

If this sounds familiar, it’s because Yahoo offers a similar tool for Firefox called YSlow, which is also meant to help developers streamline their websites.

Read more...