I'm having a problem in that the content as displayed by my browser looks nothing like what is deisplayed for my master page/default page in a new website.
Although I have been through a couple of manuals for ASP.Net, this is my first effort at practicing creating my own site, so I've probably made some schoolboy error.
I created the new site using the ASP.NET website template, with the intention of stripping out what I don't need and rebuilding a new master page.
For some reason though, even though I've changed various colours and styles in the style sheet, and those changes appear in design view for both my default and master page, when viewed through a browser, it somehow seems to reset to the default colours used
in the website template.
e.g. design view
Browser view...
Before anyone suggests it's because the browser has better taste than me, the colours I chose were purely so I could pick out the different styles - I don't intend the page to look look like that. I know I could just start again with an empty website and
not have the problem, but I want to understand what the problem is, as I can't see why the design view and the browser view would have completely different colours.
One thing is please check there are more then one .css file added in your defalt.aspx page or check class name define in your style sheet with more than one time.
I only have one style sheet. I haven't added a sheet, nor any more styles.
Both the master page and the default page look the same in design view in terms of the styles used.
What's really confusing me, apart from the fact that I'm getting styles in my browser that don't seem to exist any more in my Css, is that even if I have made a mistake somewhere, I can't understand why it seems to work in design view.
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: White;
margin: 20px auto 0px auto;
border: 1px solid white;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: Green;
border: 1px Red solid;
color: Blue;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: Red;
color: green;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: Yellow;
color: Red;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
Other than adding one image file, nothing else has changed from the standard template. The other pages the template creates, such as login.aspx, have the same problem, so I'd guess it must be with the master page.
Thank you for posting this. It's not a "schoolboy error" in my opinion. I was having the same problem. Browser won't display what I JUST changed and what the Visual Studio Designer is showing me.
Arrg, there are so many variables involved in these things it's a wonder anything gets done.
RichardL1969
0 Points
7 Posts
Design View Styles/Colours not matching web browser
Jun 28, 2012 06:22 PM|LINK
I'm having a problem in that the content as displayed by my browser looks nothing like what is deisplayed for my master page/default page in a new website.
Although I have been through a couple of manuals for ASP.Net, this is my first effort at practicing creating my own site, so I've probably made some schoolboy error.
I created the new site using the ASP.NET website template, with the intention of stripping out what I don't need and rebuilding a new master page.
For some reason though, even though I've changed various colours and styles in the style sheet, and those changes appear in design view for both my default and master page, when viewed through a browser, it somehow seems to reset to the default colours used in the website template.
e.g. design view
Browser view...
Before anyone suggests it's because the browser has better taste than me, the colours I chose were purely so I could pick out the different styles - I don't intend the page to look look like that. I know I could just start again with an empty website and not have the problem, but I want to understand what the problem is, as I can't see why the design view and the browser view would have completely different colours.
Any ideas?
hirendaraji
Member
186 Points
39 Posts
Re: Design View Styles/Colours not matching web browser
Jun 28, 2012 06:45 PM|LINK
One thing is please check there are more then one .css file added in your defalt.aspx page or check class name define in your style sheet with more than one time.
RichardL1969
0 Points
7 Posts
Re: Design View Styles/Colours not matching web browser
Jun 28, 2012 07:00 PM|LINK
I only have one style sheet. I haven't added a sheet, nor any more styles.
Both the master page and the default page look the same in design view in terms of the styles used.
What's really confusing me, apart from the fact that I'm getting styles in my browser that don't seem to exist any more in my Css, is that even if I have made a mistake somewhere, I can't understand why it seems to work in design view.
hirendaraji
Member
186 Points
39 Posts
Re: Design View Styles/Colours not matching web browser
Jun 29, 2012 03:52 AM|LINK
can you provide your default.aspx page and your style.css file or give live link ,
so will check exactly what problem is
RichardL1969
0 Points
7 Posts
Re: Design View Styles/Colours not matching web browser
Jun 29, 2012 07:45 AM|LINK
OK.
Default page...
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
Master page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<table class="tableStyle1">
<tr>
<td width="135">
<asp:Image ID="ClubBadge" runat="server" ImageUrl="~/Images/mrfcsmall.png" />
</td>
<td>
Middle Rispley FC</td>
<td>
</td>
</tr>
</table>
</div>
<div class="clear">
<table cellpadding="5" class="tableStyle1">
<tr>
<td colspan="3">
<asp:Menu ID="NavigationMenu0" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</td>
</tr>
<tr>
<td rowspan="2">
</td>
<td>
<asp:ContentPlaceHolder ID="PagePicContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</td>
<td>
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus0" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</td>
</tr>
<tr>
<td rowspan="3">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</td>
<td rowspan="3">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Css
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: Orange;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: Red;
}
a:link, a:visited
{
color: yellow;
}
a:hover
{
color: blue;
text-decoration: none;
}
a:active
{
color: Purple;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: Orange;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: White;
margin: 20px auto 0px auto;
border: 1px solid white;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: White;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: white;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: green;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:White;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: Green;
border: 1px Red solid;
color: Blue;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: Red;
color: green;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: Yellow;
color: Red;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.tableStyle1
{
width: 100%;
}
Other than adding one image file, nothing else has changed from the standard template. The other pages the template creates, such as login.aspx, have the same problem, so I'd guess it must be with the master page.
RichardL1969
0 Points
7 Posts
Re: Design View Styles/Colours not matching web browser
Jun 29, 2012 12:07 PM|LINK
Schoolboy error indeed! - My browser was just caching and not showing the updated page. A cntr-F5 cured it.
Strange though that I never had a problem like that before. I've no idea how the browser decides to use the cache rather than the requested page.
mxqr5
Member
2 Points
1 Post
Re: Design View Styles/Colours not matching web browser
Mar 20, 2013 06:31 PM|LINK
Thank you for posting this. It's not a "schoolboy error" in my opinion. I was having the same problem. Browser won't display what I JUST changed and what the Visual Studio Designer is showing me.
Arrg, there are so many variables involved in these things it's a wonder anything gets done.