I just wanted to note that for any other people that are looking for a way just to use css sliding doors to style individual buttons and/or links then maybe this will help…

http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

So I’m going to use a different site. I’ll find one that actually teaches me

function $() {
var elements = new Array();
for (var i=0;i<arguments.length;i++) {
var element = arguments[i];
if (typeof element == 'string') element = document.getElementById(element);
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
}

var BoxHeights = {
maxh: 0,
boxes: Array(),
num: 0,
op_test: false,
equalise: function() {
this.num = arguments.length;
for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
this.boxes = arguments;
this.maxheight();
for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
},
maxheight: function() {
var heights = new Array();
for (var i=0;i<this.num;i++) {
if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
heights.push($(this.boxes[i]).scrollHeight);
} else {
heights.push($(this.boxes[i]).offsetHeight);
}
}
heights.sort(this.sortNumeric);
this.maxh = heights[this.num-1];
},
sortNumeric: function(f,s) {
return f-s;
}
}

window.onload = function() {
BoxHeights.equalise('left','content','right');
}

home
products
blog
contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dolor quis urna bibendum hendrerit in vel quam. Aliquam pellentesque porttitor nibh, eget viverra justo volutpat sit amet. Mauris ligula lorem, pellentesque sit amet egestas ut, dapibus sed nulla. Mauris varius nulla sed eros euismod feugiat placerat quam feugiat. Aliquam lobortis metus a libero dapibus ut consectetur sem fermentum. In ultricies sollicitudin orci, sit amet consectetur lorem vulputate eu. Sed lobortis commodo massa, ac imperdiet felis elementum a. Nulla facilisi. Nam orci purus, pulvinar vel lobortis eu, adipiscing bibendum ante. Duis dapibus convallis urna, et pulvinar lacus adipiscing in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dolor quis urna bibendum hendrerit in vel quam. Aliquam pellentesque porttitor nibh, eget viverra justo volutpat sit amet. Mauris ligula lorem, pellentesque sit amet egestas ut, dapibus sed nulla. Mauris varius nulla sed eros euismod feugiat placerat quam feugiat.

© 2009. All rights reserved.

@charset “utf-8″;
/* CSS Document */
*{
margin:0;
padding:0;
}
a{
outline:0;
}
#container {
width: 990px;
background-color: #3366FF;
margin:0 auto;
background-image: url(images/images/bg_02.png);
background-repeat: repeat;
}
#head {
background-color: #000033;
height: 45px;
}
#navigation {
margin:0 auto;
padding:0 auto;
clear: both;
height: auto;
width: 500px;

}

ul {
list-style: none;
float: left;
clear: left;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
}

ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 25px;
}

ul li a {
text-decoration: none;
float:left;
color: #999;
cursor: pointer;
font: 900 14px/22px “Arial”, Helvetica, sans-serif;
}

ul li a span {
margin: 0 25px 0 -25px;
padding: 10px 5px 20px 20px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;

}

/*BLUE*/
ul.blue li a.current, ul.blue li a:hover {
color: #0d5f83;
background-image: url(images/glass_01.png);
background-repeat: no-repeat;
background-position: right top;
}

ul.blue li a.current span, ul.blue li a:hover span {
background-image: url(images/glass_01.png);
background-repeat: no-repeat;
background-position: left top;
}

#main_content {
padding: 15px;
width: auto;
background-color: #99FF99;
}
#left {
background-color: #00FFFF;
height: auto;
width: 25%;
border: 1px solid #0033CC;
float: left;
}
#content {
float: left;
height: auto;
width: 49%;
background-color: #00CCCC;
border: 1px solid #9933CC;
display: inline;
}
.content_image {
float: left;
height: 165px;
width: 74px;
padding-top: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-top-color: #00CCCC;
border-right-color: #00CCCC;
border-bottom-color: #00CCCC;
border-left-color: #00CCCC;
margin-top: 15px;
margin-right: 0px;
margin-left: 15px;
display: inline;
background-image: url(images/images/bg.png);
background-repeat: no-repeat;
}

#right {
float: left;
height: auto;
width: 25%;
background-color: #33FF99;
border: 1px solid #CCCC33;
}
.clear_float {
clear: both;
}
#footer {
background-color: #CC3333;
height: 10px;
width: auto;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}
.copy_right {
float: left;
}
.tecanda {
float: right;
}
.tecanda a {
color: #FFFFFF;
text-decoration: none;
}
.tecanda a:hover {
color: #0000FF;
text-decoration: underline;
}
.tecanda a:active {
color: #0000FF;
text-decoration: underline;
}

IE ONLY CSS FOR PNG TRANSPERANCY
@charset “utf-8″;
/* CSS Document */

.content_image {
height: 165px;
width: 75px; /* Must Specify Width */
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/images/bg.png’);
float: left;

}