Entries Tagged as 'Browser Compatability'

IE CSS Border Property Issue

Browser Compatability , CSS , Gotchas No Comments »

We had this issue at work last week and only getting round to blogging this now, but it might save some time if you're aware of this glitch with Internet Explorer.

There was a simple form that had an element of type "submit" that also had a background-image specified to give a roll-over effect like so (this was also tested with type="button"):

<input type="submit" id="submit" name="submit" value="Yes" />

The CSS to accomplish this was:

 
input#submit {
        width:235px;
        height:180px;
        border: none;
        text-indent:-9999px;
        background-image:url(submit-button.gif);
        background-position:top right;
}

input#submit:hover {
        background-position:right -212px;
}

OK, so the button worked on everything except for IE. 

The PROBLEM:

The border was still visible but so was the button.  The image wasn't appearing at all.

Apparently Internet Explorer does not render CSS border properties with a value "none" (highlighted above). 

The SOLUTION:

You must specify valid shorthand or individual properties for the CSS rules.  So to overcome this problem, the CSS was changed to the below.

input#submit {
        width:235px;
        height:180px;
        border:0px solid white;
        text-indent:-9999px;
        background-image:url(submit-button.gif);
        background-position:top right;
}

This seems to have solved the problem.

NOTE: This issue was tested with IE 7.

 

Bookmark and Share

Internet Explorer 'Non-disappearing Content' Bug

Browser Compatability , Gotchas , Javascript , Misc No Comments »

I was working on a form that had dynamic elements based on a users selections.

Each form element has a help context icon that provides users with information on what type of information is required for each particular field.

The issue I had was, I found my help icons and also calendar images, for jQuery datepicker elements, jumping all over the form when elements were being toggled.  Another behaviour was that when a calendar element was selected, the animation would cause the icons to return to normal.  Not behaviour I wanted the users to have to just deal with, so I started on implementing a solution. 

Read more...

Possible Solution to Debugging & Testing in IE

AJAX , Browser Compatability , Javascript , Misc , Online Resources , Testing , Tips and Tricks No Comments »

Everyone knows how much of a pain it is to debug and test stuff in IE - especially for cross browser compatability and JS/AJAX errors or callbacks.

For development purposes - the following company provide a few nice solutions that could help with developing web applications in a number of versions of Internet Explorer.

DebugBar DebugBar: Is a toolbar which offers HTML DOM Tree view, HTTP and HTTPS Headers, page cookies view, HTML validation, JS Methods view, JS Execution etc. for Internet Explorer.

Companion.JS Companion.JS: Javascript debugger for IE - with detailed error reporting, Firebug like console logging, Javascript object inspection - enough said.

Last but not least...

IETester IETester: Allows for the rendering of web pages using the rendering and Javascript engines of IE5.5, IE6, IE7 and IE8 on Windows and Vista.

These are probably worth checking out as a solution to aid development and testing within Internet Explorer.

 

Bookmark and Share

Cross Browser Testing Solution from Microsoft

Browser Compatability , Misc , Testing , Tips and Tricks No Comments »

Microsoft (the King of browsers) have released the Beta of a new Cross Browser Compatability tool which allows you to compare different rendering engines - named "Expression Web SuperPreview".

As an alternative to having Virtual Machine software with different environments configured - or Multiple IE's installed, this looks, on paper, to be a sound solution.

Details can be found here: Expression Web SuperPreview.

Bookmark and Share
Powered by Mango Blog. Design and Icons by N.Design Studio
RSS Feeds