First time I am using this, to rotate a text in IE
on other browsers like safari,chromo,firefox,opera the rotated text looks fine and mouseover on text looks ok.
Only for IE, the rotated text looks pixelate.... its blurry and when mouseover (change color) it looks hideous as out of focus...
Can anyone help me how to fix this and make things all sharp and goodlooking again?
Does it have something to do with the auto expand (sizingmethod?) are there other methods?
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
You're up against a browser limitation. In general, I think IE actually does a better job rendering fonts...at default sizes they look really good. But when you start messing with sizing, offset, etc....especially with older versions of IE.....it's not going to look great.
What are your solutions? For some elements you might be able to Langridge-Leahy but that's not at all practical many things. Trying different fonts might give you a slight improvement, but likely won't ever be the perfect answer. You could work with the designer to cut back on angled elements for only essential elements. Many developers I know just throw up their hands and deal because it's Microsoft. It certainly ain't fun...
You --could-- always have some fun with your users like this: http://ie6update.com/
Related
I'm developing a 'one page' website for a customer.
The website displays as I want it in most browsers however I'm experiencing problems in a specific combination of Internet Explorer 8 installed on Windows XP.
Because of a combination of requirements from the customer and the design of the graphical designer different elements are placed on top of eachother and need to fade in or out based on navigation.
All works fine in browsers like IE9&10 (Including IE8 document property in developer tools), Chrome and also IE8 on Win2K8 server.
However in IE8 it seems like the transparency of invisible elements is inherited by 'would be' visible siblings at the same position.
I've searched for different solutions and have tried different things like:
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-filter: alpha(opacity=0);
also with an additional but mostly unneccesary:
display: block;
or
zoom: 1;
But none of the above does the trick.
Has anyone experienced, or solved, this problem before.
Or is fading multiple elements at the same position in IE8 just not the right way to go.
See this fiddle for my intended functionality:
http://jsfiddle.net/6HZGw/11/
PS. I tried to post an image of what exactly was my problem but since I've just registered this is not possible as a spam prevention measure.
So here is the link to the problem:
http://img338.imageshack.us/img338/4458/ie8f.png
And the link to the expected view:
http://img255.imageshack.us/img255/8391/chromeothers.png
IE8's opacity filter is really awful. It kinda works some of the time, but it's riddled with bugs and gotchas. jQuery makes it slightly less painful, but even then it's easy to get caught out by one of the quirks.
I don't have IE8 or XP available to test it on right now, but I have been down this path myself and suffered similar results, particularly when dealing with multiple elements, and even more particularly when those elements are a mix of text and graphics.
As I say, I can't try it out for myself right now, but my guess is that you've hit one of those problems that just can't be resolved. So I would suggest looking for alternative solutions.
In our case, after a lot of work, we ended up completely abandoning the idea of fading the elements in and out because of this, and switched to a tactic of sliding them out from behind other elements. The effect was similar enough that the customer was happy, and it worked in all browsers.
I have an idea in my mind for a simple technical demo. It will have a good amount, maybe up to 100, different text labels with varying rotations and Z-orders. Also, there will be constant animation so the size, rotation and position of the labels will change.
This could be done using CSS3 or Canvas as far I can tell. The CSS3 approach should be more accessible but are there any other real differences to consider?
Edit: I also need be able to place labels quite accurately with their centre point.
Either should be fine. I'd start with making a CSS3 one and then make a Canvas one only if somehow unsatisfied. Some considerations:
As of today text in the DOM looks a lot better than text on Canvas for a lot of browsers. Some browsers don't do subpixel rendering on Canvas text (While others do) making it something written in the same font in the DOM and in canvas look very different. For visual consistency, CSS3 is better right now.
Ask yourself what you might want to do with this later, if anything. Turn it highly interactive? Increase the number of objects above 10,000? Then you'll want to do Canvas, in short because 10,000 DOM objects is a "bad thing".
I'm not sure which one would be faster with merely 100 text labels. It shouldn't be hard to write up a quick test on your target platforms to see.
The CSS one will probably be much faster to make.
Canvas text gradients don't work on all mobile devices last I checked
Canvas text rotation + scaling used to look AWFUL in Chrome and Opera. Chrome has it fixed since version 12, Opera still looks awful. You can check your target browsers here: http://simonsarris.com/misc/scaleText.html Opera sort of looks like this.
while css3 would be the nicest solution, you should at least consider svg too.
see a live example : http://jsfiddle.net/gion_13/DhqEN/show/
p.s. : a big minus for canvas, because it does not have text selection
I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here.
So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when you apply styles that way, the resulting button looks like a blocky table cell, nothing like the nice, glassy-looking button that IE8 renders by default.
Is there some way to add a tint to the nice glass-looking button? I.e., it looks just like it normally does, but with a red outline instead of blue, and a red highlight on mouse-over?
Or is this something I'm going to have to do by hand with images? Again, IE8-specific methods are perfectly acceptable.
Thanks!
-dan
There isn't really a filter that will get you as close to the default in IE, though you can get pretty close using the button tag and standard css. It will not look the same in all versions of IE though.
Here's the filter reference though if you want to try other things.
Regardless of browser, one of the quickest, easiest, most widely tested methods for styling buttons via markup is Jquery UI's button It's a matter of adding a few tags to the class element, and you've got a button based on an link, button, or input field. For styling, you can handle styling via CSS, or via the very well done ThemeRoller option, where you can control everything from text size to background type via a simple gui interface--and you can change on the back end or even the user end on the blink of an eye, even via drop down.
One caveat, since IE is non-standards compliant, rounded buttons fail gracefully to square--with proper styling.
I realize that you have determined that you can use a proprietary solution for IE, and in your case it might be just fine over the long term. But in my experience, that's a really dangerous path to follow. What if the actual long term is longer than your anticipated "long term?" You're specifying that it's acceptable to be proprietary to a browser that's well behind the accepted standards, is already a version behind, and uses unsupported (by universal standards) solutions to solve problems. Conceivably, that version is going to get tougher and tougher to find, and if Microsoft holds true to their patterns, once you install IE9 it will effectively render your computer difficult of downgrading. And, I can't emphasize enough that IE's market share is dropping like a rock, which is scary considering basically 95% of the machines out there have it pre-installed. All it's going to take is one overzealous IT director with "security in mind" to render your programming efforts moot. Sorry for the rant, but IE proprietary code has bit me hard more than a few times...
I'd have to double-check, but you should be able to use a combination of a background color and use a transparent PNG or GIF as the "background image" to add the highlights.
All things being equal, I've rather embraced the flat, square button - finding ways to make it work well with the design - but then again I've always been a straight line, square edge kind of guy. :)
As others have mentioned, you do want to be mindful (within reason) of what you may have to handle. It's quite possible that before the next re-write you're going to have to deal with IE9 - writing code that works well in IE8 and IE9 would be the most prudent approach.
Have a look at http://www.webdesignerwall.com/demo/css-buttons.html and also http://css3pie.com/.
Combining those you can get nice looking buttons in IE as well..
Until now I thought justify meant that the text will start and end at the same pixel, but i was surprised a few hours ago, when I saw this:
I got similar results in 2 computers (win7+chrome, ubuntu+firefox), and not just at this place, there are more similar bugs on the same site.
After my second chec I thought this is general and I just haven't noticed yet, but other sites don't show this strange behaviour. Also refreshing the site and restarting the browser didn't solved it.
Has anybody else noticed this? What causes this?
Actually that could well be intended behaviour. As with kerning it's about the appearance, rather than being pixel perfect. With justification the appearance that's trying to be achieved is of a straight edge on both sides of the text column.
Letting a letterform with an uneven right edge like "k" stick out past the straight edge of a letter like "n" helps to give that appearance visually. This is because of Gestalt psychology, which deals with how we perceive shapes, and you can see it happening at the start of lines as well:
It wouldn't surprise me if Webkit handles the nuances of text reproduction like this better than IE's engine—it's a feature in desktop publishing software like Adobe InDesign.
It should be because of the character width is variable, a pixel is the smallest unit here, and fill the spaces, with, spaces can sometimes compute a float which is rounded.
Anyway, you should really not worry about this as the main reason would readability and not a design vagary.
The points previously made about this being a perceptual issue are valid, but also a bit accepting of a best-case scenario where the justification is being done right/well in the first place. It's worth nothing that proper text justification is actually rather hard, and the algorithms used by browsers just aren't that great. This Hacker News thread has a bunch of notes and links that should be of interest.
Here is the url to the site in question: http://www.katiesamsonlaxfest.com/index.html
The site looks fine in all the browsers except IE6 and below. I would like if possible to find an easy css fix because as you can see the content is not contained within the divs.
I recommend the YUI CSS Foundation (Reset, Fonts, Grids). I find far less IE issues when building sites this way and often it requires almost no IE fixes/hacks once built and tested in Firefox.
It may take a little effort to learn, but I consider this to be the easiest fix because it almost eliminates the need for IE specific CSS and it saves you time in the long-run.
There is no "easy fix". You need to address the problems one at a time.
You can add "IE6"-specific CSS by adding things like:
.box {
margin-left:20px;
_margin-left:15px; /* this is the ie-specific fix */
}
...etc.
Also, transparency doesn't work with 24-bit PNG files. Use 8-bit. They're only titles, you don't need 24-bit anyways (or just use GIF). This is why your titles have strange boxes around them.