<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8211560\x26blogName\x3dTech+Tips,+Tricks+%26+Trivia\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://mvark.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://mvark.blogspot.com/\x26vt\x3d-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
An architect's notes, experiments, discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks


IE8 Developer Tools Tips & Tricks - #4: Edit CSS Visually

Debugging CSS in an inherited web application or trying to adapt CSS from an inspiring design of someone's website is generally not an easy task. One of the interesting features in IE 8 Developer Tools is the facility to edit CSS visually.
  1. After you open the desired web page of which you want to debug CSS, open Developer Tools from the menu or using the keyboard shortcut F12.
  2. Click on the CSS tab.
  3. If you already know the Class and ID information, select it from the treeview of all Class and ID style definitions for the corresponding web page otherwise go to the View menu in Developer Tools and select Class and ID information. On choosing this all the CSS Classes and IDs will be displayed as small labels on the web page that you are debugging CSS for.
  4. You can see how the attributes of a particular style definition operate by un-checking the checkboxes next to each element's style definition & view the changes immediately in real-time by switching to the web page.
Edit CSS Visually

Labels: , ,

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »

Posted by Anonymous Sudipta | 2/04/2009 01:47:00 PM

Informative article. Thanks a lot. It seems that IE8 will be a power packed browser.    



»

Post a Comment