I am using Nreco PdfGenerator to generate pdf from HTML. Everything is fine but characters are so close to each other and it is not easy to read.
Is there any way to fix this issue?
HTML version
PDF version
This is my CSS
<style type="text/css" media="screen">
body { line-height: 18px; font-family: Arial, sans-serif; font-size: 12px; background: #fff; text-rendering: optimizeSpeed; }
.topButton { width: 880px; margin: 0 auto; padding: 10px; background: #fff; border-bottom: 2px solid #007182; }
.mainTable { width: 880px; margin: 0 auto; padding: 10px; background: #fff; /*border: 1px solid red;*/ }
.just { text-align: justify; }
.detailItinerary { width: 100%; border: 10px solid red; }
.dailyTitle { color: #4C9897; margin-top: 10px; display: block; font-size: 12px; }
.serviceRowsWithBorder { width: 100%; border-bottom: 1px solid #007182; padding: 10px 0; }
.serviceRowsWithoutBorder { width: 100%; padding: 10px 0; }
.topLink { text-decoration: none; color: #C74E1B; }
</style>
<style media="print">
.topButton { display: none; }
#page { size: auto; margin: 7mm; }
body { background: #fff; margin: 0; font-family: Arial, sans-serif; font-size: 12px; text-rendering: optimizeSpeed; }
.mainTable { width: 100%; margin: 0 auto; padding: 10px; background: #fff; /*border: 1px solid red;*/ }
.just { text-align: justify; }
.dailyTitle { color: #4C9897; margin-top: 10px; display: block; font-size: 12px; }
.serviceRowsWithBorder { width: 100%; border-bottom: 1px solid #007182; padding: 10px 0; }
.serviceRowsWithoutBorder { width: 100%; padding: 10px 0; }
</style>
Setting the 'CustomWkHtmlArgs' property with the "--dpi 300" option fixed this problem for me, e.g.
return new HtmlToPdfConverter
{
Orientation = PageOrientation.Portrait,
PageHeaderHtml = "<br/>",
PageFooterHtml = "<div style=\"font-family: Arial;\">Page: <span class=\"page\"></span> of <span class=\"topage\"></span></div>",
CustomWkHtmlArgs = "--dpi 300",
};
This is very vaguely explained on the NReco PDF website, but without it actually explaining how to set the property.
Related
This is sort of the same issue I asked here: Cannot get two CSS elements to be next to each other
However, this time, it's messing up when I added an iframe. I tried applying different styles, even to the iframe, but it doesn't appear to be working. I also messed with the CSS of the ul and li that I added to the side nav bar (didn't help, though changing the ul property to display: table-row; did fix another issue I had with something else.)
My main plan was to have an iframe to another group of pages. (My restaurant pages might have more than one tab for each restaurant, but I had been wondering how to have a "back" thing to my ski resort (where the restaurants are) so the user could go back to them. I then thought, why not just have an iframe instead?
However, once I added the iframe, the trouble I had before (see previous stack overflow link above) suddenly came back.
main.css:
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
.floatleft
{
float: left;
}
.floatright
{
float: right;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 800;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 110%;
}
nav#vert
{
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./snow_mountain.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;
}
footer > a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1050px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 750px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
font-size: 110%;
}
nav#hor a
{
color: rgb(0 0,238);
}
nav#hor > div > a
{
color: #ccccff;
text-decoration: none;
font-size: 100%;
}
nav#hor>div:hover
{
background-color: #018802;
}
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 36px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
h3
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}
#text-container
{
border: 2px solid cyan;
width: 1005px;
height: 690px;
*/ zoom: 1;
*/ margin: 0;
display: table-cell;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.left img
{
float: left;
padding: 0 20px 20px 0;
}
.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.right img
{
float: right;
margin: 0px 0px 15px 20px;
border: 1px solid transparent;
}
.right > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
nav#hor ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
}
nav#hor ul li:hover
{
background-color: #018802;
}
nav#vert ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
display: table-row;
}
nav#hor li
{
float: left;
border: 1px solid white;.
}
nav#vert li
{
float: left;
border: 1px solid white;.
}
nav#vert li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
nav#vert li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
li.dropdown {
display: inline-block;
}
.dropdown-content ul li
{
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: rgb(0, 0, 238);
z-index: 1;
}
#eAndADropdown
{
}
#restaurantDropdown li
{
background-color: #000044;
border: 1px solid white;
}
#restaurantDropdown ul
{
border: 1px solid white;
}
#restaurantDropdown:hover
{
background-color: #018802;
}
#restaurantDropdown a
{
color: rgb(0, 0, 238);
}
.dropdown-content a {
color: rgb(0, 0, 238);
border: 1 px solid white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
li a
{
color: rgb(0, 0, 238);
}
testingMongoose.php
<html>
<head>
<title> The Mountains </title>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" href="./ski_icon.png">
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$("#container").css("height", 800);
});
</script>
</head>
<body>
<?php include 'topandside.php';?>
<div id="text-container">
<iframe src="./index.php" width=700; height=620;></iframe>
</div>
</div>
</div>
<?php include 'footer.php';?>
</div>
</body>
</html>
This time, having display: table-cell; for both nav#vert and #text-content doesn't appear to be enough like it was before.
float: left on the nav#vert seems to have fixed that issue, though it broke some other things (though I should be able to fix those.)
I have a WordPress site, with installed theme Enfold and the MemberMouse plugin.
I have also made some signup,login pages by using Membermouse.
But my login page is not nice.: http://i.stack.imgur.com/Vwy6b.png
I want to it make like this one or similar:http://i.stack.imgur.com/tR145.png
( reflexionyoga(dot)com/login/ )
Can someone guide me how to change CSS styles and make the changes?
Thanks
Here's a Styling page you could use:
body{
padding-left:20px;
margin: 0;
padding: 0;
text-align: left;
font-family: verdana, tahoma, arial, sans-serif;
background-color: #ACE367;
color: black;
}
p{
font-size: 15px;
margin: 10px;
padding-left: 15px;
}
a{
font-size: 15px
color: #958F81;
text-decoration: none;
}
h1{
color:#191970;
text-align: left;
font-size: 20px;
margin: 10px;
padding-left: 20px;
}
.big{
color: #191970;
font-size: 60px;
}
h2{
text-align: left;
font-size: 15px;
margin: 15px;
padding-left: 20px;
}
img{
border-radius: 8px;
border: 1px solid #ddd;
display: block;
margin: auto;
}
ul {
padding-left: 10px;
padding-top : 0;
list-style-type: none;
margin: 0;
padding: 50px;
width: 200px;
background-color: #ACE367;
font-family: "Lucida Console", Monaco, monospace;
}
li a {
display: block;
color: #000;
padding: 5px 10px;
text-decoration: none;
border-bottom: 1px solid #555;
}
li a:hover {
background-color: #555;
color: white;
}
.note{
color:red;
font-size:10px;
}
input, select {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
padding-left: 20px;
padding-right: 20px;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
form {
padding-left: 50px;
padding-right: 600px;
padding-bottom: 20px;
padding-top: 15px;
}
.body-cen{
padding-left: 250px;
padding-right: 250px;
padding-bottom: 50px;
padding-top: 25px;
}
.pd{
padding-left:30px;
}
hr {
width:100%;
height:2px;
background: #fff
}
input[type=radio]{
padding-left:0;
}
p{
padding-left:10px;
}
I'm setting up a Jekyll page and the current theme I'm using uses Sass, but GitHub pages (where I'm hosting it) does not support Sass. So I'm trying to convert my .scss files to .css but I'm getting the an error on this file:
---
---
#import 'syntax';
$site-background-color: #f5f5f5;
$contrast-color: #333;
$azul-accent-color: #0070bb;
$ruby-accent-color: #e0115f;
$amber-accent-color: #ff7e00;
$avocado-accent-color: #568203;
/*============================================================================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: $site-background-color;
border-top: 5px solid $contrast-color;
font-family: 'Source Sans Pro', sans-serif;
color: $contrast-color;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl,
blockquote,
table,
img,
hr,
.fluid-width-video-wrapper,
.highlight {
margin-bottom: 20px;
}
blockquote {
padding: 0 30px;
border-left: 2px solid darken($site-background-color, 15%);
}
ul, ol {
margin-left: 40px;
}
img {
max-width: 100%;
height: auto;
border: none;
outline: none;
}
a {
text-decoration: none;
}
hr {
border : 0;
height: 25px;
background : url(/public/images/eagle.png) center center no-repeat;
}
code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-size: .8rem;
}
p code {
padding: 0px 5px;
border: 1px solid #ddd;
background-color: #f8f8f8;
border-radius: 3px;
white-space: nowrap;
}
table {
border-collapse: collapse;
border: 1px solid $contrast-color;
td, th {
border: 1px solid $contrast-color;
padding: 5px 10px;
}
thead {
background-color: darken($site-background-color, 10%);
}
}
// TODO: make dt smaller
dt {
float: left;
width: 30%;
font-weight: bold;
}
dd {
float: right;
width: 70%;
}
footer {
font-size: .8rem;
text-align: center;
}
/*============================================================================*/
.azul { a { color: $azul-accent-color;
&:hover { color: darken($azul-accent-color, 20%);
}}}
.ruby { a { color: $ruby-accent-color;
&:hover { color: darken($ruby-accent-color, 20%);
}}}
.amber { a { color: $amber-accent-color;
&:hover { color: darken($amber-accent-color, 20%);
}}}
.avocado { a { color: $avocado-accent-color;
&:hover { color: darken($avocado-accent-color, 20%);
}}}
/*----------------------------------------------------------------------------*/
.highlight {
padding: 30px;
border-radius: 6px;
background-color: #272822;
color: #f8f8f2;
line-height: 1;
code {
font-size: .7rem;
}
}
.container {
max-width: 750px;
padding: 0 20px;
}
.center {
text-align: center;
}
.right {
float: right;
margin: 0 0 20px 20px;
}
.left {
float: left;
margin: 0 20px 20px 0;
}
.top-navbar {
margin-bottom: 40px;
height: 110px;
a {
display: inline-block;
color: $contrast-color;
padding: 66px 20px 25px;
margin-right: 10px;
margin-top: -5px;
text-transform: uppercase;
border-radius: 0 0 5px 5px;
border-bottom: 1px solid lighten($contrast-color, 10%);
transition: all ease-in-out .3s;
&:hover,
&.current-page {
color: $site-background-color;
border-bottom: none;
}
&:hover {
background-color: $contrast-color;
transform: translateY(5px);
}
&.current-page {
background-color: $contrast-color;
}
}
}
.archive,
.single {
margin-bottom: 100px;
}
.single {
font-size: 1.125rem;
line-height: 28px;
}
.single time {
color: #999;
font-size: .9rem;
}
.bundle {
border-top: 1px solid lighten($contrast-color, 50%);
padding-top: 10px;
margin-bottom: 10px;
}
.post-date {
text-align: right;
}
.not-found {
margin-top: 150px;
text-align: center;
font-size: 2rem;
}
.not-found h1 {
font-size: 8rem;
}
dl,
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
dl,
.clearfix:after {
clear: both;
}
/*============================================================================*/
#logo {
display: inline-block;
height: 110px;
width: 110px;
background-size: 90px 90px;
background-position: left center;
background-repeat: no-repeat;
}
/*============================================================================*/
#media screen and (max-width: 767px) {
.top-navbar {
height: 35px;
text-align: center;
margin-top: 40px;
a {
padding: 5px 10px;
margin: 5px;
border-radius: 0;
border: 1px solid $contrast-color;
transition: none;
&:hover {
transform: none;
}
}
}
.bundle,
.post-date {
text-align: center;
}
.bundle article {
margin-bottom: 30px;
}
#logo {
background-position: center center;
}
}
The error is:
Line 1: Invalid CSS after "-": expected number or function, was "--"
I imagine there is a quick fix for this that I am missing since I am not familiar with Sass at all. Am I right? Anyone know how I can fix this?
Also, I'm using the following command to convert from scss to css sass --watch main.scss:main.css if anyone knows of a better way please let me know!
Thanks for any help!
You have two lines of --- at the beginning of your file; what is it you think they're doing? Remove them, they're syntactically invalid and they're causing your errors.
Jekyll 2 brings native Sass compilation and the two lines of triple dashes are in fact required in order for Jekyll to compile the Sass file:
http://jekyllrb.com/docs/assets/
If you are not yet using Jekyll 2, then this will not work of course. If you are using Jekyll 2 then you can do this and no longer require a sass --watch command, Jekyll will do that automagically.
you probably had the same problem as me that the _config.yml is not at your root directory. If you don't want to change your file structure, you can set a new repo and add the jekyll files in a new gh-pages branch. I wrote a blog about it: http://shinshinwu.github.io/myblog/jekyll/update/2014/12/21/welcome-to-jekyll.html
After a lot of search and tests, i still can not fix this ui problems.
1. symptom
jQuery plugin datepicker display different in firefox and ie.you could view the pic by clicking FF and IE.
You could see that in ie browser the select month and year displays improperly, background color is different in ff, and in FF the datepicker seems more clearly. I don't know why.
2. css code
The datePicker you could download at http://keith-wood.name/datepick.html. My code is below,html page is:
<style type="text/css">
#import "datePicker/redmond.datepick.css";
</style>
<span id="calendar" class="datepickHideCalendar">
<p>start date</p><p><input type="text" id="popupDatepickerStart"></p>
<p>end date</p><p><input type="text" id="popupDatepickerEnd"></p>
<table align="center"><tr><td><button type="button" id="getDates">run</button></td> </tr></table>
</span>
the redmond.datepick.css is as below:
/* Redmond style sheet for jQuery Datepicker v4.0.5. */
#charset "utf-8";
.datepick {
background-color: #fff;
color: #222;
border: 1px solid #4297d7;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-family: Arial,Helvetica,Sans-serif;
font-size: 70%;
}
.datepick-rtl {
direction: rtl;
}
.datepick-popup {
z-index: 1000;
}
.datepick-disable {
position: absolute;
z-index: 100;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
}
.datepick a {
color: #222;
text-decoration: none;
}
.datepick a.datepick-disabled {
color: #888;
cursor: auto;
}
.datepick button {
margin: 0.25em;
padding: 0.125em 0em;
background-color: #5c9ccc;
color: #fff;
border: none;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
float: left;
width: 100%;
background-color: #fff;
font-size: 90%;
font-weight: bold;
}
.datepick-ctrl {
background-color: #d0e5f5;
}
.datepick-cmd {
width: 30%;
}
.datepick-cmd:hover {
background-color: #dfeffc;
}
button.datepick-cmd:hover {
background-color: #79b7e7;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
width: 8%;
}
a.datepick-cmd {
height: 1.5em;
}
button.datepick-cmd {
text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
float: left;
padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
float: left;
width: 35%;
text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
float: right;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump,
.datepick-rtl .datepick-cmd-clear {
float: right;
padding-left: 0%;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl .datepick-cmd-today {
float: right;
}
.datepick-rtl .datepick-cmd-next, .datepick-rtl .datepick-cmd-nextJump,
.datepick-rtl .datepick-cmd-close {
float: left;
padding-left: 2%;
padding-right: 0%;
text-align: left;
}
.datepick-month-nav {
float: left;
text-align: center;
}
.datepick-month-nav div {
float: left;
width: 12.5%;
margin: 1%;
padding: 1%;
}
.datepick-month-nav span {
color: #888;
}
.datepick-month-row {
clear: left;
}
.datepick-month {
float: left;
width: 15em;
border: 1px solid #5c9ccc;
text-align: center;
font-size: 90%;
}
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
height: 1.7em;
background-color: #5c9ccc;
color: #fff;
font-weight: bold;
}
.datepick-month-header select, .datepick-month-header input {
height: 1.7em;
border: none;
}
.datepick-month-header input {
position: absolute;
display: none;
}
.datepick-month table {
width: 100%;
border-collapse: collapse;
}
.datepick-month thead {
border-bottom: 1px solid #aaa;
}
.datepick-month th, .datepick-month td {
margin: 0em;
padding: 0em;
font-weight: normal;
text-align: center;
}
.datepick-month th {
border: 1px solid #fff;
border-bottom: 1px solid #c5dbec;
}
.datepick-month td {
border: 1px solid #c5dbec;
}
.datepick-month td.datepick-week * {
background-color: #d0e5f5;
color: #222;
border: none;
}
.datepick-month a {
display: block;
width: 100%;
padding: 0.125em 0em;
background-color: #dfeffc;
color: #000;
text-decoration: none;
}
.datepick-month span {
display: block;
width: 100%;
padding: 0.125em 0em;
}
.datepick-month td span {
color: #888;
}
.datepick-month td .datepick-other-month {
background-color: #fff;
}
.datepick-month td .datepick-today {
background-color: #fad42e;
}
.datepick-month td .datepick-highlight {
background-color: #79b7e7;
}
.datepick-month td .datepick-selected {
background-color: #4297d7;
color: #fff;
}
.datepick-status {
clear: both;
text-align: center;
}
.datepick-clear-fix {
clear: both;
}
.datepick-cover {
display: none;
display/**/: block;
position: absolute;
z-index: -1;
filter: mask();
top: -1px;
left: -1px;
width: 100px;
height: 100px;
}
.datepickShowCalendar{visibility:visible}
.datepickHideCalendar{visibility:hidden}
.datePickerTitle{text-align:center;font-size:14px;font-weight:bold}
.datePickerBtn{font-size:12px}
/* CSS Document */
BODY {
background-color:#FAFAFA;
}
#calendar{font-size:12px;text-align:center}
TABLE {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
TD {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana";
}
P {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana";
color: #003B7F;
}
SELECT {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
INPUT {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
TEXTAREA {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
DIV {
FONT-SIZE: 12px;
FONT-FAMILY: "微软雅黑", "宋体", "Arial", "Verdana"
}
TABLE {
WORD-BREAK: break-all;
BORDER-COLLAPSE: collapse;
text-align: center;
}
UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
FORM {
margin:0px;
LIST-STYLE-TYPE: none
}
FORM {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
SELECT {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
A IMG {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px
}
A:link {
color:#000066;
TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: none
}
INPUT {
MARGIN-RIGHT: 5px;
margin-top: 3px;
}
TEXTAREA {
VERTICAL-ALIGN: middle;
MARGIN-RIGHT: 5px
}
SELECT {
VERTICAL-ALIGN:middle;
MARGIN-RIGHT: 5px;
opacity: 1;
}
TEXTAREA {
BORDER: #999999 1px solid;
PADDING-LEFT: 3px;
OVERFLOW: auto;
COLOR: #000;
BACKGROUND-COLOR: #fff
}
.datalist_table{
width:100%;
border:0px;
}
.datalist_table Th {
FONT-WEIGHT: bold;
COLOR: #034579;
HEIGHT: 26px;
text-align:left;
vertical-align:middle;
background:#F0F0F0;
}
.datalist_table TD {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
HEIGHT: 26px;
TEXT-ALIGN: center;
color: #003b7f;
}.datalist_table TD {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
HEIGHT: 26px;
TEXT-ALIGN: center;
color: #003b7f;
}
.list01 {
background:#E4EEF3;
}
.list02 {
background:#D6E4EB
}
i want to know which part of the css is wrong? Why IE displays improperly? Thank you guys.
** 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.