Need help with Firefox compatibility

I've found that I can eliminate about 90% of the IE / Firefox / Netscape incompatibilities by not using the built in web control attributes that deal with styles and explicitly using the 'style' attribute instead.

For example:
instead of <asp:TextBox width='90%'/>
use <asp:TextBox style='width:90%;'/>

It's easy to get into this coding habit since I work with a plain text editor instead of Visual Studio.

To get a handle on your asax files loading 1/4 inch lower in Firefox check View | Page Source in Firefox and View | Source in IE. Comparing the rendered HTML in both may give you a clue as to how to fix the incompatibility.

 

Well, I've built a nice-looking, functional site using Visual Studio .NET. I had only ever tested it in Internet Explorer, so I was surprised to see just how bad my site looks using Firefox. (And Netscape, for that matter.) This will be an issue I have to correct.

My site is large, made up of several images, lots of text, and lots of input controls. I also use an ascx file as a border on every page of my site.

I found code to put in the web.config file that has fixed A LOT of issues I had...namely the text formatting and size of my input controls. (Yay!)

My problem is the images and/or ascx files. They are still misbehaving quite badly. Basically, from what I can tell, the ascx file is loading about a quarter of an inch lower on the page in Firefox than it does in Internet Explorer. It throws off the entire site. My ascx file has its borders set to zero for the top and left. Does anybody know a fix?

One other issue I'm experiencing with Firefox is a multi-paneled form on one of my pages. Right now, I have a 9-panel page where only 1 panel is visible at a time. To view the next panel, the user clicks on the "Continue" button. Panel 1 becomes invisible and Panel 2 becomes visible. Starting on Panel 2, I also have a "Previous" button the user can use to move backwards. The "Continue" and "Previous" buttons are outside of all code for the panels. The code to move forward and backward through the panels works perfectly in IE. But, in Firefox, I experience trouble. After clicking "Continue" from Panel 1, it correctly brings up Panel 2. However, the "Continue" button ceases to be clickable from that point on. It's visible, but nothing happens if you click on it. Does anyone know why this is happening? I can post code if necessary....

I understand from articlesI've read that Visual Studio .NET is particularly weak in developing code that is compatible with Firefox. I had done very limited coding outside of VS .NET before switching and thinking that VS .NET was the answer to everything. (Sigh). Now I wish I'd stuck with Notepad.

Thanks for any help ya'll can give me!

~Steph

PS - For anyone interested, the code I added to my web.config file can be found here: http://slingfive.com/pages/code/browserCaps/browserCaps_tabs.txt

 

Thanks for the response, Scott.

I actually got the ascx files to work by setting their POSITION attribute to "absolute" instead of "relative".

I know from my research that Panel elements and Firefox do NOT get along. My biggest question now is if I change the Panels to DIVs, will my code to switch between them continue to work the way it's supposed to? I'll throw in my code here to see what you think...(BTW, my panels are named "Page1", "Page2", etc....)



Private Sub btnContinue_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnContinue.Click
ShowPage(Integer.Parse(ViewState("CurrentPage").ToString()) + 1)
End Sub

Private Sub btnPrevious_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnPrevious.Click
ShowPage(Integer.Parse(ViewState("CurrentPage").ToString()) - 1)
End Sub

Private Sub ShowPage(ByVal page As Integer)
ViewState("CurrentPage") = page
Select Case page
Case 1
btnContinue.Visible = True
btnPrevious.Visible = False
btnSubmit.Visible = False
Page1.Visible = True
Page2.Visible = False
Page3.Visible = False
Page4.Visible = False
Page5.Visible = False
Page6.Visible = False
Page7.Visible = False
Page8.Visible = False
Page9.Visible = False
Exit Sub
Case 2
btnContinue.Visible = True
btnPrevious.Visible = True
btnSubmit.Visible = False
Page1.Visible = False
Page2.Visible = True
Page3.Visible = False
Page4.Visible = False
Page5.Visible = False
Page6.Visible = False
Page7.Visible = False
Page8.Visible = False
Page9.Visible = False
Exit Sub
Case 3
btnContinue.Visible = True
btnPrevious.Visible = True
btnSubmit.Visible = False
Page1.Visible = False
Page2.Visible = False
Page3.Visible = True
Page4.Visible = False
Page5.Visible = False
Page6.Visible = False
Page7.Visible = False
Page8.Visible = False
Page9.Visible = False
Exit Sub

<!-- snipped Case 4 - Case 9 -->


End Select
End Sub


From everything I've read, it seems like I'll have to replace my panels with DIVs, but can I give a name to a DIV and refer to its Visible properties like I'm doing now with the panels?


As always, thank you SO much for any help and insight....


~Steph</CODE>

 

Looking at your code, I can't see anything wrong offhand. But it would seem that iif the Continue button is hanging, the same would be happen to the Previous button.

Panels seem to function identically in IE and Firefox in my experience. However, I did view the source of a page in both browsers just now and see that IE renders the panel as a DIV, while Firefox renders it as a TABLE with a single row and cell (<table id='pan_Name' cellpadding='0' cellspacing='0' border='0' width='100%'><tr><td>).

So again, if your panel problems relate to the style in which they are displayed, you may be able to solve them, by explicitly setting the style attribute in the aspanel tag.

As for DIVs, you can name them, set their runat attribute to 'server' and set the visible property.

Incidentally, within a normal table you can define a row as '<tr id='row_Name' runat='server'> and then use row_Name.visible= true/false in code to hide or show the entire row based on some condition. This is a trick that I have found quite useful in various forms.

 

So, if the panels aren't the problem (the pages are now formatting quite nicely in Firefox), what's causing the Continue and Previous buttons to break (stop working) after the first use? I'm really confused. If I had error messages to work with, it would be easier. But, they just stop working. The mouse doesn't even turn into the hand to show there's something clickable there.


All this is still working perfectly in IE.


::scratches head::


Any ideas?


~Steph