Trying to test my theme on IE8 locally gives a bad result. But on the testing server it looks much better (not yet the same as FF or Chrome).
What do i need to do so my local IE8 behaves the same as IE8 on the server??
I am trying to get the full-screen background in IE8 to work with transparent div's
Bit clueless here.
regards
oh i use xampp for windows
Without a link or code, all I can say is be sure your code is W3C valid. Missing and out of place tags are leading causes of bad IE display in Wordpress. Use the W3C Validator either live at http://validator.w3.org/ or as a local standalone http://habilis.net/validator-sac/
Related
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
Ive seen a lot of talk about box-shadow in IE9 - but when i try it out it does not work! (of course im not suprised ... sigh). Am i mistaken that these thing are supposed to work in ie9 or is mys css wrong or is there a mode in ie9? Heres the CSS code im using:
.jW{position:absolute;border-radius:8px;box-shadow:4px 4px 24px 4px #000000}
Same goes for border-radius. Ive even opened up CSS3 sites that have these attributes like http://css3please.com/ and they dont work in IE9 either. Actually: bugger IE!
OK - found the problem. Firstly thanks to sandeep for refering me to part of the problem. IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables - use cellspacing=0 then it works - still: bugger IE
It should work (as far as I know - will run some simulations later). In the meantime your can check out CSS3 PIE (http://css3pie.com) that enhances IE rendering of CSS3 properties (not really IE's rendering, but close enough).
According to CanIUse.com, IE9 does support box-shadow and border-radius.
I haven't tried it with box-shadow, but I can definitely vouch for it working with border-radius
The most likely reason for it not working is that you're actually running in IE8 compatibility mode (or even IE7 compat). This will make IE9 drop all the new features and pretend to be the older version.
The quickest way to check if this is the problem is to hit F12 to open the IE developer tools window. This will show the rendering mode in the top right hand corner.
If it is rendering in compatibility mode, then you can change it here. You can also add a meta tag to the top of your code to force your site to use the latest IE mode. If it's happening for every site then you may need to change your browser settings.
Hope that helps.
Ooops - im sorry but i wasnt entirely correct in my testing - it seems that doctype is essential for these things to work. But then everything else breaks down. I think next time ill write for IE first then the others - hey mabe thats microsofts strategy all along!
I also was experiencing the problem where the box shadow was not being displayed in IE9. In my case, IE9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
The reason box shadow does not work is that IE automatically runs in quirks mode which does not support this.
If you set internet explorer to run in standards mode it will display box-shadow correctly
you can force ie to run in standards mode by following this post: How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?
If you can't edit http headers then use: <meta http-equiv="X-UA-Compatible" content="IE=edge">
(or <meta http-equiv="X-UA-Compatible" content="IE=edge" /> if you're using XHTML)
It should work fine if you do this
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