I am trying to learn how to use templates in Web pages. Thanks to something I found on stackoverflow, I have the basics going. Now I want some control over the formatting. I found an example which looks nice so I thought I would use it to learn something. I'll show 2 images so the problem will be clear:
I don't really care about the form itself. It just serves as an example to learn something. There are a couple of things I would like to control over:
1) Notice in the original that the Company Name is placed nicely with respect to the jpeg image. In my case it is stuck to the left.
2) In the original if I expand the Firefox window the form stays centered and there is white space on both sides. In my case the Primefaces controls take the whole window and they are too high, cutting off part of the jpeg image.
I saw the original uses style.css so I tried to copy and paste different items, but nothing gave me the control I'm looking for. I'll show the only thing in style.css which makes any difference:
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
This is the beginning of the original form
<!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">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Xhtml18</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>SUPPORT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I tried putting in all the inner definitions, but they made no difference. I have my version much simpler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Master template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</h:head>
<h:body>
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<ui:insert name="AreaOne">Default text</ui:insert>
</h:body>
</html>
Finally in my xhtml file the crucial step which allows me to do the templating
<h:body>
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
So that the major point of templating seems to be working, just I need some more control over it. Sorry for the long message but I think I need it all to explain the problem.
EDIT:
I don't know how to add a file per se, so I'll spell it out as code
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #419725;
}
a:hover {
}
#wrapper {
margin: 0 auto;
padding: 0;
}
/* Header */
#header-wrapper {
height: 234px;
}
#header {
width: 950px;
margin: 0 auto;
padding: 0px 0px 0px 30px;
}
/* Logo */
#logo {
float: left;
width: 500px;
margin: 0px;
padding: 30px 0px 0px 60px;
color: #f7f7f7;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-size: 3.8em;
background: redc;
}
#logo h1 span {
color: #efc527;
}
#logo p {
margin: 0;
padding: 0px 0px 0px 0px;
font-size: 16px;
color: #fff;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #f7f7f7;
}
/* Search */
#search {
float: left;
width: 280px;
height: 40px;
padding: 0px;
}
#search form {
height: 40px;
margin: 0;
padding: 0px 0 0 10px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #e4e4e4;
color: #171d21;
}
/* Menu */
#menu {
float: right;
width: 950px;
height: 50px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: left;
margin: 0;
padding: 74px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 16px 20px 15px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #131618;
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 990px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: url(images/img03.jpg) repeat-y left top;
}
#page-bgtop {
padding: 40px 0px 20px 0px;
background: url(images/img02.jpg) no-repeat left top;
}
/* Content */
#content {
float: left;
width: 720px;
padding: 0px 0px 0px 0px;
}
.post {
margin-bottom: 40px;
border-bottom: 1px dotted #E7E2DC;
margin-right: 10px;
}
.post .title {
height: 41px;
padding: 7px 0px 0px 30px;
letter-spacing: -.5px;
}
.post .title a {
border: none;
color: #000;
}
.post .meta {
margin-bottom: 30px;
padding: 0px 30px 0px 30px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
margin: 0px;
padding: 0px 20px 0px 10px;
color: #fff;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #E7E2DC;
margin: 0px 30px;
border-left: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 15px;
}
#sidebar h2 {
height: 38px;
padding-left: 30px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #fff;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
color: #efc527;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 30px 0;
font-family: Arial, Helvetica, sans-serif;
border-top: 5px solid #4ac221;
width: 990px;
background: #262626;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #fff;
}
#footer a {
color: #fff;
}
Your brackground has the center attribute, that's why you've got your logo on the center and the text is not on it.
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
You can remove the center attribute or you can move the text by doing something like that (just an example!)
<div align="center"><h1>Company <span>Name</span></h1></div>
Then, to stop your primefaces' components to autoresize, you've got to override the default css.
I guess that you're using a PanelGrid, so you can try with
<p:panelGrid columns="2" style="width: 200px !important">....</p:panelGrid>
I'm not sure that !important is required, but basically you've got to give a fixed width to the component to stop it from auto-resizing
EDIT:
If you want to apply your style to every p:panelGrid component, you should consider overriding the whole css class.
Just take a look here to know the css class names of each primefaces component :
http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf
Related
My code is suppose to make a two-column layout, the header at the top, footer at the bottom, navigation at the left column in between the top and bottom, and finally the main at the right column. The problem is that the main is overlapping with the navigation column.
Here is the CSS for my file:
body { background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
margin-left:180px;
padding: 0px 20px 180px 0px;}
header { background-repeat: no-repeat;
height: 100px; }
h1 { white-space: nowrap;
overflow: hidden;}
h2 { color: #003366; }
h3 { padding-top: 10px;
color: #006600; }
nav { float: left;
width: 150px;
font-weight: bold;
font-size: 1.2em; }
nav a { text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px; }
nav a:link { background-color: #003366; }
nav a:visited{ background-color: #48751A; }
nav a:hover { border: 3px inset #333333; }
nav ul { list-style-type:none;
margin: 0;
padding-left: 0; }
dd { font-style: italic;
font-size: .90em;
height: 200%; }
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif; }
.floatleft { float: left;
padding: 0 20px 20px 0; }
.clear { clear:left; }
footer { font-size: .60em;
clear:both;
margin-left: 180px;}
img { border-style:none; }
#wrapper { background-color:#FFFFCC;
min-width: 700px;
max-width: 960px;
padding: 0px 0px 20px 30px;
border: 1px ridge blue;
width: 80%;
margin-right: auto;
margin-left: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;}
header, nav, main, footer {display:block;}
Here is one of my html5 files:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="prime.css"/>
<title>Prime Properties :: Financing</title>
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="primelogo.gif" width="650" height="100" alt="Prime Logo"></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Listings</li>
<li>Financing</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>Financing</h2>
<p>We work with many area mortgage and finance companies.</p>
<h3>Morgages FAQs</h3>
<dl>
<dt>What amount of morgage do I qualify for?</dt>
<dd>The total basic monthly housing cost is normally based on 29% to 41% of your gross monthly income<dd>
<dt>Which percentage is most often used?</dt>
<dd>The perecentage used depends on the lending institution and type of financing.</dd>
<dt>How do I get started?</dt>
<dd>Contact us today to help you arrange financing for your home</dd>
</dl>
</main>
<footer>
Copyright © 2014 Prime Properties<br>
Paul Clef Ube
</footer>
add this:
main{
float:left;
width:calc(100% - 150px);
}
I have added the new width (you might want to add a fallback) so the main always fit with your fixed sized nav (plus the padding on the wrapper)
Got the issue worked out. Just played around with your code a bit, thought you may find it useful.
Though calc() is tempting, it's not necessarily the best choice due to compat issues.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
}
header {
position: relative;
background: #003366 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/worldmap.png) no-repeat center 35%;
height: 100px;
margin-left: -21px;
margin-right: -21px;
overflow: hidden;
}
header img {
position: absolute;
top: 0;
left: 24px;
bottom: 0;
right: auto;
margin: auto;
display: inline-block;
max-width: 140px;
height: 65px;
}
h1 {
padding-left: 55px;
font-size: 25px;
line-height: 100px;
color: white;
}
h2 {
margin-bottom: 5px; color: #003366;
}
h3 {
margin: 2px 0px 6px;
padding-top: 15px;
color: #006600;
}
nav {
float: left;
display: inline-block;
margin: 0;
padding-top: 20px;
width: 150px;
font-size: 1.2em; }
nav a {
display: inline-block;
width: 100%;
text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
margin: 2px 0;
}
nav a:link {
background-color: #003366;
}
nav a:visited {
background-color: #48751A;
}
nav a:hover {
border: 3px inset #333333;
}
nav ul {
list-style-type:none;
}
dt {
}
dd {
display: inline-block;
margin: 4px 0 10px 18px;
line-height: 1.2;
font-style: italic;
font-size: .90em;
height: 200%;
}
dt:first-child {
margin-top: 15px;
}
.contact {
font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif;
}
.floatleft {
float: left;
padding: 0 20px 20px 0;
}
.clear {
clear:left;
}
footer {
font-size: .60em;
width: 100%;
clear: both;
}
img {
border-style: none;
}
#wrapper {
background-color: #FFFFCC;
width: 80%;
min-width: 700px;
max-width: 960px;
padding: 30px 20px 15px;
border: 1px ridge blue;
margin: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
main {
padding: 20px 0px 20px 20px;
display: inline-block;
width: 100%;
max-width: 77%;
}
I see you have a class "floatleft", but you never assign it to anything.
Try giving your elements locations. For instance if you wanted something to float left tell it how from from the left it should go. In your CSS you may trying something like this in .floatleft{ float: left; left: 10px}. .floatright{ float: right; right: 10px;}.
I have not had much experience working with the site.master or site.css before, so i do not know where am going wrong.
I have set a footer and a header in my applicaiton, in the design view everything shows up fine. But when i debug it in local, the header does not show; whereas the footer does.
Can anyone help me.
Thanks!
html:
<!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 id="Head1" 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 id="Form1" 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>
[ Log In ]
</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>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" 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>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer" style="clear: both; text-align:center ; padding: 30px; background-color:Olive; border: 0px solid #DBDDDE; color:White ">
Copyright 2013 IndieRevo
</div>
</form>
</body>
</html>
Output:
Line 1: error: expected identifier or '(' before '{' token
Line 1: error: stray '#' in program
Line 3: error: expected identifier or '(' before '<' token
Site.css:
http://codepad.org/vcCs4AN9
css:
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
background-image: url('/Images/utensilsheader.png');
}
test
{
background-image: url(../images/1.png);
position: relative;
margin: 0px;
padding: 0px;
width: auto;
height: 255px;
top: 0px;
left: 1px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
background-image: url('/Images/utensilsheader.png');
}
h2
{
font-size: 1.5em;
font-weight: 600;
background-image: url('/Images/utensilsheader.png');
}
h3
{
font-size: 1.2em;
background-image: url('/Images/utensilsheader.png');
}
h4
{
font-size: 1.1em;
background-image: url('/Images/utensilsheader.png');
}
h5, h6
{
font-size: 1em;
background-image: url('/Images/utensilsheader.png');
}
/* this rule styles and 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: 1080px;
background-color: White;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background-image: url('/Images/utensilsheader.png');
width: auto;
height: 255px;
top: 0px;
left: 1px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
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: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
display:none;
}
div.menu
{
padding: 4px 0px 4px 8px;
display:none;
}
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: White;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
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: none;
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;
}
Here is one of the bugs - h1 color is White. It's why you cannot see it in white background.
Here is how you debug in browser. FireFox has FireBug.
I hope this will help you keep going.
Debug in IE
Debug In Chrome
I have create a website using asp.net and when I render the the website on firefox and IE the website look the same and when rendering it on Chrome it move the button lower and changes the location of it
this is my master page code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="UMSite.master.cs" Inherits="WebApplication4.UMSiteMaster" %>
<!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/UM.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1><img alt="" src="Styles/UMHeader.png" width= "950" height= "65" /></h1>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>
</Items>
</asp:Menu>
</div>
</div>
</div></h1>
<div class="main" runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</form>
</body>
</html>
the below is the css
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
height: 192px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
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: 950px;
height:auto;
background-color: #fff;
margin: 10px auto 5px auto;
border: 1px solid #496077;
}
.header
{
position:relative;
margin: 0px;
padding: 0px;
background: #E30613;
width: 100%;
top: 0px;
left: 0px;
height: 90px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #E30613;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 0px 0px 0px;
min-height: 630px;
width:auto;
background-image:url('UMBackground.png');
}
.leftCol
{
padding: 6px 0px;
margin: 0px 0px 0px 0px;
width: 200px;
min-height: 200px;
width:auto;
}
.footer
{
color: #4e5766;
padding: 0px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#E30613;
width: 950px;
height: 35px;
margin-top: 0px;
}
div.menu
{
padding: 1px 0px 1px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 5px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #E30613;
border: 1.25px #00BFFF solid;
color: #F5FFFA;
display:inline;
line-height: 1.35em;
padding: 10px 30px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000000;
color: #F5FFFA;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #E30613;
color: #cfdbe6;
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: 947px;
height: 132px;
}
.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;
}
This is just the way webkit browsers (safari and chrome, etc) render the html file input type.
See this jsbin for an example of the file input tag.
See HTML input type="file" in Chrome does not show textbox for a previous answer.
I'd tell you to look up "css/html browser fixes". Different browsers show webpages differently. Internet Explorer is often the browser with the biggest visual differences.
Of course the page will look different on different browsers.
You have body {font-size: .80em;} and the em is a relative size, which means that the font size on the web page is 80% of the browser's default font size.
Since the browser's default size can vary (it is always user selectable) this means that you can't use this method if you aim for browser interoperability. Ditto with the line height.
Either keep the user's preferences (and accept that different users will see different things), or choose a font size in pixels or points.
Note that if you have set a size this way in the body, you can use em elsewhere, which will then be relative to this body size. So things like h3 {font-size:1.2em} are perfectly OK.
I have written this styles:
but it doesnt works well in IE
it appear in IE like this: http://fb812yh3737x2812.byethost3.com/IE.png
but i wanna be like this in chrome : http://fb812yh3737x2812.byethost3.com/chr.png
/*css template designed by AmzMohammad*/
body {
margin: 0px;
padding: 0px;
background: url(images/img01.jpg) repeat left top;
font: 14px B Nazanin, Helvetica, sans-serif;
color: #212121;
}
h1, h2, h3 {
margin-top: 0px;
}
h1 {
font-size: 3.0em;
}
h5 {
font: 45px "IranNastaliq","B Nazanin" ,Helvetica, sans-serif;
}
h7 {
margin-bottom: 0px;
font: 33px "Forte","Times New Roman (Headings CS)","Times Roman","Arial (Body CS)","Adobe Caslon Pro Bold","Agency FB","arial", Helvetica , sans-serif ;
}
h2 {
font-size: 1.8em;
}
h6 {
font-size: 1.1em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.0em;
}
p, ol, ul {
margin-bottom: 0em;
line-height: 160%;
}
a {
color: #393939;
}
a:hover {
text-decoration: none;
color: #393939;
}
a img {
border: none;
}
/* Header */
#header {
width: 900px;
height: 150px;
margin: 5px auto;
background: #393939;
}
#header a {
text-decoration: none;
color: #FFFFFF;
background: #393939;
}
/* Logo */
#logo {
float: left;
padding-left: 375px;
padding-right: 275px;
background: url(images/head.jpg) no-repeat left 100% ;
}
#logo h1, #logo p {
margin: auto;
line-height: normal;
font-weight: normal;
color: #393939;
}
#logo p {
padding-left: 0px;
}
#logo h1 {
padding: 25px 0px 0px 0px;
}
#logo h5 {
margin: 0px;
padding: 5px 0px 0px 0px;
}
#logo h7 {
margin-top: 0px;
padding: 5px 0px 0px 0px;
}
#logo h4 {
margin: 0px;
padding: 0px 0px 0px 0px;
}
#logo a {
color: #393939;
}
/* Menu */
#menu {
list-style: none;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 900px;
background: #393939;
}
#menu ul {
margin: 0px 0 0 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
font: 120% "B zar" ,"Adobe Arabic";
margin: 0;
padding: 0;
background: #393939;
}
#menu a {
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
background: #393939;
}
#menu a:hover {
background: #cff;
color:#393939;
color:#393939;
}
#menu .first {
background: none;
}
#menu .active a {
}
/* Page */
#page {
width: 900px;
margin: 3px auto;
padding: 30px 0px;
}
/* Content */
#content {
float: left;
width: 570px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
border-bottom: #BFC9AE dashed 1px;
color: #232F01;
}
.post .title a {
color: #232F01;
}
.post .entry {
}
.post .meta {
font-weight: bold;
}
.post .byline {
margin: 0px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
}
#sidebar-bgtop {
height: 3px;
}
#sidebar-bgbtm {
height: 3px;
}
#sidebar-content {
padding: 0px;
}
#sidebar ul {
margin: 15px;
padding: 0px;
list-style: none;
}
#sidebar li ul {
margin-bottom: 1.8em;
list-style: none;
}
#sidebar li li {
padding: 5px 0;
border-bottom: #BFC9AE dashed 1px;
}
#sidebar h2 {
padding: 4px 20px;
background: #393939;
font-size: 1.2em;
color: #FFFFFF;
}
#sidebar a {
text-decoration: none;
color: #232F01;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar h6 {
margin: 0px;
padding: 0px 0px 0px 0px;
}
/* Search */
#search {
}
#search form {
margin-bottom: 1.8em;
padding: 0px;
}
#search fieldset {
margin: 0px;
padding: 0px;
border: none;
}
#search #s {
width: 160px;
}
/* Footer */
#footer {
clear: both;
width: 900px;
height: 50px;
margin: 0px auto 30px auto;
color: #FFFFFF;
background: #393939;
}
#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}
#footer a {
color: #FFFFFF;
}
cheers
the html of header :
<div id="header">
<div id="logo">
<h7 align="center">Mohammad Mahmoodi</h7>
<p>Department of Computer Engineering, Faculty of Engineering, University of Isfahan</p>
</div>
<!-- end #logo -->
<div id="menu">
<ul>
<li class="first">Home</li>
<li>Teaching & Courses</li>
<li>Curriculum Vitae</li>
<li>Students</li>
<li>Research Interests</li>
<li>Publications</li>
<li>attraction point</li>
<li>Font</li>
<li>Farsi</li>
</ul>
</div>
<!-- end #menu -->
</div>
When you downloaded that font, (because I assume that's not a standard font) it may have come in .TTF format, IE doesn't always recognise these files try converting it to .EOT and embed it on the site for more modern versions of IE compatibility.
This generally only works for IE but i suppose if chrome is already recognising it you will most probably be OK for other browser
** EDIT November 17th **
Hi again, I wanted to show some code you can use to gracefully solve this issue. Make a blackbird.js file with the line commented out as mentioned in the accepted answer. Place it somewhere in your webapp directory (I put mine in /scripts/blackbird_1_0) along with the other Blackbird resources (blackbird_icons.png, blackbird_panel.png,blackbird.css, spacer.gif) and then add this as the configuration for blackbird as below. If you happen to use 5.2 and beyond, you might want to consider just disabling Blackbird altogether, I personally would love to do this but am stuck on 5.1 due to company restraints.
//IE bug fix
configuration.add("tapestry.blackbird", "context:/scripts/blackbird_1_0/");
// configuration.add(SymbolConstants.BLACKBIRD_ENABLED, "false"); Not available until 5.2
** END Edit **
I have a gradient background image in my web application, it goes from dark at the top to light at the bottom. In Firefox, this image is handled properly, where upon scrolling vertically downwards on the page, the dark top section disappears.
However, when I started testing in IE (I'm using IE8) the background image stays fixed behind the screen as you vertically scroll, meaning the dark top section of the background image is always rendered at the top of the IE view.
I've set the background tag to have scroll defined, which from all I can tell should solve the problem, but IE is not happy.
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
I made sure to be clearing the data in IE in case it was caching the old style before I added scroll.
Textual representation of issue (x = darkest, o = dark, _ = light, - = lightest)
Firefox:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
--------------------------------------
--------------------------------------
--------------------------------------
IE:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
Current CSS:
body {
margin: 0;
padding: 0;
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
}
Source of a page with the issue:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
<title>Merchant / Partner Login</title>
<link type="text/css" rel="stylesheet" href="/assets/tapestry/5.1.0.5/default.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/blackbird/5.1.0.5/blackbird.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/ctx/1.0-SNAPSHOT/layout/layout.css"></link>
<meta content="Apache Tapestry Framework (version 5.1.0.5)" name="generator"></meta>
<script src="/assets/scriptaculous/5.1.0.5/prototype.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/scriptaculous.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/effects.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry.js" type="text/javascript"></script>
<script src="/assets/blackbird/5.1.0.5/blackbird.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry-messages.js" type="text/javascript"></script>
</head>
<body><!-- start header -->
<div id="header">
<div id="logo">
<h1></h1>
</div>
<div id="menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li class="current_page_item">d</li>
<li>e</li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li style="background: none;" id="search"></li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2>Merchant / Partner Login</h2>
</div>
<div class="entry">
<!-- Most of the page content, including <head>, <body>, etc. tags, comes from Layout.tml -->
<!-- snip content -->
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer --><div id="footer"><p class="legal"></p></div><!-- end footer -->
</body>
</html>
Added after isolating issue to Tapestry component tags
Find the Tapestry built in CSS below, somewhere in here there must be a line that is breaking the ability of body to use scroll on the background image?
/* Tapestry styles all start with "t-" */
DIV.t-error {
border: 1px solid red;
padding: 0px;
margin: 4px 0px;
}
DIV.t-error DIV {
padding: 2px;
display: block;
margin: 0px;
background-color: red;
color: white;
font-weight: bold;
}
DIV.t-error UL {
margin: 2px 0px;
background-color: white;
color: red;
}
DIV.t-error LI {
margin-left: 20px;
}
HTML>BODY DIV.t-error LI {
margin-left: -20px;
}
.t-invisible {
display: none;
}
LABEL.t-error {
color: red;
}
INPUT.t-error, TEXTAREA.t-error {
border-color: red;
font-style: italic;
color: red;
}
IMG.t-error-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(field-error-marker.gif);
}
IMG.t-autoloader-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(ajax-loader.gif);
}
IMG.t-sort-icon {
margin-left: 4px;
}
DIV.t-exception-message {
font-style: italic;
font-size: 12pt;
border: thin dotted silver;
margin: 5px 0px;
padding: 3px;
}
DIV.t-exception-report, DIV.t-env-data {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-exception-report LI {
margin-left: -40px;
}
DIV.t-exception-report DT, DIV.t-env-data DT {
color: green;
padding-left: 2px;
background-color: #FFFFCF;
}
DIV.t-exception-report LI {
list-style: none;
}
SPAN.t-exception-class-name {
display: block;
margin-top: 15px;
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
SPAN.t-exception-stack-controls {
display: block;
float: right;
}
UL.t-stack-trace LI {
font-family: Monaco, Times, monospace;
font-size: 10pt;
margin-left: -25px;
list-style: square;
}
LI.t-usercode-frame {
font-weight: bold;
color: blue;
}
LI.t-omitted-frame {
display: none;
color: gray;
list-style: square;
}
H1.t-exception-report {
font-family: "Trebuchet MS", Arial, sans-serif;
color: red;
}
DIV.t-exception-report DT:after {
content: ":";
}
DIV.t-exception-report DD, DIV.t-env-data DD {
margin-left: 10px;
}
TABLE.t-data-table {
border-collapse: collapse;
margin: 0px;
padding: 2px;
}
TABLE.t-data-table TH {
background-color: black;
color: white;
}
TABLE.t-data-table TD {
border: 1px solid silver;
margin: 0px;
}
DIV.t-beaneditor {
display: block;
background: #ffc;
border: 2px outset brown;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-beaneditor-row {
padding: 4px 0px 2px 0px;
}
DIV.t-beaneditor-row LABEL:after {
content: ":";
}
DL.t-beandisplay {
display: block;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
background: #CCBE99;
border: 2px outset black;
width: auto;
}
DL.t-beandisplay DT {
width: 250px;
display: inline;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
DL.t-beandisplay DT:after {
content: ":";
}
DIV.t-beaneditor-row LABEL {
width: 250px;
display: block;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
INPUT.t-number {
text-align: right;
}
DIV.t-beandisplay DIV.t-beandisplay-label {
padding-right: 5px;
}
TABLE.t-data-grid THEAD TR {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid THEAD TR TH {
text-align: left;
padding: 3px;
white-space: nowrap;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
TABLE.t-data-grid {
border-collapse: collapse;
border-left: 1px solid silver;
}
TABLE.t-data-grid TBODY TR TD {
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 2px;
}
DIV.t-data-grid {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-data-grid-pager {
margin: 8px 0px;
}
DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
text-decoration: none;
color: black;
padding: 2px 5px;
font-size: medium;
border: 1px solid silver;
margin-right: 5px;
}
DIV.t-data-grid-pager A:hover {
border: 1px solid black;
}
DIV.t-data-grid-pager SPAN.current {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid TR TH A {
color: white;
}
IMG {
border: none;
}
DIV.t-env-data-section {
padding-left: 5px;
}
DIV.t-env-data DD, DIV.t-exception-report DD {
margin-left: 25px;
margin-bottom: 10px;
}
DIV.t-env-data LI {
margin-left: -25px;
}
DIV.t-env-data-section {
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
TABLE.t-location-outer {
padding: 5px;
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}
TD.t-location-line {
width: 40px;
text-align: right;
padding: 0px;
background-color: #E1E1E1;
padding-right: 3px;
border-right: 1px solid black;
}
TD.t-location-content {
border-top: 1px solid silver;
border-right: 1px solid black;
white-space: pre;
}
TD.t-location-current {
background-color: #FFFFCF;
}
TD.t-location-content-first {
border-top: 1px solid black;
}
DIV.t-palette {
display: inline;
}
DIV.t-palette SELECT {
margin-bottom: 2px;
width: 200px;
}
DIV.t-palette-title {
color: white;
background-color: #809FFF;
text-align: center;
font-weight: bold;
margin-bottom: 3px;
display: block;
}
DIV.t-palette-available {
float: left;
}
DIV.t-palette-controls {
margin: 5px 5px;
float: left;
text-align: center;
}
DIV.t-palette-controls BUTTON {
display: block;
margin-bottom: 3px;
}
DIV.t-palette-controls BUTTON[disabled] IMG {
filter: alpha(opacity = 25);
-moz-opacity: .25;
}
DIV.t-palette-selected {
float: left;
clear: right;
}
DIV.t-palette-spacer {
clear: left;
}
IMG.t-calendar-trigger {
padding-left: 3px;
cursor: pointer;
}
DIV.t-autocomplete-menu {
z-index: 9999;
}
DIV.t-autocomplete-menu UL {
border: 2px outset #cc9933;
background-color: #cc9933;
padding: 4px 6px;
overflow: auto;
}
DIV.t-autocomplete-menu LI {
color: white;
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;
cursor: pointer;
}
DIV.t-autocomplete-menu LI.selected {
color: black;
font-weight: bold;
}
DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.gif') no-repeat;
display: block;
line-height: 28px;
margin-left: 0px;
padding: 0px 5px 10px 22px;
}
HTML>BODY DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.png') no-repeat;
}
DIV.t-error-popup {
background: transparent url('error-bevel-right.gif') no-repeat scroll top right;
cursor: pointer;
color: #FFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 39px;
margin-right: 6px;
padding-right: 29px;
text-decoration: none;
}
HTML>BODY DIV.t-error-popup {
background: transparent url('error-bevel-right.png') no-repeat scroll top right;
}
UL.t-data-list LI {
list-style-type: square;
}
DIV.t-loading {
display: inline;
width: auto;
font-weight: bold;
padding-right: 20px;
background: transparent url(ajax-loader.gif) no-repeat right top;
}
DIV.t-dialog-overlay {
position: fixed;
margin: auto;
top: 0px;
left: 0px;
z-index: 9990;
width: 100%;
height: 100%;
background: transparent url("dialog-background.gif");
}
DIV.t-page-loading-banner {
position: absolute;
top: 5px;
left: 5px;
width: auto;
font-weight: bold;
padding: 2px 4px 2px 24px;
color: black;
background: white url(ajax-loader.gif) no-repeat 4px center;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
This is an old query and you probably have an answer by now but I had this problem whenever some js was included in a page (even unintentionally), blackbird.js was being included (the client-side debug div provided by Tap) - it has some IE specific code that stops the bg image being fixed - I had to use my own local patched version of blackbird.js to get around the issue. Comment Line 117 blackbird.js:
bodyTag.style.backgroundAttachment = 'fixed';
By doing the following,
body
{
background: url( yourBG ) repeat-x;
}
you should not have any problem... Your background will scroll as intended.
If this wasn't helpful, try updating your question by adding some more code example of what you're doing.
ADDED AFTER POSTING COMMENTS :
HTML :
<body>
<div id="background"></div>
<div id="yourContent">
...
</div>
</body>
CSS :
#background
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(images/bg_slice.png) repeat;
z-index: 1;
}
...
I've used that approach more than once, so I am positive it SHOULD work.