If you are like me, you occasionally come across minor, but maddening display problems with your web pages you've designed in Visual Studio 2008.
The following is a short story about debugging an issue I came across. I had just completed a log in page for an ASP.Net application using forms authentication. Here's a screen shot of a portion of the page:
Notice that the Name and Password labels do not line up on the right edge. Here is how the form looked in the page designer:
You'll notice the layout looks correct in the designer. However, if you look closely, the fonts are different. The web browser is using Verdana as its default font and the designer is using a serif font. What I needed to do was move the left side of the span element, effectively increasing the width of the span element. This increased width gives the browser enough room to correctly render the labels if a larger default font is utilized:
After making these changes, the labels are correctly aligned:
In summary, make sure the size of the control is large enough to handle different font families. Another solution is to set the font properties to set the font-family and font-size in the span style.
I spent quite a bit of time attempting to change the default font used by the designer when displaying an aspx page. I didn't have any luck. If you know how to change the default font, please let me know what the proper setting is.