Differences between "view in browser" to design view

cuddling101 · October 21st, 2009, 08:27 AM

Dear Imar
I am truly sorry that it must be beginning to feel to you that I am like a pest. I am though truly hung up at this very basic early concept of correct access to and use of a style sheet.

1. The virtual path property on my web site is set to /How and Why Wonder Books Web Site.

2. I am now trying to simply get my default aspx (non master-pages version) to display correctly.

3. Default.aspx is sitting in the root. The style sheet styles.css is sitting in a Styles directory which is in the root.

4. Diagnostic scenarios

a. Include the root slash in the following link to the styles sheet -
<link href="/Styles/Styles.css" rel="stylesheet" type="text/css" />
This produces a result for the default.aspx, i.e. the words are all there, but the style sheet as pointed to by the generated HTML is the error one â generated HTML =

Code:

<head><title>
Start up page for How and Why Wonder Books Web Site
</title>
    <style type="text/css">
        </style>
    <link href="/Styles/Styles.css" rel="stylesheet" type="text/css" /></head>

b. Remove the root slash and use the following link to the styles sheet -
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
This produces a blank white screen, but the style sheet as pointed to by the generated HTML is the correct one â generated HTML =

Code:

<head><title>
Start up page for How and Why Wonder Books Web Site
</title>
    <style type="text/css">
        </style>
    <link href="Styles/Styles.css" rel="stylesheet" type="text/css" /></head>

5. If I change the virtual path property on my web site to be set to just the slash, i.e. /, I get the correct style sheet being generated in either method of linking, but in neither case do I actually get anything come up on the page.

It seems, as a bottom line, that I can either get a correctly generated style sheet, or a page with something showing on it, but not both.

I have included the text of the style sheet in a previous post.

The text of the default.aspx file is

Code:

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

<!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>Start up page for How and Why Wonder Books Web Site</title>
    <style type="text/css">
        </style>
    <link href="/Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
        <div id="Header">Header Goes Here</div>
        <div id="MenuWrapper">Menu Goes Here</div>
        <div id="MainContent">
        <h1 align="center" style="color: #0066CC">How and Why Wonder Books</h1>
        <p align="center" style="color: #336600">Welcome to an information site for this book series, which was published in various guises from the 
    early 1960s to the mid 1990s.  
            <br />
                Through these pages you will find out about the fourteen different edition 
    types, the various changes in cover design (both back and front), 
            <br />
        the breadth of content of each title, 
    and many other interesting facts about this much loved, and still sought after, series.</p>
        <table class="style1">
            <tr>
                <td class="style3">
                    Edition Types</td>
                <td class="style7">
                    Theme Groups</td>
            </tr>
            <tr>
                <td class="style2">
                    <ul class="style4">
                        <li>UK Early</a></li>
                        <li>UK Classic</li>
                        <li>UK Middle</li>
                        <li>UK Late</li>
                        <li>USA Early-1</li>
                        <li>USA Early-2</li>
                        <li>USA Classic</li>
                        <li>USA New 1970s</li>
                        <li>USA Allan Early 1980s</li>
                        <li>USA PSS Early 1980s</li>
                        <li>USA PSS Mid to Late 1980s</li>
                        <li>USA PSS New Titles Late 1980s</li>
                        <li>USA Activity Wonder Mid 1980s to Early 1990s</li>
                        <li>USA Activity Fun Mid 1990s</li>
                    </ul>
                </td>
                <td valign="top">
                    <ul class="style4">
                        <li>History and Prehistory</li>
                        <li>Geography and Geology</li>
                        <li>Mathematics</li>
                        <li>Physics and Chemistry</li>
                        <li>Biology and Botany; including Palaeo- studies</li>
                        <li>Astronomy</li>
                        <li>Science (General and other Sciences)</li>
                        <li>Transport and Travel</li>
                        <li>Human Civilization</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="style5">
                    Publishers</td>
                <td class="style8">
                    Authors</td>
            </tr>
            <tr>
                <td class="style2">
                    <ul class="style6">
                        <li>Transworld Publishers</li>
                        <li>Grosset and Dunlap</li>
                        <li>Allan Publishers</li>
                        <li>Price Stern Sloan</li>
                    </ul>
                </td>
                <td valign="top">
                    <ul>
                        <li>A to E</li>
                        <li>F to J</li>
                        <li>K to P</li>
                        <li>Q to U</li>
                        <li>V to Z</li>
                    </ul>
                </td>
            </tr>
        </table>
        </div>
        <div id="Sidebar">Sidebar Goes Here</div>
        <div id="Footer">Footer Goes Here</div>
    </div>
    </form>
</body>
</html>

I look forward to your further advice, as this is really blocking my progressing with your book, as if I can't master the basics I have no confidence to proceed to the more complicated stuff and thus actually implement my web site, for which I have already paid domain parking fees, so I am anxious to get this project moving along.

Best regards

Philip

Imar · October 21st, 2009, 09:00 AM

Hi Philip,

Take a look at your CSS:

background-image: url('/Images/How_and_Why_Wonder_Books_Website_Background.jpg');

See where the image is coming from? From the root as well.

So, when you have a virtual path of /Something, the image won't show up.

All elemements need to be in sync. E.g.:

Virtual Path /
Style sheet /Styles
Images in CSS /Images/SomeImage.jpg

Or with a VP"

Virtual Path /Something
Style sheet /Something/Styles
Images in CSS /Something/Images/SomeImage.jpg

Using root relative options, and using ~ to indicate the "current root" where possible are designed to solve many of these problems.

If none of this works, or doesn't make any sense, send me a message through my personal web site (http://imar.spaanjaars.com). I'll reply, so you know my e-mail address. Then you can send me the zipped version of the source and I'll take a look.

Cheers,

Imar

cuddling101 · November 1st, 2009, 02:32 AM

Imar graciously agreed to look at my source, through his own website, and this is the nub of his responses and fixes -

*****************

Salient points of Imar's resolution of my problems

1. As explained in the book, ~ is for server side URLs only so you can't use them in your CSS. Instead, you need to refer to images relative to the Styles and Images folder. They are at the same level, so you need to use .. to get up one level and then use /Images to go into the images folder:

Code:

background-image: 
url('../Images/How_and_Why_Wonder_Books_Website_Background.jpg');

2. The blank screen is actually a good sign as it means your CSS gets read correctly. However, you then have one very odd selector that ruins all the fun:

Code:

*
{
    font-family: 'Century Gothic';
    position: relative;
    top: -2147483648px;
    left: -2147483648px;
    z-index: 1;
    right: 0px;
}

The universal selector applies to all elements and then positions them to the top and left of -2147483648px That's a few miles out of the top left corner of your screen.... ;-)

Note from PMH â I think these negatives somehow got there when I was trying to position the main content on the screen and having some difficulty with my mouse dragging with the VWD Design View.

3. You had a height on the MainContent and the PageWrapper which I have removed. A fixed height is usually not a good idea. I also added clear: both on the #Footer.

*************

Thank you very much to Imar and the whole customer supportive approach of the Wrox team.