Visual studio 2005 HTML design view bugs

[Nogusta123]

Hi,
I have had a lot of problems getting web pages, master pages and
content pages to render in VS2005 design view the same as they would in
Internet Explorer. I did a lot of looking on the internet for answers
but didn't have much luck. Anyway I believe I have found the causes of
the problems and thought I should share them in case any one else is
feeling the pain and also to find out what other peoples opinions are,
on whether these are bugs with VS2005 that should be fixed by
Microsoft.

******************************************************************
1. CSS incorrectly applied to Content and ContentPlaceHolder controls

VS2005 incorrectly applies CSS styles to asp:content and
asp:contentplaceholder controls in design view. As a result the design
view does not accurately display what will be rendered in the browser.

To recreate this problem do the following:
1. Create a simple stylesheet file called test.css
2. Place the following in the CSS file
td {
font-size: 25%;
background-color: #0AAE8B;
}
3. In VS2005 create a MasterPage with a single ContentPlaceHolder and a
<link> to the CSS file <link rel='stylesheet' href='test.css'
type='text/css'/>
4. Create a content page based on the created MasterPage
5. put some text in the in the asp:content control
6. Run the content page so that it can be viewed in Internet Explorer
7. In VS2005 view the content and MasterPage in design view

In VS2005 design view both the asp:content and asp:contentpalaceholder
have a bluish background and small font. However, when you run the
page in Internet Explorer the text is normal size and the background is
white.

I believe that this problem may be happening because the asp:content
and asp:contentplaceholder controls are being rendered as <table> for
display in VS2005 design view but they are not rendered at all when
output to Internet Explorer

This bug means that developers cannot see what the page will look like
without having to run it in Internet Explorer. It is possible to work
around the bug by modifying the <td> entry in the CSS file but the
problem with this is that the CSS file is set by the Marketing and web
teams which means it is not easily changed and if changed may break the
look and feel of older web apps.

**********************************************************************************************************
2. Comments affect the display of the page

Putting a comment in front a <!DOCTYPE> tag causes the page to render
differently in Internet Explorer as opposed to VS2005 design view

To recreate do the following:

1. Create a simple stylesheet file called test.css
2. Place the following in the CSS file
body
{
font-size: 25%;
}

.ApplicationName {
background-color: #0F4E8A;
font-size: 400%;
color: #FFFFFF;
}
3. In VS2005 create a web page.
4. Put in the following <link> tag. <link rel='stylesheet'
href='test.css' type='text/css'/>
5. Put in the following tags
<table>
<tr>
<td class="ApplicationName">
aaaa
</td>
</tr>
</table>
6. Add the following comment after <%Page> but before <!DOCTYPE>
<!-- This is a comment that should affect nothing -->
7. Look at the page in VS2005 design view and then run it so that it is
viewed in Internet Explorer.
a. Notice that the text when displayed in Internet Explorer is much
larger than when viewed in VS2005 design view.
8. Move the comment below the <!DOCTYPE> tag
9. Look at the page in VS2005 design view and then run it so that it is
viewed in Internet Explorer.
a. Notice that the text is now the same when displayed in Internet
Explorer and VS2005 design view.

VS2005 design view and Internet Explorer 6 handle the html comment <!--
This is a comment that should affect nothing --> differently. I am not
sure which one is handling it correctly, but one of them is definitely
wrong.

*********************************************************************************************
3. CssClass property of ASP controls is not accurately displayed

VS2005 design view does not render a page in the same way as Internet
Explorer when an ASP control with a "CssClass" property is inside a
html tag with a "class" attribute.

To recreate do the following:

1. Create a simple stylesheet file called test.css
2. Place the following in the CSS file
.ApplicationName {
background-color: #0F4E8A;
font-size: 200%;
color: #FFFFFF;
}
3. In VS2005 create a web page.
4. Put in the following <link> tag. <link rel='stylesheet'
href='test.css' type='text/css'/>
5. Put in the following tags
<p class="ApplicationName">
<asp:Label ID="Label1" CssClass="ApplicationName"
runat="server" Text="ApplicationName"></asp:Label>
</p>
6. Look at the page in VS2005 design view and then run it so that it is
viewed in Internet Explorer.
a. Notice that the text when displayed in Internet Explorer is much
smaller than when viewed in VS2005 design view.

It appears as if VS2005 design view is applying both the style
specified in "class" attribute and the style specified in the
"CssClass" attribute so that the text "ApplicationName" is displayed at
400%. Internet Explorer, however, applies only one of the styles so
that the text "ApplicationName" is displayed at 200%.

Once again I am not sure if it is VS2005 or Internet Explorer which is
correct but one of them is definitely wrong.

Thanks,

 

[Alan Silver]

2. Comments affect the display of the page

6. Add the following comment after <%Page> but before <!DOCTYPE>
<!-- This is a comment that should affect nothing -->
7. Look at the page in VS2005 design view and then run it so that
it is
viewed in Internet Explorer.
a. Notice that the text when displayed in Internet Explorer is much
larger than when viewed in VS2005 design view.

OK, I'm not 100% sure, but I think this isn't so much a bug, as due to
the way IE handles doctypes. Due to the fact that earlier versions of IE
had bugs with font sizes (amongst many other things), they introduced
"doctype sniffing" or "context switching" in IE6. This uses the doctype
to decide how to render the page. doctypes without an URL get rendered
in the old "quirks" mode, which was very inconsistent with the W3C
recommendations, and doctypes with an URL get rendered in the
"standards" mode, which is a lot closer to the W3C recommendations
(still jam-packed with bugs though!!).

AFAIK, IE uses the first line of the document as its test. If the first
line contains a doctype with an URL, it uses standards mode, otherwise,
it uses quirks mode. This means that adding a comment before the doctype
will switch it to quirks mode. As far as I remember, one of the
differences between the two is that the default font size in quirks mode
was larger (or was it smaller?).

You can test this with a simple stand-alone HTML document that uses
features that differ between the two modes. Add a comment before the
doctype and see if the rendering changes. I'm pretty certain it would.

This would explain your issue. The answer is simple - don't put comments
before the doctype!!

HTH