Archive for the ‘Random tips’ Category

It’s important that you know exactly what HTTP traffic is triggered when you access a web page. HttpWatch is a plug-in HTTP viewer and debugger that integrates with Internet Explorer and Firefox to provide seamless HTTP and HTTPS monitoring without leaving the browser window. HttpWatch automatically displays the decrypted form of the network traffic and allows you to quickly see the values of headers, cookies, query strings and POST data. (http://www.httpwatch.com/download/)

Without doubt Web Developer is the most useful Add-ons for Firefox I have ever used. The extension adds a menu and a toolbar with various web developer tools.
(https://addons.mozilla.org/en-US/firefox/addon/60).

Firebug allows you to edit, debug, and monitor CSS, HTML, and JavaScript live within the browser environment. (https://addons.mozilla.org/en-US/firefox/addon/1843).

ColorZilla lets you get the RGB colours of any element on a page by using a drop tool similar to Photoshop. It saves you time by reading site colours in your browser.
(https://addons.mozilla.org/en-US/firefox/addon/271).

LoremIpsum Content Generator is a handy text generator that helps to create dummy text for all your layout needs. (https://addons.mozilla.org/en-US/firefox/addon/198).

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. (https://addons.mozilla.org/en-US/firefox/addon/5392).

Did you find that Internet Explorer 6 displays a solid black border when you use border-color: transparent. Fortunately, it works fine with other browsers. This can easily be fixed even if you're a beginner when it comes to IE6 hacks.

.classname /* e.g. Internet Explorer 7, FireFox, Opera and Safari */
{
border: solid 5px transparent;
}

Consider the following extra lines of CSS code and problem solved!

*html .classname /* IE6 fix */
{
border-color: pink;
filter: chroma(color=pink);
}

PNG popularity has mostly been held back by Internet Explore’s lack of support for Alpha Transparency in IE6 and below. With IE7, PNG support isn’t perfect but it’s suitable for most cases. With little search you will find various examples with complex CSS, scripts, Microsoft filter to force transparency, but would that help you if you don’t have the time for all that fuss!

The closest and easy way to solve this problem when working with small icons (16×16) is Fireworks Animated Gif. Open your PNG image in Fireworks and export it as an Animated Gif with Alpha Transparency and that nasty solid grey background in IE6 will disappear!

You can also use a filter which overrides the CSS:
* html #image-style {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);}