I have several divs on a webpage that use the IE css filter to create a gradient effect for the background.
The page is viewed primarily in IE6 (I have no other choice unfortunatly) and displays fine on my development machine. I have also tried viewing the page using IETester and the page also displays fine in IE 5.5 to IE 8.
However, when viewing the page on the "live" machine, the gradients don't show up at all. The browser on the "live" machine is IE 6 with sp3. I have checked the div's and they all have "hasLayout" so that isn't the problem.
Are there any settings within IE that would stop filters working or could anybody suggest any other reasons why they would not be showing up. I can't work out why they work in one version of IE 6 but not another.
Unfortunatly I can't link to any examples.
Thanks
The filter features of IE are not built into the browser; they are using external libraries (DLLs). This is what the 'progid' part is all about, and also explains why some of them are so clunky.
If those DLLs are not installed on the client machine, then the filter styles won't work. If it works in some IE6 machines but not others, then this is almost certainly the problem you're encountering.
Theoretically it should be possible for you to fix the problem by installing the missing DLLs.
However, the problem for you is that if the client is anal enough not to have upgraded their browser from IE6 yet, then it's pretty certain that they're not going to want to have you fiddling around on their machines installing unknown (to them) libraries. In any case, you would have to do it for every individual machine.
The bottom line is that realistically this is not going to be an option. Your best bet is to give up trying to make IE6 do fancy stuff, and go back to using background images for your gradients. It's not pleasant to write, but there is a reason why everyone used to do it that way when IE6 was the standard browser.
Related
I am running Thesis 1.8.5 on Wordpress and here is my site www.texashomeloanpro.com . Because I am kind of new to this whole web-design thing, it just occurred to me to check my site in both Internet Explorer and Safari browsers. Unfortunately, my site looks horrible in both of these. More specifically, my homepage fonts are showing up too large, my homepage sidebars aren't positions correctly, and some of my rounded edges aren't showing up.
I know this is quite a laundry-list of CSS issues but if someone could just give me some general direction I would really appreciate it.
Not sure if you've tried this already, but a CSS reset script usually does the trick for me.
It might break your webpage on the browser you are using, but the goal is to make the webpage look consistent across all browsers.
So, i am making a small portfolio site (http://www.cip.ifi.lmu.de/~fritschd/testDebo/),
where i have a BIG box with a BIG font. On mac, everything is fine, on windows however, depending on the browser it can really suck.
Firefox on windows is one of those.
Is there a way to smooth this big font? What other options do i have? (I don't want to use an image for SEO reasons). Other (system) fonts have the same issue btw.
EDIT:
The example can be found at the linked page. The font has a size of ca. 180px, so it's pretty big.
The browser that seems to have problem is the latest build of firefox on windows. If you look at the div with the name in the page, the borders are pixelated. I read that it is an issue with windows true font option and browsers that don't have own settings (i.e. chrome) regarding that. So what are my options at this point?
It's a very well-known problem of using ClearType fonts on Windows, not bound to any specific web browsers. Read this very clearly explanation font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This problem should not affect Windows 7 and/or IE9 users.
My suggestion is to implement your big block of text using transparent PNG using the -9999px technique that satisfy the SEO requirements. Have a look at this for the original famous -9999px css-image-replacement-technique/ or this for the newly developed technique Replacing-the-9999px-hack-new-image-replacement/
Unfortunately as far as I know there isn't anything you can do in code that can help, but it can be remedied a bit in your own browser by going to about:config then toggling gfx.direct2d.disabled to true. Hopefully that'll help some.
I just wanted to get people's take on using the IE7 compatibility meta tag in IE8 to render pages via IE7 rather than IE8?
This topic doesn't seem to have been mentioned for a while, but with the relatively recent news that Microsoft will be implementing automatic updates for IE, this means that IE7 will be phased out soon.
Is it a really really bad move to use the IE7 compatibility tag in a site NOW? The reason being? rounded corners. I have a site which heavily depends on rounded corners, and so rather than using loads of Png's specific for IE, i would love to implement the DD_roundies technique, which seems to only work effectively in IE7, not IE8. (using parallels anyway, which i don't 100% trust).
What are your thoughts people?
Is it a really really bad move to use the IE7 compatibility tag in a site NOW?
Yes, it means your code is broken. Rather than using compatibility hacks, you should fix your code. It's a bug that it ever worked correctly in the first place.
Also, it's worth noting that the compatibility mode switch is there for the user, not for the programmer. The programmer has control over her code, and she can test and fix it to make sure that it works properly. The user can't do this, so he has to resort to hacks like compatibility mode.
...with the relatively recent news that Microsoft will be implementing automatic updates for IE, this means that IE7 will be phased out soon.
IE 7 has already been phased out. Automatic updates may help prod some users into making the leap, but there's no guarantee that it will make a difference for everyone. If you must target the broadest possible base, you'll still need to support IE 7 for a while longer.
And even if IE 7 does go away, IE 8 isn't going to go away for quite a while longer, considering that IE 9 is not supported on Windows XP. You'll need to make your code work in IE 8 then, so why not do it now?
Using IE7 mode means your code is broken. It will be harder to make it work in standard browsers, and of course as time goes on it will just get worse.
DD_Roundies is unsupported by its author and is considered dead. Leave it that way.
Use a more modern library for rounded corners, like CSS 3 Pie
I'm working on adding basic print functionality to a web map application I recently built, and I can't seem to make the printing work properly when using Internet Explorer 8 in standards mode. I was hoping that someone with more CSS experience might be able to help.
I've created a basic example on jsbin that demonstrates what I'm seeing: http://jsbin.com/osepov/16. This example prints properly in most browsers. In Internet Explorer 8 in standards mode, however, the map's tile images run off of the first page and onto a second page when printing. I've tried a bunch of different CSS combinations, and have browsed the web for hours looking for hacks that might solve the problem. I've obviously had no luck thus far.
Being that the print functionality works well in most browsers, I am willing to compromise on a few things, if needed, to get this working in Internet Explorer 8 standards mode:
The map doesn't have to fill the entire page, minus the header. It can have a fixed height.
The header is nice to have, but I'm willing to do without it.
I know it is possible to build a PDF on the server, but I really want to do this with a simple print stylesheet.
Note: Yes, I do have to support IE 8 standards mode. I had a solution that kicked IE8 users to IE7 mode, but this was not acceptable to my client.
UPDATE 2: I was able to resolve the issue by bumping IE8 down to IE7 standards mode. The map is printing correctly now.
UPDATE: Nope, this didn't solve the problem. I'm still seeing the same issue. This seemed to work, but I'm still seeing the problem.
ORIGINAL POST: I think I figured this out. Basically, it seems like the "top" div was causing the entire page to get bumped down and run over to a second page when printing in Internet Explorer 8 standards mode. I'm not sure why this was just happening in IE8 and not in other browsers, but there are all sorts of strange IE-only bugs that I don't understand.
The final fix:
#wrapper {height:100%;left:0px;position:absolute;top:0px;width:100%;}
#top {height:70px;position:relative;width:100%;}
#main {height:785px;overflow:hidden;position:absolute;top:70px;width:100%;}
So positioning the "top" div relatively and assigning a pixel height and "overflow:hidden" to the "main" div seemed to solve the problem.
This isn't a perfect solution, but it meets my current requirements.
Here's the updated solution: http://jsbin.com/osepov/19.
I created a simple page with a series of divs. In all of the modern browsers, it appears fine, but in Internet Explorer 6, it falls apart. I have no idea what is causing it to happen.
You can view the page here: IE 6 Test Page
If you have IE6 installed, I included the Firebug Lite JS file on the page, so just click the firebug icon in the bottom right corner to inspect an element.
Here's a screenshot using Browserlab to view the page in Firefox and IE6: Comparison Screenshot
The 3rd div named 'content'(With the Manager Email field) moves everything to the right forcing the next div to the next line. Also, none of the row div's reach all the way across as they should(see Comparison Screenshot)
I did some research and have found that there is some problems in IE6 using floats which I use here, but I'm not sure how to fix it.
Why does my page not display correctly in Internet Explorer 6? And better yet, how can I fix it? :)
It looks like the third div isn't clearing the float properly. Perhaps give each of the row divs the style clear: both
Do you really need to support IE6? Even Microsoft is fighting it nowadays and the market share is starting to be irrelevant except for China.
There's a difference between "not working in IE6" and "not looking perfect in IE6".
As has already been said, IE6's market share is low and continuing to fall -- it's below 2% in most of the developed world (see http://gs.statcounter.com/ for country-by-country stats).
Given those stats, I would say that if the page is usable in IE6 then your work is done. IE6 users are by now used to web pages looking bad. Many popular sites don't work at all in their browser, so one with a few layout glitches won't phase them at all. They'll still use the site.
If it is actually broken to the point of not being usable then it's a different story; in that case, you'd need to consider how important those few IE6 users are to you vs the time it'll take to do the work, and fix it accordingly, but that doesn't seen to be case here: the page seems to work. It looks a bit naff, but it works.