Internet Explorer strange behaviors – part 1

I’m working with Microsoft technologies in my daily work, both because I like the development platform that .NET provides and the software that Microsoft creates. However, Internet Explorer have some serious problems that frustrates me as a web developer. I’ll throw my issues out here, together with my fixes, if I have any. So if you read this and have similar problems, please give me some feedback on how I can fix my issues, or state your own as well.

I test all my web applications in Firefox, Opera, Safari for Windows, Internet Explorer from version 6 and up. I will focus on the latest official browser: Internet Explorer 7, and compare it with Firefox, Opera and Safari.

Issue 1

I’m am currently using Gaiaware in my web application. To enable Ajax in a simple and efficient manner. I try to show and hide a validation message.

Error styling  The red box in the image above has an arrow to the left that visually points to the line with the error. The box is made visible wrapping it in a Gaia:Panel. This works well in all browser except IE7.

image

In IE7 it renders extra arrows as shown above for every time the box is shown. It is rendered all the way to the left on the line together with the input field. 

image

The HTML that is rendered is shown above. You can see multiple spans for each arrow with a class saying “feilmeldingPilVenstre”.

<div class="feilmeldingTekst" id="id2">
    <span id="id1">Udefinert tekst</span>
    <span class="feilmeldingPilVenstre" id="id3"/>
</div>

In the other browsers however it is rendered with the code above, which is correct.

The source code that generates the error in IE7 looks the this:

<gaia:Panel ID="pnlFeilmelding" runat="server" CssClass="feilmeldingTekst">
    <gaia:Label ID="lblFeilmelding" runat="server" Text="Udefinert feilmelding"></gaia:Label>
    <span class="feilmeldingPilVenstre" />
 </gaia:Panel>

FIX: The fix is to make the span class a Gaia:Label as shown below. Then also IE7 rendered the arrow only once, as it was supposed to. I do not know why IE7 treats the span tag any different. Does it mean that it treats all generic html controls strange like this? 

<gaia:Panel ID="pnlFeilmelding" runat="server" CssClass="feilmeldingTekst">
    <gaia:Label ID="lblFeilmelding" runat="server" Text="Udefinert feilmelding"></gaia:Label>
    <gaia:Label ID="lblFeilPilVenstre" runat="server" CssClass="feilmeldingPilVenstre"></gaia:Label>
 </gaia:Panel>

Leave a Reply