Browser compatibility woes

IE Webcontrols are awesome, unless you want to use Firefox…

Web page compatibility… So important, yet so difficult at times! When I explained the proglems I was having to my supervisor yesterday he got all angry that after all this time there was no standard for all web browsers to adhere to, though I pointed out that if there was then all the viruses that could get through IE but not others would affect everyone, but still, it would be nice if a website would look the same on every browser.

As we make Windows software with Microsoft products we are not too concerned with stuff like this, but as I am a Firefox user myself, I consider it to be important and try to make everything I make cross compatible.

Now I expected to have a problem, because I am working in Mircosoft Visual Studio, programming in ASP.NET and using Microsofts Internet Explorer Web Control package to make a neat looking tabstrip with multipage affair. I’d be crazy to even think that this could work in anything but IE, so I wasn’t too surprised to see it looking like a jumbled mess.

My problem is this, I have a heap of labels and other components that are all set with left and top values to align them on the page. In IE, it aligns them within the multipage area and everything looks great. In Firefox, it aligns them from the top and edge of the page and as a result everything is in the wrong place. This can be fixed by changing the values, but then it looks wrong in IE. I need a way for it to look right in both. For some reason FF can’t seem to keep a {span} object inside the table.

However, I’d like to try to get it looking better, I’d really hate to have to tell people that this application is IE only.

I have a few things to try in this situation.

Step 1, add browsercaps to my Web.config file.

The standard code I use for this is as follows:

* When I tried to post this I realised that by putting HTML code in here the blogger tried to execute it, so I have replaced the “{” symbols with “{” I’ll have to see if there is a way around that…

{browserCaps}

{!–NETSCAPE 6 and 7 //–}

{case match=”^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+ )?Netscape[6|7]/(?’version'(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)).*”}

tagwriter=System.Web.UI.HtmlTextWriter

browser=Netscape

version=${version}

majorversion=${major}

minorversion=${minor}

frames=true

tables=true

cookies=true

javascript=true

javaapplets=true

ecmascriptversion=1.5

w3cdomversion=1.0

css1=true

css2=true

xml=true

{/case}

{!– MOZILLA //–}

{case match=”^Mozilla/(?’version'(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)).*”}

{case match=”^[5-9]\.” with=”${version}”}

tagwriter=System.Web.UI.HtmlTextWriter

{/case}

{/case}

{!–

OPERA 5+

//–}

{case match=”Opera[ /](?’version'(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*))”}

{filter match=”[4-9]” with=”${major}”}

{filter match=”[5-9]” with=”${major}”}

tagwriter=System.Web.UI.HtmlTextWriter

{/filter}

{/filter}

{/case}

{!–

GECKO Based Browsers

//–}

{case match=”Gecko/[-\d]+”}

browser=Netscape

frames=true

tables=true

cookies=true

javascript=true

javaapplets=true

ecmascriptversion=1.5

w3cdomversion=1.0

css1=true

css2=true

xml=true

tagwriter=System.Web.UI.HtmlTextWriter

{case match=”rv:1.0[^\.](?’letters’\w*)”}

version=6.0

majorversion=6

minorversion=0

{case match=”^b” with=”${letters}”}

beta=true

{/case}{/case}{case match=”rv:1(\.\d+)(\.\d)?(?’letters’\w*)”}

version=7.0

majorversion=7

minorversion=0

{case match=”^b” with=”${letters}”}

beta=true

{/case}{/case}{/case}

{/browserCaps}

I only have about a 50% understanding of what this does and what all that stuff means, but adding it in usually solves a few layout problems, such as textboxes not showing up in their set width, ect.

In this case it had no effect, which was what I anticipated.

Step 2, change the page target XML scheme from Internet Explorer 5 to Internet Explorer 3.02 / Netscape Navigator 3.0.

This has never fixed a problem for me but I always try it anyway. In this case it made no difference, so I changed it back. Doesn’t seem like a setting I would want to leave like that without good reason.

I’ve been mucking around with putting {div} stuff around the trouble spots but haven’t really solved the problem and can’t waste too much time on it. I guess for now I’ll have to just detect the browser type and display a message if it is not IE and tell the client that it is IE compatible only. Although it does still work fine in FF, it just looks wrong.

I suggested to my supervisor that I could install Opera and see what it looks like in there and he said it’s probably less stressful not to know. I think I agree!

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s