Using the IE Developer toolbar

One of the indispensible tools that use for changing the CSS and “fixing” problems on a SharePoint site is the Internet Explorer Developer Toolbar. There a many articles on how to use this tool. I wanted to point out that specifically for SharePoint this is a great tool for determining how and why a style sheet is behaving or misbehaving.

Recently I was asked why the keywords and best bets web part stayed 230px wide when dragged into a different web part zone. I opened the page and started the toolbar. Use the “Select Element by Click” tool and choose the web part. See where the width is set to 230px?

Element Trace Style

Right click the attribute and choose “Trace Style”. The selector “.srch-BestBets” sets the width to 230px.

Selected Style

So you just create an override like:

    width: 100%;
|| CSS || Web Publishing

comments powered by Disqus

Let's Get In Touch!

Ready to start your next project with us? That’s great! Give us a call or send us an email and we will get back to you as soon as possible!