Are there tools other than Firebug Lite that might help one get into Internet Explorer's buggy little mind and find out precisely where and why it's mangling my CSS so badly?
Firebug Lite is a useful tool of course, but it seems to be missing the crucial feature (present in the 'full' Firebug plugin) that allows you to see which parts of which declarations are ignored in favor of other declarations.
For example, using Firefox with Firebug I can see that .foo {color: red} is overridden by .bar {color: blue} later in the stylesheet.
But, Firebug lite only seems to show the final, calculated style -- I can't tell which declarations are being ignored, which are being overridden, which aren't supported at all, and which are just plain buggy.
Is there another tool that might be helpful here?
I am using IE8 Developer Tools (which is included out of the box), it can show style tracing.
IE7 have also Microsoft-supplied add on called IE Dev Toolbar. Have not used this extensively though.
What version of IE are you using?
Yes. In IE8 hit F12. In previous versions, install this.
The developer tools included with IE8 works quite well.
I have found jQuery to be helpful in figuring out what's going on "under the hood" so to speak. For instance, I had a situation recently where I found that I could not trust the Developer Tools that come with IE 8 (which, by the way, I was running in IE 7, standards not quirks, compatibility mode. Some CSS properties declared in the stylesheet were not being shown as computed, in addition to other IE-strangess I was experiencing. So, I just threw some javascript on the page, including jQuery, which would allow me to type up some code and have it evaluated without relying on IE Developer Tools, Firebug or the Web Inspector in Safari. You can evaluate statements like:
$('body').css('background-image');
which might return:
'/images/default_background.png'
or whatever.
YMMV, but it's worth the time to try it.
I don't know if it has the ability to check specific css overriding, but I'd start out the Internet Explorer Developer toolbar
Another one is the Debug Bar. Works in IE 7 or 8; and is similiar to Firebug
You can use my new tool to view the layout of any element you can mouse over.
HTML Box Visualizer - GitHub
Related
I have a website that I've developed and tested using Firefox 9 exclusively. I'm pretty happy with the layout/styles when viewed in this version of Firefox. I'm now facing the unenviable task of making it display equally well (or as close as possible) in IE7+ (I'm not supporting IE6). Naturally, I'd also like it to display well in Chrome & Safari, but I think they implement the standards reasonably well, so I'm not so worried about them.
I'm using JQuery for JavaScript, which hopefully means I don't have too many differences in JavaScript behaviour, so my chief concern is the CSS. I imagine many others have been down this path, so I'm hoping there's a stylesheet available which when (conditionally) included will fix most common CSS problems seen when viewing a website in IE that has only been tested with Firefox. Does such a thing exist?
A catch-all miracle.css file which cures all IE-related ills? If only! The solution will probably boil down to a selection of some or all of the following:
Normalize (http://necolas.github.com/normalize.css/)
Brings most browser default settings to a more consistent baseline (think of this as an alternative to the popular Eric Meyer reset.css)
Modernizr (http://www.modernizr.com)
Seeing as you're already using javascript, including modernizr will give you additional methods of detecting browser capabilities. Also auto-injects .ie7 / .ie8 etc classes into your markup where necessary, allowing you to target IE in your styling, e.g.
.standard { ... }
.ie7 .standard, .ie8 .standard { ... }
CSS3PIE (http://www.css3pie.com/)
Progressive Internet Explorer - allows for styling which typically fails on IE (e.g. linear gradients, radiused corners, etc.)
IE7.JS (http://code.google.com/p/ie7-js/)
Probably the closest to what you were after, as an alternative to CSS fixes (which no doubt will still be necessary). Should help get you closer to the desired end result though.
I don't think there is any sort of stylesheet that does this for you.
You may look into a js script that look at solving IE issues. Or You can always do it the old fashion way using IETab and targeting the areas where you know there is going to be issues.
Most of them are described here: http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/.
Hope it helps :)
So I do quite a lot of CSS development, and I work with Firefox / Firebug A LOT. I generally know how to debug for IE6/IE7 (as far as techniques) and if I have the source, I can easily just edit the actual files and run a local server on a linux machine and test it in IE, going back and forth until it's fixed.
I find myself lately being asked to debug problems in IE6 when I don't have the source. Is there anyway to emulate a firebug like flow in IE6?
Firebug Lite doesn't allow you to change css values, nor does IETester. It doesn't necessarily have to be an inline tool (maybe there is some utility to quickly download 1 off webpages and their dependencies), but I'm definitely looking for the most productive solution to fixing bugs in IE when I don't have the source readily available to me.
Try the IE Dev Toolbar.
It's not as convenient or user-friendly as Firebug, but it can modify CSS and HTML attributes.
Firebug Lite is the best way to debug html in IE.
Firebug is an extension for Firefox,
but what happens when you need to test
your pages in Internet Explorer,
Opera, and Safari?
The solution is Firebug Lite, a
JavaScript file you can insert into
your pages to simulate some Firebug
features in browsers that are not
named "Firefox".
Firebug Lite creates the variable
"firebug" and doesn't affect or
interfere with HTML elements that
aren't created by itself.
Since you already know about it and it doesn't fit what you need, take a look at DebugBar. There is also a MS solution with Internet Explorer Developer Toolbar.
you have tryed Internet Explorer developer toolbar
Why, the IE developer toolbar of course!
It allows manipulation of HTML and CSS values.
3 solutions which i use always
Use IE 8 with developer toolbar in IE 7 emulation mode to solve problems of IE 7 and for IE 8 use in normal mode
for IE 6 it's best till date for me i use this a lot http://www.paciellogroup.com/blog/?p=7
and this to judge right selectors it's very good http://www.westciv.com/mri/ ( i use this for all browser, because it can tell perfect selector for element )
Firebug lite and IE developer toolbar on IE7 not much useful
I am a CSS newbie. Is there a tool that can help debug CSS styles applied to a web page.
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
By browser:
Firefox there is a plug in module called Firebug. It is easy to install and very powerful. It is even better when combined with 'Web Developer' for Firefox.
Internet Explorer has a Developer Toolbar, which is not as good as Firebug but good enough to check things still work in IE. Additionally there is a tool called IE DOM inspector. There is also a version of Firebug for IE caled Firebug Lite.
Google Chrome comes with built in tools similar to Firebug. See the 'tools->developer' option in the pull down menu to the right of the address bar. This allows you to see the css rules used by each element. It also has Javascript debugging support.
Safari uses a tool called Web Inspector.
Opera has a built-in utility called Dragonfly.
You use Firebug in Firefox, which makes debugging a lot more easy.
And built-in DragonFly in Opera.
You can use the Firebug plugin for Firefox. It is very useful for CSS.
You can dynamically switch on and off styles and fields from styles. It is great.
If you're not using Firefox you can now get Firebug Lite which you can use in IE etc.
Web developer tools like Safari’s Web Inspector or Firebug for Firefox can help you to debug your CSS. Those tools can show you the rule cascade applied to a specific element and allow you to change or disable particular properties.
Use Firefox to develop and test your CSS first, then switch to other browsers to test your code. This is a generally accepted method IMHO.
Firebug is great, but it works even better if you combine it with Web Developer plug in for FF.
There is a great site, worth checking out, with lots of info about CSS and HTML development.
When you need to debug IE - specific problems. I've heard people telling IE DOM inspector is not too bad. You can also try tools described in this post.
Now you can use my newly released tool for this in most modern browsers!
HTML Box Visualizer - GitHub
Recently, I started maintaining a web application which unfortunately works only with IE 6. Most of the issues are related to CSS.
Is there any tool which can help me standardize the CSS classes to work with both IE 6 and IE 7? I understand I have to go through standards but I need something to start with quickly.
Firebug can help me to some extend in identifying the CSS classes related to the UI elements (if the page renders on firefox). But, I was looking for something more like an advisor tool. If you have some experience to share, please feel free.
Try out SuperPreview or the whole package (Expression Web announced at Mix)..
SuperPreview is a new free standalone application from Microsoft (still in beta) which enables you to see how your websites will look across different versions of Internet Explorer making migration from IE6 to 7 and 8 much easier than before, without have to start up a Virtual Machine to run IE6, or have a separate computer dedicated to running IE6.
Check out Dean Edwards' IE7
Tredosoft's Multiple IEs is a good compare/contrast. You go ahead and upgrade to IE7, then install this (selecting just the IE6 option, unless you need all of 5.5/5.0/4.0/etc.), and you can see the pages simultaneously in both browsers. This will help you figure out what has to be conditionalized/hacked.
Also, the IE Developer Toolbar, although not as good as Firebug et. al., will at least let you see in IE what the browser thinks is happening with your styling.
Sometimes you need to introduce a little hack for IE6 and IE7 like removing double margin and I use the following pure CSS code
css-selector { code for all browsers }
*html css-selector {code for IE6 browser }
*+html css-selector {code for IE7 browser }
it is not a tool that you expecting, but may be it would helpfull
I'm using Chris Pederick's Firefox addon "Web Developer 1.1.6". I get this warning when hitting a certain web page on my site:
Unknown property 'MozOpacity'. Declaration dropped.
What does this mean and how can I fix this on my site?
It's customary for browsers to prefix experimental or proprietary features with -moz (for Gecko-based browsers) or -webkit (for webkit) so they can be used but don't interfere with standard CSS rendering. In the case of -moz-opacity, it seems that they have finally removed the proprietary tag since the standard opacity tag is supported.
I don't think any equivalent convention is followed by the IE team, but then again IE is so behind the pack it probably never came up ;)
Are you using mozopacity in your CSS stylesheet? This might be spelled wrong and is thus triggering an error.
You might be looking for -moz-opacity which has been dropped as of Firefox 3.0.
It might not be an issue with your site. Some browser plugins - for instance, Firebug or Web Developer - often add extra styles dynamically to the page for debugging purposes; I've noticed the unofficial -moz-* styles pop up in my own Firefox debugging.
However, this isn't necessarily a problem with your page; it could be a problem that your user agent is first creating itself, and then assuming later that there's a problem with your page.
First, I suggest trying to disable your Firefox plugins and seeing if you still get aforementioned error. Then, make sure your plugins are up-to-date - especially any development/debugging type ones that might be manipulating the DOM after pageload.
there is some proprietary css declaration :
- filter (from microsoft);
- -moz-corner-radius, -moz-opacity and other -moz prefixed from mozilla
- -khtml prefixed from safari
these are NOT standard and it works ONLY in that browser.
If you don't expect -moz properties to work on safari and filter on firefox, you can ignore that warnings :)