.Net GridView and Firefox 3 Weirdness

Oct 17

Stephen Martin.Net, Web Design , , , , , , No Comments

Screen shot of the Rentals.com Manage My Ads table in Firefox 3.

While working on a project at Rentals.com, I came across an odd Firefox 3 issue. A table that had been generated by the .Net GridView was acting all crazy. The table was shifted about half the width of the table to the right and misaligned. The table itself was correctly styled through a targeted surrounding div with an ID.

After playing around with some style adjustments, targeting specific elements, removing padding, removing margins, etc., I couldn’t seem to remove the excess left margin.

I started troubleshooting further and uncovered a few articles about the .Net GridView control and the table, that is ultimately wrapped inside of a div. It didn’t seem like we could target this div with an ID or Class. The only way to target it was a blanket style that attacked all divs contained within the parent above the GridView generated div. Wow, what a mess.

I started to apply different styles through this targeting method and came up on something strange. When a border was applied to the GridView generated div, it moved back into place. Unfortunately, applying a border to every child element meant mayhem for my design.

After applying a transparent border, the magic happens.

At first, I figured it was the border property itself and tried “border: none;”… nothing. Didn’t do the trick. I actually ended up applying a transparent border with a width of 1px (0px or 0 didn’t work either) to every div contained within the parent, which then targeted the GridView generated div and fixed the problem.

What’s a transparent border between friends?