Differences between "view in browser" to design view

Dan Cern · #1 (**permalink**) July 11th, 2009, 11:29 PM

Hello!

I forgot to place a defualt.aspx on page 198 and went on to finish the chapter. then I returned to 198 and built that page. In design view nothing seems aligned correctly BUT in browser everything is fine. Also the Masterpage is not aligned correctly in design view as in Figure 6-2 but that should be because of the instruction to delete Styles.css later in the chapter in to App_Themes.
Thanks alot for the response.
Dan

Imar · #2 (**permalink**) July 12th, 2009, 05:20 AM

Hi Dan,

I am not sure exactly what you're asking as I don't see a question mark anywhere. ;-)
If you're asking why there's a difference between Design VIew and View in Browser then I guess that's by design.

VWD has its own rendering engine not directly related to that of a browser so it might interpret some code differently than, say, IE 8. The two should render a page roughly the same but there will be differences. VWD gets closer to the W3C standards with each release, so the differences tend to get smaller and smaller.

Another reason for the differences is that in VWD you only see parts of a page; not the whole page. Only when everything is combined (page, master page, theme, style sheets etc) do you get to to see the real picture.

Hope this answered your unasked question ;-)

Imar

cuddling101 · #3 (**permalink**) October 17th, 2009, 09:39 AM

Hello Imar

My problem seems similar to this one, so I have put my question here. Basically I am trying to go through your book fairly slowly and trying out bits quite extensively, as I go; i.e. having a go a bit with what I have learnt to that point.

I have developed a CSS and called it styles.css. I had originally put it in a folder I called Styles, but a bit of web searching has shown me that it is more appropriate to use a folder name App_Themes and so that is what I have done. I have set that style sheet in to my default.aspx file and everything works OK. Default.aspx is sitting in the main directory. I have then tried to use the style sheet in one of the Demos folder forms and the background picture, which I have set up within the MainContent style item shows up perfectly in VWD, as I have given the div the ID MainContent. When I call the web page though, using Ctrl F5, I just get nothing. When I take the style 'call' out, the form works perfectly. I am reluctant to move forward further in the book if I am not properly understanding the use of what appears to be such a key part of the structure of ASP.NET 3.5. I look forward to your comments.

Best regards

Philip
Perth, Western Australia

Imar · #4 (**permalink**) October 17th, 2009, 10:51 AM

Hi there,

As you'll see in Chapter 6, I am using App_Themes as well. If you're not using themes, a Styles folder in the root is a good idea. Once you move to themes, App_Themes is the better choice.

To investigate the problem you need to look at the source in the browser.How is your CSS file linked in the head section? Is it a valid path? Did you also configure the theme in web.config?

And can you define "I just get nothing"? Do you get a blank screen, or is the CSS simply not applied?

Imar

cuddling101 · #5 (**permalink**) October 17th, 2009, 10:10 PM

Hello Imar

When I say nothing, I mean I get just a white screen.

The call to the CSS looks the same as it is in the default.aspx, which is in the root and works.

I tried to have a bit of structure to my directories and placing of objects as that is how I have always coded in various languages including basic HTML, and I seem to recall you recommended it early on in the book. The background image that is not displaying in the demo use of the style sheet (located in App_Themes) is located in an Images directory whose parent directory is the root.

I am early on in the book and though I understand the concept of "[configuring] the theme in web.config", in that I understand configuring as a basic concept in computing, particularly PC computing, I do not yet know how to specifically do that in the ASP.NET 3.5 context.

I will try the idea of relocating the style sheet to the root and see if that makes things work in the demo for now.

I thank you for your welcome and prompt response to my query, and I look forward to any further comments or advice you may have.

Best regards

Philip

Imar · #6 (**permalink**) October 18th, 2009, 02:51 AM

When you create a Theme folder under App_Themes nothing happens yet. All there is, is a folder with images and style sheets. Chapter 6 shows you how to set the theme or styleSheetTheme attribute on the <pages> element of web.config:

<pages theme="Monochrome">

Can you post the code of your CSS, the <head> section of your page, and the structure of your site / files on disk? It sounds like you may be including the right CSS file, but resources linked from that file are then searched for at a different location. The first section of Chapter 7 explains more about relative, absolute and root based links, so you may want to read that first, or stick to the book's structure until you reach chapters 6 and 7 before you start moving around stuff to Themes folders that haven't been discussed yet.

Cheers,

Imar

cuddling101 · #7 (**permalink**) October 19th, 2009, 07:27 AM

Hello Imar

Thank you for your welcome encouragement. I am now at the stage where I have stopped the page from simply showing a white screen. I have achieved that by using absolute rather than relative references to the image file where it is referenced in the CSS. I have also stepped away from App_Themes, for now, and have gone back to the Styles directory in the root approach.

I still find, though, that the background displays in the VWD but not in the browser. I have noticed that when I do a Ctrl F5, the Images directory is not listed as one that is being built; maybe there is some parameter setting that I have missed doing?

I am using VB as my language.

Summary of structure

Root contains default.aspx and directories - App_Data, App_Themes, Controls, Demos, MasterPages, Scripts, and Styles

Demos has a few of your demos in it. Controls has the rudiments of a login.aspx, and MasterPages has a basic MasterPage akin to yours in it.

styles.css in Styles directory =

Code:

#Header
{
    background-image: url('/Images/How_and_Why_Wonder_Books_Website_Background.jpg');
}
#h1
{
    font-size: 40pt;
    font-weight: bolder;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    color: #0066CC;
}
*
{
    font-family: 'Century Gothic';
    position: relative;
    top: -2147483648px;
    left: -2147483648px;
    z-index: 1;
    right: 0px;
}
#PageWrapper
{
    background-image: url('/Images/How_and_Why_Wonder_Books_Website_Background.jpg');
    width: 844px;
    height: 850px;
}
#MenuWrapper
{
    width: 844px;
    float: left;
    background-color: #FF9966;
    color: #FFFF00;
}
#MainContent
{
    width: 644px;
    background-image: url('/Images/How_and_Why_Wonder_Books_Website_Background.jpg');
    float: left;
    height: 720px;
}
#Sidebar
{
    width: 200px;
    float: left;
    background-color: #00FFFF;
}
#Footer
{
    width: 844px;
    clear: both;
    background-color: #00CC00;
}
#MainContent a
{
    color: #008000;
    text-decoration: underline;
}
#MainContent a:visited
{
    color: #FF0000;
    text-decoration: underline;
}
#MainContent a:hover
{
    color: #FFA500;
    text-decoration: underline;
}
.style1
        {
            width: 100%;
        }
        .style2
        {
            width: 322px;
        }
        .style3
        {
            width: 322px;
            font-weight: bold;
            color: #FF0066;
        }
        .style4
        {
            list-style-type: square;
        }
        .style5
        {
            width: 322px;
            font-weight: bold;
            color: #FF6600;
        }
        .style6
        {
            list-style-type: circle;
        }
        .style7
        {
            color: #660066;
            font-weight: bold;
        }
        .style8
        {
            color: #006600;
            font-weight: bold;
        }
.HWbuttons
{
    border-width: 2px;
    text-align: left;
}

Containers.aspx =

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Containers.aspx.vb" Inherits="Demos_Containers" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
    <div style="height: 550px" id="MainContent">
    
        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" 
            Text="Show Panel" />
        <br />
        <br />
        <asp:Panel ID="Panel1" runat="server"  Visible="False" >
            <asp:Wizard ID="Wizard1" runat="server" Width="500px" ActiveStepIndex="0">
                <WizardSteps>
                    <asp:WizardStep runat="server" title="About You">
                        <asp:Label ID="Label1" runat="server" Text="Type your name"></asp:Label>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </asp:WizardStep>
                    <asp:WizardStep runat="server" title="Favourite Language" StepType="Finish">
                        <asp:DropDownList ID="FavCompLang" runat="server">
                            <asp:ListItem>PL/1</asp:ListItem>
                            <asp:ListItem>COBOL</asp:ListItem>
                            <asp:ListItem>FORTRAN</asp:ListItem>
                            <asp:ListItem>ALGOL</asp:ListItem>
                            <asp:ListItem>LISP</asp:ListItem>
                        </asp:DropDownList>
                    </asp:WizardStep>
                    <asp:WizardStep runat="server" StepType="Complete" title="Ready">
                        <asp:Label ID="lblResult" runat="server" Text="Label"></asp:Label></asp:WizardStep>
                </WizardSteps>
            </asp:Wizard>
        </asp:Panel>
    
    </div>
    </div>
    </form>
</body>
</html>

I look forward to your continued encouragement and I most certainly will send you the site when I am finished, hopefully within 2 to 3 months at the most.

Best regards

Philip

Imar · #8 (**permalink**) October 19th, 2009, 02:43 PM

Hi there,

When you look at the address in the address bar of the browser, what do you? Something like:

http://localhost:12345

or

http://localhost:12345/SiteName

In the latter case, the root slash is not going to work; you need to use /SiteName/Images instead as your site is using a virtual directory. You can change the Virtual Path property on the site's Properties Grid in the Solution Explorer to / to make /Images work again. Don't worry about this too much now; it's explained in later chapters. In case you change the Virtual path, reminder that it might break other stuff, until you reach the point where one of the instructions tells you to change it (Page 238 in Chapter 7).

Cheers,

Imar

cuddling101 · #9 (**permalink**) October 20th, 2009, 08:05 AM

Hello Imar

While I wish to pursue this matter I am reading forward and have now got to Chapter 7 and read about the Virtual Path property. I must also note that I have been using other programming languages for many years and so each new one is just a slight tweak of the knowledge.

I tried the setting of the Virtual Path to / and all that did was cause a white screen of nothing again, so I set the VP back to /How and Why Wonder Books Web Site and at least that made the Containers demo work again, but still no background image from the Images folder, as specified by styles.css in the Styles folder.

I then thought let's look at View Source and look at what has actually been built in the styles.css that the local host built by invoking Ctrl F5, and I found this -

Code:

<html>
    <head>
        <title>Not Found</title>
        <style>
        	body {font-family:"Verdana";font-weight:normal;font-size: 8pt;color:black;} 
        	p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
        	b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
        	h1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
        	h2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
        	pre {font-family:"Lucida Console";font-size: 8pt}
        	.marker {font-weight: bold; color: black;text-decoration: none;}
        	.version {color: gray;}
        	.error {margin-bottom: 10px;}
        	.expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
        </style>
    </head>
    <body bgcolor="white">

            <span><h1>Server Error in '/How and Why Wonder Books Web Site' Application.<hr width=100% size=1 color=silver></h1>

            <h2> <i>HTTP Error 404 - Not Found.</i> </h2></span>

            <hr width=100% size=1 color=silver>

            <b>Version Information:</b>&nbsp;ASP.NET Development Server 9.0.0.0

            </font>

    </body>
</html>

As you can see I have not got my styles.css but something with errors in it. This is obviously why I am not getting my background, or in fact any of my styles like my fonts etc. Have you any suggestions as to why my styles.css is not flowing through correctly?

Best regards and continued many thanks for your support.

Philip

Imar · #10 (**permalink**) October 20th, 2009, 09:51 AM

Hi there,

This is probably the same problem: the file is unavailable because its path is incorrect. You may be referring to it from the root (/) when using a Virtual Path, or you're using an application name (/SomeName/) when using / as the virtual path.

To check, look at the final HTML in the browser and look at the <link /> element that points to the CSS file.

Cheers,

Imar

Need to download code?

Navigation