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,
