13

I use the Web Developer Toolbar in FireFox to test CSS-edits. I want to do the same in IE, and I can somewhat do that with IE8's Developer Tool.

However I can't add a style in Developer Tools, only edit existing styles - does any of you guys know of a way to edit the CSS like you can do with Chris Pedericks Web Developer Toolbar?

Improve this question

5 Answers 5

Reset to default
17

You can:

  • add a style attribute (right click the html tag and click add attribute (with the name style, and then edit the style attribute once its added)
  • Click the CSS tab, right click the empty space, and add a rule (this is like adding a line to your css file)
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks. Clearly no IE8 developer actually used these tools when they made them.
What would cause inline CSS to always be crossed-out with a line when adding it to an element in dev tools?
@mmcrae: If there is a css property with the !important value (ex: .classname { color: #FFFFFF !important; } ) it will override the inline style, making it always crossed out in the dev tools.
@GabrielMcAdams that is the only way to override an inline style (use of !important;) - right? I'm having a particularly buggy css issue.
12

Adding to what Gabriel mentioned above.

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.

Improve this answer

Comments

2

I'm on my Mac right now, but I remember running into that.

When looking at the right side of the Developer Tool, you see a list of CSS styles. Above that you see a few 'tabs': Style, Trace Styles, Layout, Attributes. If I remember correctly you can't change them in the style tab. But you can change them in one of the other tabs. You might have to edit them through the style attribute.

Improve this answer

Comments

1

You could try firebug lite but it's a little work to get it setup.

Improve this answer

1 Comment

I've tried setting up Firebug Lite - but it never really worked - seemed buggy :(
0

Follow following steps: 1. Click on Developers Tool 2. In Html select element for which you want to add css 3. Select attribute tab present on right side 4. Add Name and Value. Check your style is applied to html element.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.