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.
Related
I have created a master page with a basic login page and applied css in it. But i get styles only for background and footer only, other divs does not get applied.
so i decided to create a web form and copied it without contentplaceholder it works
My css code:
http://pastebin.com/raw.php?i=0N6SzL5p
My css working Web form code:
http://pastebin.com/raw.php?i=QrvttGqN
Master page code:
http://pastebin.com/raw.php?i=C2LH0SrE
And its content login page:
http://pastebin.com/raw.php?i=GdQpWnVX
I'm a newbie in asp and i'm not trolling.
If it is a silly mistake please point it out and help me
Based on your stylesheet, the problem with the master page was that you should have a wrapper <div> that surrounds all of your nested elements.
A lot of your <div id="xx"> elements should be changed to <div class="xx"> as your stylesheet is CSS class definitions. e.g.
From:
<div id="top" runat="server">
and..
<div id="mainpage" runat="server">
and..
To:
<div class="top">
and..
<div class="mainpage">
and..
<div class="footer">
Complete Master Page Changes
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Demo.master.cs" Inherits="UI.Master.Demo" %>
<!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 id="Head1" runat="server">
<link href="../CSS/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="top">
<div class="topmiddle">
<div class="logreg" id="login_reg" runat="server">
Login
Register
</div>
<div class="userlog" id="user_logout" runat="server" visible="false">
Welcome<asp:Label ID="username" runat="server">!</asp:Label>
<a id="A3" href="Logout.aspx" class="atypesty" runat="server">LogOUT</a>
</div>
</div>
</div>
<div class="mainpage">
<table class="maintable">
<tr>
<td>
<img src="../Images/logo.jpg" class="logo" />
</td>
<td class="menucenter">
<ul id="Nav">
<li>
Home
</li>
<li id="Navprofile" runat="server">
<asp:LinkButton ID="lnbtn_Profile" runat="server"></asp:LinkButton>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="demo" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="footer">
<p>All words, images and code copyright ©2014 demo.com. All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
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/
I have a webpage in which I am using 2 jsp:include directives. Basically one is the header and other is the footer. The headers and footers are aligned correctly. But the central body of the main page is aligned to the left side.
This is the code of the page.
page.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<%#page contentType="text/html" import="java.util.*" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<jsp:include page="../top_and_left.jsp" flush="false"></jsp:include>
<div id="contenttext" align="center">
Hello World!!
</div>
<jsp:include page="../footer.jsp" flush="false"></jsp:include>
</body>
</html>
This is the code in the browser. I can see that there are lot of tags lying here and there because of the "jsp:include"s. But i dont know how to remove them.
The div tag with "Hello World" gets aligned in the left most corner of the page after the header and before footer elements. My header("top_and_left.jsp") as the name suggests has an 'L' shape with links in the left side of the page and a banner in the top. I want the div tag to come inside the L. I am able to do this in browsers ie8 and above but not in ie7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../css/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<div id="page" align="center">
<div id="toppage" align="center">
<div id="date">
<div class="smalltext" style="padding:13px;"><strong>Wed Jul 27 23:14:08 IST 2011</strong></div>
</div>
<div id="topbar">
--Links in the top right corner--
</div>
</div>
<div id="header" align="center">
<div class="titletext" id="logo">
<div class="logotext" style="margin:30px">Hire<span class="orangelogotext">Z</span>illa</div>
</div>
<div id="pagetitle">
<div id="title" class="titletext" align="right" >Welcome to HireZilla!</div>
</div>
</div>
<div id="content" align="center">
<div id="menu" align="right">
<div id="linksmenu" align="center">
--Left link panel menu--
</div>
</div>
</div>
<div id="contenttext" align="center">
Hello World!!
</div>
<div id="footer" class="smallgraytext" align="center" style="margin-left:225px" >
--Footer goes here--
</div>
</div>
</body>
</html>
This is the contenttext element in my css
#contenttext{
width:608px;
background-color:#F7F7F7;
border-left:solid 1px #999999; border-right:solid 1px #999999;
border-bottom:solid 1px #999999; border-top:dotted 1px #CCCCCC;
min-height:360px;
}
I am not sure whether I have put the question in the right way. I would be happy to clarify.
I dont want to crowd this page more with the css also. If you can let me know which elements you want to see, I can paste their code here.
Thanks in Advance
You are including a full html page within the body of another html page. This is causing all kinds of invalid html.
To fix this, strip all of the extra stuff out of footer.jsp and top_and_left.jsp. Remove the <html>, <head>, <body>, etc. The file should only include the html which you want injected into your body. This will likely clean up most of your issues.
i am having a html form in which i had given a theme. now i want to show that theme in div tag in asp page..
my html page is :
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body background="file:/C:/Documents and Settings/Desktop/themes/images8.jpg">
<form id="form1" runat="server">
<div>
<h1>
header_picture
</h1>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" style="width:480px; height:150px; background-position:centre;"/>
</div>
<div>
<h1>
here comes the content
</h1>
</div>
<div>
<h2>
footer_picture
</h2>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Blue hills.jpg" style="width:480px; height:150px; background-position:centre;" />
</div>
</form>
</body>
</html>
and i use the code to display the theme as :
<asp:Image ID="img1" runat="server" Width="80px" Height="80px" ImageUrl="~/themes/form.html"/>
but this is not showing any theme.
please help me out..
You are assigning an html page to ImageUrl attribute so it won't work.
Please map it to the required Image file if you want that image to be displayed in the webpage.
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">