Weird FireFox problem! HELP!

[ChrisK76]

Hi everyone. I have put together a website for the school I work for, which allows our staff to log in and write reports for the kids.
I designed it using Visual Studio .NET 2003, and it's coded in ASP.NET. When I view it in IE, everything works perfectly.

I assumed no-one would worry about it working on other browsers, but it turns out loads of the staff use FireFox, and I have a problem! When I view the pages using FireFox on the internet, the layout is wrong, the sizes of buttons and controls are wrong, and it looks a mess.

BUT! if I load the page on IE, and then save the page as an HTML file, and open the saved page in FireFox, it displays as originally intended. (Even though if it loads straight into FireFox its all wrong)...

What on earth is going on?! I don't understand...

Oh, and if I save the page source from FireFox, and open it up in IE, it shows incorrectly there too. I assume that something is going wrong at the time the page is generated as the pages either work on both browsers (if IE served the page) or don't work on both browsers (if FF served the page)......?

I just examined the page source, and when the browser requesting the page from the server is FireFox, various elements are missing from the style attribute on many items on the page, that are otherwise present if the browser requesting the page is IE. I haven't coded anything that would do this, so why are my webpages selectively not sending information to some browsers?

 

[nomis135]

I think thats because of your tables. You probably didn't make them fit to the exact pixel or %

 

[omnia]

Cant be specific without seeing the code. Can you post a url? One of the basic rules when you produce a website, check it out in as many differenet browsers and versions of them as possible. Did you use any strictly IE tags etc? etc etc.

 

[ChrisK76]

I think thats because of your tables. You probably didn't make them fit to the exact pixel or %

I wish...

I have no tables on the page. Just (in VS.NET speak) a panel, three combo-boxes (drop down lists) and a couple of buttons. In the HTML code sent to the browser, if IE requests the page, i get (for example, on DropDownList1):

<select name="DropDownList1" onchange="__doPostBack('DropDownList1','')" language="javascript" id="DropDownList1" class="DropDown" style="background-color:Transparent;font-family:Arial;font-size:X-Small;height:40px;width:272px;Z-INDEX: 101; LEFT: 600px; POSITION: absolute; TOP: 64px">
<option value="--- Select year group ---">--- Select year group ---</option>
<option value="7">Year 7</option>
<option value="8">Year 8</option>
<option value="9">Year 9</option>
<option value="10">Year 10</option>
<option value="11">Year 11</option>

</select>

If the page is requested by FireFox, I get:

<select name="DropDownList1" onchange="__doPostBack('DropDownList1','')" language="javascript" id="DropDownList1" class="DropDown" style="Z-INDEX: 101; LEFT: 600px; POSITION: absolute; TOP: 64px">

<option value="--- Select year group ---">--- Select year group ---</option>
<option value="7">Year 7</option>
<option value="8">Year 8</option>
<option value="9">Year 9</option>
<option value="10">Year 10</option>
<option value="11">Year 11</option>

</select>

The key thing is that there is no width or height tag in the style list. Why does it not get sent if FF requests the page?

The ASP.NET code is:

<asp:dropdownlist id="DropDownList1" style="Z-INDEX: 101; LEFT: 600px; POSITION: absolute; TOP: 64px"
runat="server" Width="272px" Height="40px" AutoPostBack="True" Font-Names="Arial" Font-Size="X-Small"
BackColor="Transparent" CssClass="DropDown">
<asp:ListItem Value="--- Select year group ---">--- Select year group ---</asp:ListItem>
<asp:ListItem Value="7">Year 7</asp:ListItem>
<asp:ListItem Value="8">Year 8</asp:ListItem>
<asp:ListItem Value="9">Year 9</asp:ListItem>
<asp:ListItem Value="10">Year 10</asp:ListItem>
<asp:ListItem Value="11">Year 11</asp:ListItem>
</asp:dropdownlist>

Sorry about the formatting, hope you can see what's going on there though. I would love to post a URL to the site, but as it contains loads of personal data I can't do that...

Chris

 

[hotrod12]

Do you use dreamweaver? If you dont you should get the trial and use it to specifically see the errrors in the code. http://www.macromedia.com/go/trydreamweaver

 

[ChrisK76]

Do you use dreamweaver? If you dont you should get the trial and use it to specifically see the errrors in the code. http://www.macromedia.com/go/trydreamweaver

What a star...

In dreamweaver, it showed that the .aspx file didn't have the width and height tags within the style="..." line, but rather as separate entries. IE must have been happy with these, and reformatted the HTML as it came in to display the items as VS.NET intended, whereas FF was working with what it was sent, and only understood the attributes within the style="..." bit.

Anyway, it was much easier to see this in the DreamWeaver layout, and this has allowed me to edit my aspx files, and now the site works on FF as well as IE!

Hooray! Thanks for the rapid help guys.
Chris

 

[hotrod12]

Glad that dreamweaver was able to help you out!!!

 

[Rowan W]

Also glad that Firefox wasn't actually displaying the page "wrongly".

I've seen IE do a lot of other things like this, where it thinks it knows best and applies values to elements it was never told to. This may be good in some ways, but it means people could continue to use bad code without knowing.

Anyway, good to here you sorted it out.

 

[hotrod12]

Yeah and unfortunely all sites are not fully compatible with firefox yet so we will have to keep IE around for a little while but hopefully soon all websites will work perfectly in firefox.