Archive

Posts Tagged ‘IE’

!u@#!^$ “Invalid character” IE error

January 28, 2009 15 comments

Internet Explorer is probably the worst browser for web development. Or maybe I’m too used to Firefox.
Let me give you just a simple example, that can drive you mad.
Have you ever encountered the below error?

Line: 2
Char: 1
Error: Invalid character
Code: 0
URL: ... 

I did. So I googled a little bit to see what could be the problem and I come over this article. Of course, that wasn’t the problem. Finally, I realized myself: one of the referenced JavaScript files was missing.

I know that this is my mistake, but I’m totally amazed about the usefulness of the IE error messages. It is a missing file, not an invalid character.
Not to mention, that the URL is always the main one, even though the error occurred in one of the referenced JavaScript files and the line reported is not the actual line where the error occurred, but increased by 1. But this is already common knowledge.

That’s one of the reasons I always use Firefox for web development, try to stick to the standards and only in the end, test the solution on Internet Explorer too. And there is no decent JavaScript debugger for IE. And …

I also wrote a small HTML, for you to see what I’m talking about.

Later update: This was tested on IE6. In IE8 works as expected.

Categories: Web Tags: , ,

Fixing IE: CSS fixed position

November 14, 2008 2 comments

I will start a series of articles about how you can fix some IE bugs. We all agree that IE is very buggy, but instead of whining, let’s see what we can do about it. So I will present you the problem, the fix, explain the fix and how you can EASILY INTEGRATE it.

Before, I will explain you a few things that I will use in these fixes. There are few different things in IE when it comes to CSS.

If you prefix a CSS property with _, IE will still recognize it. If you think this can be very useful. You can specify values for CSS properties only for IE. Let’s take an example.

color: green;
_color: red;

The font color will be green in all the browsers, except IE, where it will be red.
Instead of _, you can also use *, + and some other special signs.

The CSS value supports in IE a special value: expression([expr]). The [expr] is a JavaScript expression, which is evaluated and the CSS value is assigned to it. Again an example:

_height: expression((1 + 1) + 'px');

The CSS height in the above example is actually 2 pixels in IE. In the expression we can even use this to refer to the element for which the CSS value is applied.

Now let’s get back to the current issue. If you specify the fixed value for the position property, the element should be absolutely positioned, but relatively to the viewport, instead of the document. For more detailed info, please see the CSS specification. Not surprisingly, this works in most of the browsers, except IE.
And now, the fix. Which is actually very simple. We will use absolute positioning but we will calculate the coordinates dynamically relative to the viewport.
So the CSS code

position: fixed;
top: 10px;
left: 20px;

will have the following IE equivalent

_position: absolute;
_top: expression(((ignoreMe
= document.documentElement.scrollTop
? document.documentElement.scrollTop
: document.body.scrollTop ) + 10) + 'px' );
_left: expression(((ignoreMe
= document.documentElement.scrollLeft
? document.documentElement.scrollLeft
: document.body.scrollLeft ) + 20) + 'px' );

.
Don’t remove the ignoreMe variable as this will force the expression to be evaluated not only the first time the page is loaded, but always.

In the end, a live example. And if you complain that in Mozilla the things are smoother, then simply switch to Mozilla :).

Categories: Web Tags: , , ,

Cross-browser custom CSS cursors

January 8, 2008 102 comments

I saw sometime ago the funny drawing below.
Time breakdown of modern web design

You can see that big portion is for making the design work in Internet Explorer.
First you laugh, but if you developed rich web sites/user interfaces you actually realize that this is only underevaluated. I would also extend it and say “make the design cross-browser”.

The tip that I’ll present you next it’s actually a small workaround and it will help you reduce that big pie slice.

Let’s say that you want to change the cursor for a page, for links or for some other specific elements. How? Using CSS. Then we should first go at W3C and read how to do it.
So the cursor property is the answer.
As good web developers we will separate the CSS from HTML and create the following structure

  /
  +-- cursor.html
  |-- cursor
      +-- cursor.css
      |-- cursor.cur    
  • cursor.html
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="cursor/cursor.css">
      </head>
      <body>
        Hello world!
        Look at me, I have a new cool cursor! 
      </body>
    </html>
    
  • cursor.css
    BODY {
        cursor: url(cursor.cur);
    }
    

Now everything should be set, so let’s give it a spin. Of course, we want everything to be cross-browser. For the sake of testing open cursor.html in Internet Explorer, Firefox and (for those Mac lovers) Safari. Surprise, the cursor is the default one in IE and Mozilla, but it’s the desired one in Safari. Frustrating isn’t it? You write W3C compliant code and it doesn’t work in the first two major browsers. The “best” part is that this is happening for different reasons.

Let’s first take care of Mozilla. Remember from CSS2 specification that cursor property holds a list of possible cursors and the browser should use the first found one or the default one if none is found.
Add to this list default and modify the cursor property from

cursor: url(cursor.cur);

to

cursor: url(cursor.cur),default;

And now refresh the page in Firefox. Even tough it doesn’t make sense at all, it will work and you will see your nice cursor.

And now IE comes next (as it still doesn’t work). As you noticed in cursor.css, we used for the cursor property relative URIs. To quote from there: For CSS style sheets, the base URI is that of the style sheet, not that of the source document. But if you modify the cursor property to

cursor: url(cursor/cursor.cur),default;

this will actually work. This is because in IE, for style sheets, the base URI is that of the source element, not that of the style sheet. Totally opposite to W3C specifications, but, yeah … that’s MSIE.

And if we want to still work in Firefox and Safari we have to keep the property value as below:

cursor: url(cursor.cur),url(cursor/cursor.cur),default;

. So everytime you want to define a crossbrowser CSS cursor you should define it as a list containing the url relative to the source element, the url relative to the style sheet and the default value.

The above examples were tested on IE 6.0.2900.2180, IE 7.0.5730, Firefox 2.0.0.11, Firefox 3.0.1, Safari 3.0.4, all under Windows XP SP2. I also tested in Opera 9.25, but it seems that it doesn’t support custom cursors.

Later edit – Jan 28, 2009:
The above examples were also tested under Firefox 3.0.5, Internet Explorer 8 beta 2 (inside IETester), Internet Explorer 8 RC1 (version 8.0.6001.18372CO), Safari 3.2.1 (525.27.1), Google Chrome 1.0.154.43 under Windows Vista.
I also tested with IE 5.5 (inside IETester), but it doesn’t support custom cursors.
There is also an example.

Later edit – Feb 10th, 2010:
If you want a custom cursor for an image (IMG) or link (A), then you need to attach the CSS to that tag, not to an enclosing container (e.g. DIV).