I have a template but when I scroll down the page it seems to be really lagging
I have a 8 core computer with 8gb of ram so I know it ent my computer. I have had other users telling me that my site is running slow. I change my layout and all works fine so I know its not the server. I change my html layout and put all my php scripts onto a new html / css layout and works fine with no lag but I like this layout...
Here is my css which i think is the problem
html
{
background: url(../images/background.png);
background-color: transparent;
overflow-y: auto;
}
body {
width: 1000px;
margin: auto;
padding: 0;
text-align: center;
color: #000000;
font-family: verdana;
font-size: 0.7em;
}
div.container
{
width:100%;
height:100%;
position:absolute;
margin:auto;
}
div.holder
{
width:990px;
background-color:#d7f7f7;
height:100%;
margin:auto;
margin-top:0px;
background-image:url('../images/swampertbackground.png');
background-repeat:no-repeat;
background-position:bottom center;
}
#container{
height: 100%;
width: 1000px;
background-color: #d7f7f7;
position: fixed;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-left: solid #25a5a6 2px;
border-right: solid #25a5a6 2px;
overflow-y: auto;
overflow-x: auto;
}
div.banner
{
height:125px;
width:700px;
display:block;
position:absolute;
margin-top:2px;
margin-left:140px;
background-color:#FFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border: solid #25a5a6 1px;
background-image:url('../images/banner.png');
box-shadow: 3px 3px 3px #4b8384;
}
ul , li
{
margin:0px;
padding:0px;
list-style:none;
}
div.left_navigation
{
position:absolute;
margin-left:5px;
margin-top:150px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
width: 152px;
}
div.left_navigation2
{
position:absolute;
margin-left:5px;
margin-top:300px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation3
{
position:absolute;
margin-left:5px;
margin-top:400px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation4
{
position:absolute;
margin-left:5px;
margin-top:500px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation5
{
position:absolute;
margin-left:5px;
margin-top:600px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation6
{
position:absolute;
margin-left:5px;
margin-top:700px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
li.header
{
width:150px;
height:14px;
background-color:#54c0c1;
border:1px #188c8d solid;
border-top-left-radius:7px;
border-top-right-radius:7px;
background-image:url('../images/header.png');
border-left:2px #188c8d solid;
color:#FFFFFF;
font-weight:900;
}
li.links
{
width:150px;
height:16px;
background-color:#c1f9fa;
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
color:#074647;
}
li.links:hover
{
background-color:#FFFF00;
color:#296584;
font-weight:bold;
text-shadow: 1px 2px 2px #0096ff;
}
li.footer
{
width:150px;
height:9px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
background-image:url('../images/header.png');
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
}
div.centerboxholder
{
position:absolute;
top:150px;
margin-left:165px;
width:661px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.centerbox
{
position:absolute;
width:661px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
li.chead
{
width:660px;
height:14px;
border-top-left-radius:7px;
border-top-right-radius:7px;
background-image:url('../images/header.png');
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
border:1px #188c8d solid;
color:#FFFFFF;
font-weight:900;
box-shadow: 0px 0px 3px #4b8384;
}
li.ccontent
{
width:659px;
background-color:#c1f9fa;
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
color:#000;
font-size:0.9em;
border-right:1px #188c8d solid;
box-shadow: 3px 3px 3px #4b8384;
}
li.cfoot
{
width:659px;
height:9px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
background-image:url('../images/header.png');
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
box-shadow: 3px 3px 3px #4b8384;
}
div.right_navigation
{
position:absolute;
margin-left:834px;
top:150px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
table
{
padding:0px;
margin:0px;
border: 0px;
font-size:0.9em;
font-weight:bold;
color:#000;
}
td
{
border:1px #188c8d solid;
width:200px;
text-align:center;
}
#textfield
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
}
#gender
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
width:110px;
padding:0px;
}
#gendertop
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
}
#genderbottom
{
color: #000000;
font-family: verdana;
font-size:1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
}
#button
{
background-color:Transperent;
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
width:100px;
padding-top:0px;
margin:0px;
height:16px;
padding-bottom:5px;
}
#Avatar
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
width:110px;
}
#changer
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border-bottom:1px #188c8d solid;
}
li.topper
{
height:12px;
border:1px #188c8d solid;
border-top-left-radius:5px;
border-top-right-radius:5px;
background-image:url('../images/header.png');
}
li.bottomer
{
border:1px #188c8d solid;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-image:url('../images/header.png');
height:12px;
}
#button:hover
{
cursor:pointer;
}
a:link { color:#296584; text-decoration:none;display:block;}
a:visited { color:#296584; text-decoration:none;}
a:hover { color:#296584; text-decoration:none;text-shadow: 1px 2px 2px #0096ff;}
a:active {color:#296584; text-decoration:none; background-color:}
Is there anything in that css which will make it lag ?
it says here
http://jigsaw.w3.org/css-validator/validator?uri=pokemontoxic.net&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en
i have 81 errors are these big errors ?
Use this tool to stress test your css, the author had issues with border radius on large elements: http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
border-radius has been shown to be process intensive, in one browser specifically, I think it was Firefox. With position:fixed, I can see those as being your only two problem areas, especially with the number of radius properties you have. Whether that is enough to cause you problems you would notice, I don't know.
I dont think so.
check how much 'heavy' are your images; Use png if you want transparency if not, convert it to jpg that are lighter.
one thing you can check with chrome is the unused styles:
press F12, in Audits tab and then click to the Run button. And in inform you can see the things that you dont use.
You can minimize the css (for example with this)
And the last you can add gzip compression
Good Luck
Your background seems to be a large png, and you're using absolute positioning to place the page contents on top of a still background. I've seen this cause issues before with scrolling lag. Change:
position:absolute;
To:
position:relative;
In div.container and as mentioned before scale down your images. At least begin by making the HTML tag background image a jpeg.
Related
I have created a table program in which everything works fine, but when I try to make it responsive using media queries it doesn't seem to work as you can see it is uneven. Here is the CodePen for the whole code: http://codepen.io/meeksmadness/pen/YNwOoE. I have provided some images to help if you need them and any help is appreciated.
Regular Screen:
Responsive Screen:
table {
position:relative;
z-index:0;
overflow:hidden;
border:1px solid black;
border-radius:5px;
border-collapse: collapse;
display:block;
max-width:600px;
width:100%;
margin:0 auto;
margin-top:50px;
background-color:white;
-webkit-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
-moz-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
}
tr {
color:black;
font-size:18px;
font-weight:400;
}
tr:nth-child(odd){
background-color:#C5C5C5;
}
tr:first-child {
background-color:#191919;
color:#D3D3D3;
font-size:23px;
font-weight:200;
}
tr:first-child td {
border-bottom:4px solid #696969;
}
tr:last-child td {
border-bottom:0;
}
td {
position:relative;
overflow:hidden;
width:200px;
height:auto;
padding:20px;
border-bottom:1px solid #474747;
border-right: 1px solid #474747;
}
td:last-child {
border-right:0;
}
td span.special {
display:block;
float:right;
cursor:pointer;
}
td>a.delete {
position:absolute;
cursor:pointer;
opacity:0;
top:0;
bottom: 0;
right: 0;
background: red;
padding: 18px;
font-size:22px;
}
#media (max-width:600px){
table {
width:100%;
}
}
#media (max-width:357px){
td span.special {
float:none;
text-align:center;
}
}
Im creating a css only tooltip for my new website project.
This tooltip shows right on touchdevises. The only problem is that touchdevises can't close the tooltip.
How can I modify the code that touchscreen users can close the tooltip if they touch somewhere around the tooltip? Or maybe if they touch on the tooltip visible text link?
I just want to use css if possible.
The CSS that I have:
a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
This is the html:
Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip.</span>
Thanks for help me out guys!
Regards, Dylan
I got no problems as u describet but i tryed this and it works even better on my device. So check it that helps you.
Fiddle
HTML:
<a href="#" class="tooltip">
Normal Text
</a>
<span>
<strong>Tooltip title</strong><br />
This would be the content of the tooltip.
</span>
CSS:
a.tooltip {
outline:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip:hover {
text-decoration:none;
cursor: help;
}
span {
z-index:10;display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:220px;
line-height:17px;
}
a.tooltip:hover + span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
span {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
When I hover the first div for example, it is meant to change the bg color, and the color changes but it flashes when changing the color and it's not smooth at all in Chrome. but it is really smooth in IE and Firefox ... Why is that? (that's all I want to know)
CSS:
.bg {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
background-color:#D8D8D8;
z-index:-10;
}
.DIVOne {
color:#FFF;
margin-top:10%;
background-color:#A2D700;
height:300%;
line-height:200%;
width:20%;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-5;
}
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVOne:hover ~ .bg {
background-color:#A2D700;
transition:all 0.5s;
}
.DIVTwo {
color:#FFF;
background-color:#FF8000;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVTwo:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVTwo:hover ~ .bg {
background-color:#FF8000;
}
.DIVThree {
color:#FFF;
background-color:#0080FF;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVThree:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVThree:hover ~ .bg {
background-color:#0080FF;
}
HTML:
<div class="DIVOne"> Content </div>
<div class="DIVTwo"> Content </div>
<div class="DIVThree"> Content </div>
demo: http://www.jsfiddle.net/aryanf/w7unZ/
The problem is with the following code
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
It's the position:relative; property that is causing the problem on Chrome. Try removing it. Besides, I don't see why you have introduced it in the first place. It seems to work fine without it.
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
//position:relative;
left:2px;
top:3px;
}
If it is not rendering and appearing smooth on other browsers, try to add some css code additionaly inside your CSS file.
Suppose if you need Rounded Corner Border in IE, you will use
.ddlStyle {
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
But this may not render perfect on all other Browser due to different behavior of Rendering Engine. So make addition of some lines and try on other browsers.
.ddlStyle {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
Hope, it solves the problem.
How can I modify the behavior pf a smart GWT Calendar, so that when a day cell is clicked, it remains selected (highlighted)
I know I have to somehow modify the the css for the day cell inside a dayBodyClickedHandler
but I can't figure out how. Does any one have an example of this?
The corresponding css probably is .calendarCellSelected {}
You can set the name of a CSS style: calendar.setSelectedCellStyle(selectedCellStyle)
You can look up the standard CSS for Calendar in your theme. For example in BlackOps:
/*============================================================
Calendar
============================================================*/
.calendar,
.calendarDisabled,
.calendarWorkday,
.calendarDark {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#ffffff;
}
.calendarDisabled {
background-color:gainsboro;
}
.calendarWorkday {
background-color:#ffffcc;
}
.calendarOver,
.calendarOverDark {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#c0ffc0;
}
.calendarCellSelected {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#CCCCCC;
}
.labelColumn {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:gainsboro;
}
/* ----month---- */
/* calMonthDayHeader and Body */
.calMonthDayHeader,
.calMonthDayHeaderDark {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color: gainsboro;
}
.calMonthDayHeaderOver,
.calMonthDayHeaderOverDark {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color: #c0ffc0;
}
.calMonthDayBody,
.calMonthDayBodyDark {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#ffffff;
}
.calMonthDayBodyOver,
.calMonthDayBodyOverDark {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#c0ffc0;
}
.calMonthDayBodyDisabled,
.calMonthDayBodyDisabledOver {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#E6E6E6;
}
/* calMonthOtherDayHeader and Body */
.calMonthOtherDayHeader,
.calMonthOtherDayHeaderDark {
font-family:Arial,sans-serif; font-size:11px;
color:#444444;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color: #aaaaaa;
}
.calMonthOtherDayHeaderOver,
.calMonthOtherDayHeaderOverDark {
font-family:Arial,sans-serif; font-size:11px;
color:#444444;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color: #c0ffc0;
}
.calMonthOtherDayBody,
.calMonthOtherDayBodyDark,
.calMonthOtherDayBodyDisabled,
.calMonthOtherDayBodyDisabledOver {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#E6E6E6;
}
.calMonthOtherDayBodyOver,
.calMonthOtherDayBodyOverDark {
font-family:Arial,sans-serif; font-size:11px;
color:black;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color:#c0ffc0;
}
/* calMonthOtherDayBlank */
.calMonthOtherDayBlank,
.calMonthOtherDayBlankDark,
.calMonthOtherDayBlankOver,
.calMonthOtherDayBlankOverDark {
font-family:Arial,sans-serif; font-size:11px;
color:#444444;
border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0;
background-color: #E6E6E6;
}
/* calMonthEventLink */
a.calMonthEventLink:link {color:blue; text-decoration:none}
a.calMonthEventLink:visited {color:blue; text-decoration:none}
a.calMonthEventLink:hover {color:blue; text-decoration:underline}
a.calMonthEventLink:active {color:blue; text-decoration:none}
/* ----event window---- */
.eventWindow {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size: 9px;
background-color:#649ED8;
border: 1px solid #004D99;
}
.eventWindowHeader {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size: 9px;
color:white;
background-color:#004D99;
}
.eventWindowBody {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size: 9px;
color:black;
background-color: #649ED8;
padding: 3px;
}
.eventWindowResizer{
border-top:1px solid white;
border-bottom: 1px solid white;
}
My class goes like this to expand the div dynamically as min-height is given. May i know what goes wrong with this.
.gil_Individual_FormPanelBg
{
width:500px;
min-height:50px !Important;
float:none;
margin:5px auto;
padding:4px;
background-color:#f7f7f7;
border:Solid 1px #e6e6e6;
-border-radius:4px 4px 4px 4px;
-Moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
Shabir, looks as though you have got a whole heap of float:left's when there is no need.
Try this updated CSS:
.gil_Individual_FormPanelBg
{
width:500px;
min-height:50px;
margin:5px auto;
padding:4px;
background-color:#f7f7f7;
border:Solid 1px #e6e6e6;
-border-radius:4px 4px 4px 4px;
-Moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
.gil_Individual_FormWrapper
{
position:relative;
height:auto;
width:100%;
margin:2px auto;
padding:0px;
}
.gil_Individual_FormRow
{
position:relative;
width:100%;
min-height:20px !Important;
margin:3px 0 0 0;
padding:0px;
}
.gil_Individual_FormLable
{
position:relative;
width:150px;
height:15px;
float:left;
margin:0px;
padding:0px;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
font-size:11px;
font-weight:Normal;
color:#3B5998;
text-align:left;
text-decoration:none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.gil_Individual_FormCtrl
{
position:relative;
width:350px;
min-height:15px !Important;
float:left;
margin:0px;
padding:0px;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
font-size:11px;
font-weight:Normal;
color:#333;
text-align:left;
text-decoration:none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
HTML stays the same. If you are going to add the class float. Consider creating a clear class to place after the floated DIV.
Class something like this:
.clear{
clear:both;
margin:0;
padding:0;
height:1px;
}
After reviewing the link you posted, it does look like you have probably over complicated the build but hopefully it should work the way you want it to now.
Dan