Recently, my company migrated to Windows 7 operating system.
I was using the following master file in Visual Studio 2010 on my Windows XP machine and everything was working fine, now that I migrated the following code to Windows 7 and same Visual Studio 2010, all the images below are moved to left. I can adjust them, but I am curious why all the images are moved to left, I am using the same monitor and Visual Studio 2010 version is same.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Login.master.cs" Inherits="Masters_Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../App_Themes/NG/style.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
div ,
div img { display:block }
.fl
{
float:left;
margin-left:15%;
background-color:#8e2826;
width:68.1%;
margin-right:18%;
text-align:center;
}
.f2
{
float:left;
margin-left:15%;
background-color:#e5e0dd;
width:68.1%;
margin-right:18%;
text-align:center;
}
.f3
{
float:left;
margin-left:15%;
background-color:#d4cfcd;
width:68.1%;
margin-right:18%;
text-align:center;
}
.style1
{
color: #8e2826;
}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body >
<form id="form1" runat="server" >
<div style="margin-left:15%; background-color:#343434; width: 68.1%; margin-right:18%; ">
<asp:Image ID="imgIS" ImageUrl="~/images/improved_LOGO.jpg" runat="server" />
</div>
<div class="fl" >
<asp:Image ID="imgTop" runat="server" ImageUrl="~/images/m_banner_top.jpg" />
</div>
<div class="f2">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/m_banner_btm_5.jpg" />
</div>
<div class="f3" ></div>
<div class="f3">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="margin-left:15%; margin-right:18%; width: 68.1%; background-color:#8e2826; text-align:center">
<asp:Image ID="banner" runat="server" ImageUrl="~/images/b_banner_calibri.jpg"/>
</div>
</form>
</body>
</html>
If you want to align them to the center of the page, add the following lines to you CSS:
width://fixed width;
margin-left: auto;
margin-right:auto;
Related
I am trying to make a semi-transparent background image for the entire page with the rest of the content layered over it (opaque). However, when I try to layer the divs, the pagecontent is semi-transparent as well. I've tried switching the z-indexes around and that doesn't change anything.
here are the two relevant styles
#backgroundImage
{
background-image: url('/Images/background.jpg');
background-size: 100%;
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
#PageWrapper
{
z-index: 2;
}
and here is the page markup
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Frontend.master.cs" Inherits="PTMS.MasterPages.Frontend" %>
<!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>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference runat="server" Path="~/Scripts/jquery-1.4.1.min.js"/>
</Scripts>
</asp:ScriptManager>
<div id="backgroundImage">
<div id="PageWrapper" >
<div id="Header">
<asp:SiteMapPath ID="MainMenuSiteMapPath" runat="server"></asp:SiteMapPath>
</div>
<div id="RightSide">
<UserControls:Sidebar ID="RightSidebar" runat="server" />
</div>
<div id="LeftSide">
<UserControls:Navbar ID="LeftSidebar" runat="server" />
</div>
<div id="MainContent">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<asp:LoginName ID="LoginName1" runat="server" FormatString="Logged in as {0}" />
<LoggedInTemplate>
(<asp:LoginStatus ID="LoginStatus1" runat="server" />)
</LoggedInTemplate>
</div>
</div>
</div>
</form>
</body>
</html>
Solved the problem. I moved the closing tag for the backgroundImage div so it was no longer wrapping the PageWrapper div, then set the opacity of the backgroundImage div and added position: absolute; to my PageWrapper.
To make the z-index work you also need to have position: absolute, relative, or fixed.
So your PageWrapper style did not have any of this position value, so its not work.
Also the backgroundImage layer must be alone and the pageWrapper must not be inside him.
See the final results: http://jsfiddle.net/EnUaK/
This is my CSS:
body {
text-align:center;
vertical-align:central;
width:480px;
height:800px;
}
#content {
width:100px;
height:200px;
background-image:url("../App_GlobalResources/TopBanner.png");
display:inline-block;
}
And my HTML (Master page):
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Mobile.master.cs" Inherits="m.mysite" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TestTitle</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
test1234
</div>
<form id="form1" runat="server">
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And i have a Default.aspx site which uses my masterpage, but it simple wont show my image..
if i make an img scr tag in the html it shows fine.. so the path is correct.. what else could it be?
'
This is the output HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
TestTitle
</title>
<link href="App_Themes/MobileTheme/MobileLayout.css" type="text/css" rel="stylesheet" /> </head>
<body>
<div id="header">
test1234
</div>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkNWnHplPoHce7cSIeDENrnMaUn20Ibq7H6yKbaedCCPw=" />
</div>
<div id="content">
test
</div>
</form>
</body>
</html>
Okay it works now, seems like Internet explorer was looking in the wrong folder.. must be somekind om Visual studio bug/setting i diden't notice..
I am having some problems with Safari.
While all browsers display the pages fine, Safari adds a huge white area above the main ContentPlaceholder as shown in the images below. This happens on every page so I guess the problem is in the master page but I can't figure out how to fix it.
There is also a small problem with some extra padding above the menu (same happens in Chrome)
I'd appreciate any help. thanks in advance.
Here is my master page:
<!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">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
................
</AnonymousTemplate>
<LoggedInTemplate>
................
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
................
</Items>
</asp:Menu>
</div>
</div>
<div class="leftMenu">
<asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"/>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And here is the source code and CSS: http://jsfiddle.net/V5aCa/6/
It is because you are using display:table safari treats this differently to other browsers
have a look at this question:
Safari 5.1 breaks CSS table cell spacing
or try using border-box:
CSS does the width include the padding?
Your space above the navigation appears because of the skip nav anchor, if you position this absolutely or float it your space should disappear
Try resetting the Margin and Padding of the browser.
body {
margin: 0px;
padding: 0px;
}
that should force safari to start from your set values rather than build up on its default.
Silly IE9 screwed up my layout of my aspx page.
In chrome it looks perfect:
However in EI9, it messed up my layout and made it look like this:
I've figured out why it looks the way it does. Apparently IE9 encapsulated my "save Note" button, description label, and description textbox in a div and made it float right. And the reason why the maincontent holder is displayed double, is because IE duplicated it but in the duplicated contentholder, it has not controls or anything in it. Just the background color.
Here is the html it generated:
<div class="mainContentHolder">
<span style="display: none;">
<label>File</label>
<label style="width: auto;" id="lblCaseFileID">2011630988 - </label>
</span>
<h3 id="quickNoteHeader">Quick Note: 2011630988 / 10/04/2012 08:47:12 <div style="float: right;">USES CURRENT DATE AND TIME<div></div></div></h3><div style="float: right;"><div>
<span>
<label class="inlineLbl">Description</label>
<input style="width: 82%;" id="txtDescription" name="txtDescription" type="text">
<span style="color: red; display: none;" id="ctl02" class="validation" title="Description is required">*</span>
<input style="width: 75px;" id="saveNote" onclick="saveNewQuickNote()" name="saveNote" value="Save Note" type="button">
</span>
</div>
<input id="hidCaseFileID" name="hidCaseFileID" value="2011630988" type="hidden">
<input id="hidInvestigatorLoggedOnID" name="hidInvestigatorLoggedOnID" value="25" type="hidden">
</div>
<div class="mainContentHolder">
<div style="float: right;">
</div>
And this is my .aspx page:
<!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>
</head>
<body>
<form id="form1" runat="server">
<div class="mainContentHolder">
<span style="display:none;">
<label>File</label>
<label style="width:auto;" runat="server" id="lblCaseFileID"></label>
</span>
<h3 runat="server" id="quickNoteHeader">Quick Note</h3>
<span>
<label class="inlineLbl">Description</label>
<input type="text" style="width:82%;" id="txtDescription" runat="server" />
<asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
<input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
</span>
</div>
<asp:HiddenField ID="hidCaseFileID" runat="server" />
<asp:HiddenField ID="hidInvestigatorLoggedOnID" runat="server" />
</form>
</body>
Any suggestions? I have no idea why IE did this or how to prevent it/fix it
EDIT:
css:.mainContentHolder
{
margin: 0px;
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
min-width:890px;
width:920px;
height:50px;
}
.mainContentHolder h3
{
font-size:13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-right: 1%;
}
.mainContentHolder label
{
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-bottom: 10px;
margin-right: 1%;
}
.mainContentHolder input
{
width:70px;
}
.ui-dialog
{
font-size:12px;
}
.ui-widget-header
{
background: #8D122B;
}
.ui-datepicker
{
font-size:12px;
}
#quickNoteHeader
{
color: Green;
}
EDIT - seems as though the layout does work in IE 10. But not IE9
correct your doctype
<!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>
</head>
and also set display block and width 100% of span
<span style="display:block;width:100%;">
<label class="inlineLbl">Description</label>
<input type="text" style="width:82%;" id="txtDescription" runat="server" />
<asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
<input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
</span>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
Is not valid HTML.
You want:
<!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>
</head>
And don't forget the closing </html> tag.
dear john when i put this code in my local website its working...
i think another css are conflict..
When the following markup renders, the menu renders as table topMainMenu with a height of 51. When I remove the Blueprint stylesheet, topMainMenu renders with a height of 20, the minimum I presume.
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/Blueprint/screen.css" />
<script src="<%# ResolveUrl("~/Scripts/jquery-1.4.4.js")%>" type="text/javascript"></script>
</head>
<body>
<form id="form" runat="server">
<div class="prepend-1 span-22 last">
<asp:Menu ID="topMainMenu" runat="server" DataSourceID="mainMenuDataSource" Orientation="Horizontal" Width="100%" Height="16px">
<StaticMenuStyle Height="10px" BackColor="Navy" />
</asp:Menu>
</div>
</form>
</body>
I was under the impression that Blueprint should have no effect on any height in this scenario. Surely a CSS reset wont be doing this? No styling I have tried can shrink the menu height below 51. What can I do?
This should override your blueprint css
<div class="prepend-1 span-22 last" style="height:20px;line-height:20px;">
OR
<style>
.adjustHeight {
height:20px; line-height:20px; margin:0; padding:0;
}
</style>
<div class="prepend-1 span-22 last adjustHeight">