I have been bothered for a while with the way my RelationalDropDownLists render in FireFox and some other newer browsers such as Safari. Their width, like regular list controls, always depended on the width of the longest text string in the control. What made it worse was the relational list control’s width could dynamically change with each new selection in the parent list if the text length changed. I disliked the way that looked but thought it was some IE / FireFox standards issue.

I read Paschal’s post about updating the browserCaps[1] section of the machine.config / web.config file with definitions for newer browsers. I tried it and the page immediately looked better. The list controls are now rendered at the width I specified, regardless of the width of the text.


Before


After

I also noticed asp:panel controls that were being rendered as tables are now rendered correctly. DIV elements with inline styles such as width are not supported in down-level browsers, which is what ASP.NET thinks FireFox is without the updated browserCaps section.

I wonder how many hair pulling issues I dealt with in the past were not because of browser differences, but a byproduct of ASP.NET thinking FireFox and Safari were down-level browsers.

You can get the additional definitions here: http://slingfive.com/pages/code/browserCaps/. If you add the definitions to the machine.config file. Scroll all the way to the bottom then scroll up. The end of the browserCaps section is almost at the end of the file.

[1]browserCaps: It is the section of the machine.config file containing settings ASP.Net uses to render server controls differently to browsers with different capabilities.