Hi, I have a CSS file that is causing the cells within a day column to be mis-aligned with the hour markers. The mis-alignment gets progressively worse as the day/hours increase. The css file came with an HTML layout I procured; when it comes to HTML layouts, CSS files and DayPilot appearance I'm over my head. Attached is the CSS...any guidance would be most appreciated:
body {
font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
word-spacing:2px;
color:#444;
margin:20px;
background:url(../images/body.jpg) #f6f6f6;
}
* {
margin:0;
padding:0;
}
#wrapper {
background:#fff;
border:3px solid #f1f1f1;
max-width:1200px;
width:expression(this.width > 320 ? "320px" : this.width);
min-width:760px;
margin:0 auto;
}
* html #wrapper
{
width: expression(document.documentElement.clientWidth > 1200 ? "1200px" : "auto");
}
#innerwrapper {
margin:1px;
background:url(../images/innerwrapper.jpg) top repeat-x;
padding:2px;
}
#header input {
width:150px;
padding:5px;
background:#fff;
border:2px solid #f6f6f6;
font:150% Arial;
color:#999;
}
#header input:hover {
border:2px solid #ccc;
}
#header input:focus {
border:2px solid #79B5D6;
color:#555;
}
#header form {
padding:27px 25px 20px 25px;
float:right;
background:#fff;
width:160px;
margin:-20px -20px 0 0 !important;
margin:-20px -10px 0 0;
border:none;
}
#header h1 {
float:left;
font:250% Arial;
color:#333;
padding:5px 20px 5px 5px;
border-right:1px solid #ccc;
margin:0 20px 0 0;
}
#header h1 a {
color:#333;
text-decoration:none;
border-bottom:2px solid #f6f6f6;
}
#header h1 a:hover {
color:#111;
border-bottom:2px solid #79B5D6;
}
#header h2 {
font:150% Arial;
color:#666;
padding:16px 0 0 0;
border:none;
}
#header h2 a {
color:#444;
text-decoration:none;
border-bottom:2px solid #f6f6f6;
}
#header h2 a:hover {
border-bottom:2px solid #79B5D6;
}
#header #nav {
clear:both;
background:url(../images/nav.jpg) top repeat-x #4F9EC9;
border-bottom:2px solid #4F9EC9;
border-top:2px solid #0F07E6;
border-left:2px solid #0F07E6;
border-right:2px solid #0F07E6;
padding:10px 10px 10px 0 !important;
padding:4px 10px 10px 0;
}
#header a em {
font-style:normal;
text-decoration:underline;
}
#header #nav a {
color:#fff;
font:140% Trebuchet MS;
text-decoration:none;
padding:10px;
}
#header #nav a:hover {
background:#4F9EC9;
}
#header #nav a.active {
background:#4F9EC9;
}
#header #nav li {
display:inline;
list-style:none;
margin:0 1px 0 0;
}
#header #subnav {
background:#4F9EC9;
padding:5px 7px 7px 7px;
font:90% Verdana;
color:#DEEDF5;
border-bottom:2px solid #0F07E6;
border-left:2px solid #0F07E6;
border-right:2px solid #0F07E6;
}
#header #subnav li {
list-style:none;
display:inline;
}
#header #subnav a {
color:#DEEDF5;
text-decoration:none;
font:100% Verdana;
padding:5px;
border-bottom:2px solid #4F9EC9;
}
#header #subnav a:hover {
border-bottom:2px solid #0F07E6;
color:#fff;
}
#header #subnav a.active {
border-bottom:2px solid #0F07E6;
color:#fff;
}
#sidebar {
background:#333;
width:200px;
padding:10px 20px 20px 20px;
float:left;
color:#666;
border-top:2px solid #000;
border-bottom:10px solid #000;
}
#sidebar h2 {
font:160% Arial;
color:#999;
margin:10px 0 10px 0;
border:none;
}
#sidebar h3 {
color:#D2292F;
font:90% Verdana;
font-weight:bold;
letter-spacing:2px;
}
#sidebar p {
margin:15px 0;
}
#sidebar p.news {
background:#323232;
}
#sidebar p.news a.more {
color:#ccc;
display:block;
text-align:right;
font:80% Verdana;
text-transform:uppercase;
letter-spacing:1px;
text-decoration:none;
padding:10px 0;
}
#sidebar p.news a:hover {
color:#98D158;
}
#sidebar .subnav {
border-top:1px solid #2C2C2C;
}
#sidebar .subnav li {
list-style:none;
padding:5px;
border-bottom:1px solid #2C2C2C;
}
#sidebar .subnav li a {
color:#ccc;
text-decoration:none;
display:block;
}
#sidebar .subnav li a:hover {
color:#98D158;
}
#sidebar .subnav li a b {
float:right;
display:none;
color:#666;
}
#sidebar .subnav li a:hover b {
display:inline;
}
#sidebar input {
padding:4px;
background:#2c2c2c;
border:1px solid #222222;
color:#ccc;
font:90% Verdana;
width:190px;
}
#sidebarright {
width:170px;
float:right;
padding:10px 0 0 20px;
background:url(../images/sidebarright.jpg) top left no-repeat;
}
#sidebarright p {
font:90% Verdana;
color:#777;
line-height:20px;
margin:10px 0;
}
#sidebarright h2 {
font:140% Arial;
color:#333;
margin:10px 0;
border:none;
}
#sidebarright ul {
margin:10px 0 10px 15px;
font:90% Verdana;
}
#sidebarright ul li {
margin:5px 0;
}
#sidebarright a {
border-bottom:1px dotted #eee;
color:#444;
text-decoration:none;
}
#sidebarright a:hover {
border-bottom:1px solid #ccc;
}
#content {
margin:0 210px 0 240px;
background:url(../images/content.jpg) top left no-repeat;
padding:20px 0 0 20px;
}
#contentnorightbar {
margin:0 0 0 240px;
background:url(../images/content.jpg) top left no-repeat;
padding:20px 0 0 20px;
}
p {
margin:15px 0;
line-height:22px;
}
h2 {
font:190% Arial;
color:#D2292F;
border-bottom:2px solid #f6f6f6;
}
h2 a {
color:#D2292F;
text-decoration:none;
}
h2 a:hover {
color:#5F9128;
}
#footer {
clear:both;
border-top:1px solid #eee;
padding:10px;
margin:30px 0 0;
}
a {
color:#222;
}
a:hover {
text-decoration:none;
}
h3 {
font:140% Trebuchet MS;
margin:10px 0;
}
#content ul {
margin:15px 0 15px 0;
line-height:25px;
padding:15px 0 15px 15px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
#content ul span {
color:#444;
}
#contentnorightbar ul {
margin:15px 0 15px 20px;
line-height:25px;
padding:15px 0;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
#contentnorightbar ul span {
color:#444;
}
img {
padding:1px;
background:#ccc;
}
form {
padding:10px;
border:1px solid #f6f6f6;
}
label {
color:#444;
margin:5px 0;
}
input {
padding:4px;
border:none;
border-bottom:1px dotted #ccc;
font:90% Verdana;
color:#777;
}
textarea {
width:400px;
padding:4px;
font:90% Verdana;
border:1px solid #eee;
height:200px;
display:block;
color:#777;
}
p img {
float:left;
margin:0 10px 0 0;
}
blockquote p {
font:160% Georgia;
color:#aaa;
padding:0 10% 0 0;
line-height:30px;
}