up vote 0 down vote favorite
share [g+] share [fb]

I'm using Internet Explorer's Developer tools to try to debug an issue I'm having with a web page.

When I highlight elements the CSS comes up on the right hand side but I don't seem to be able to add new rules or properly edit the existing CSS.

Trying to add a "display:block" property to a class, I tried to edit an existing rule that didn't matter (background-color:transparent) but as soon as I change it the rule disappears!

Am I missing a trick here somewhere?

link|improve this question
85% accept rate
feedback

2 Answers

up vote 2 down vote accepted

For a quick addition to test and see the effect I do it a bit differently.

With the HTML tab selected choose the "Attributes" panel next to Style, Trace Styes and Layout.

Click the "+" button and begin typing the css style you would like to add. The new style attribute is added automatically in the DOM view panel.

Hope this helps.

link|improve this answer
feedback
up vote 0 down vote

Check your CSS is valid or there are not conflicting rules - from what I remember, the last time I used IE Developer Tools, it immediately deletes both invalid tags and unused custom tags in some situations.

Personally I now prefer to use Firebug in Firefox and the Chrome Development tools built in to Chrome - I don't really have a favorite, but I find Firebug better for css/design and Chrome better for cookies/scripts etc.

link|improve this answer
The problem is: if I can't add a new CSS rule, how do I change a rule from say background-color: transparent to display: block without it being invalid along the way? As soon as I type display then IE thinks the rule - display: transparent - is invalid. – DisgruntledGoat May 20 '11 at 12:36
:S Can you delete/disable/do the checkbox on the other first? (sorry forget which option you get) – William Hilsum May 20 '11 at 12:49
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.