I ran into another cross-browser issue for the first time in a while yesterday. Using cascading style sheets, I was adding in left- and right-side border images that would fill out the screen around the main centered flash application for people with larger monitors or viewing areas. Firefox 3 seemed to be the only one that was showing up like I had wanted it to with both images filling out the sides appropriately as I expanded the browser window. Upon viewing in all other browsers, including Firefox 2, no side images were visible at all and the main flash content appeared to be left aligned. I couldn’t easily find any known issues with the information I had when searching on the Internet. I tried several things, but none made a difference. So I examined the code further and finally noticed a possible culprit. The CSS styles were being applied to table cells and the left and right cells in the html were blank like this: <td class=”left”></td> So there was nothing between the tags and I figured that maybe that was the cause. I just added in simple code for a blank space between the tags so it was like this: <td class=”left”> </td> Of course this blog renders out the code so you’ll just see a blank space, but it’s written with an ampersand then nbsp; Low and behold everything then showed up beautifully across all browsers.
It was something incredibly small, but made a big difference in how the web page looked in the end. The devil is in the details as they say. At DDA we get as detailed as we can in all areas of what we do, because that’s how it gets done right. The movements in our 3D animations are precise, every word in our copywriting content has purpose, every bit of custom programming is tested and retested, and every video shoot gets as many takes as are needed. No matter what it takes to get it right and get the highest quality projects that we can out the door, DDA is up to the task. We’ve done it for years and will continue to into the future, right down to the last devilish detail.