CSS

CSS styling browser Consistent Buttons

This CSS will allow for buttons to show the same in IE7 as they do in Firefox 3.6 and other standards compliant browsers. From what I know Facebook, Youtube and Google all use this trick to display browsers consistent buttons. Enjoy :).

span.primaryOuter{
	border-bottom:1px solid #E7E7E7;
	border-right:1px solid #E7E7E7;
	margin:3px 0 4px 4px;
	height:32px;
	position:relative;
	z-index:100;
	display:inline-block;
}

span.primaryInner{
	background:none repeat scroll 0 0 #EEEEEE;
	border-color:#CCCCCC #999999 #999999 #CCCCCC;
	border-right:1px solid #999999;
	border-style:solid;
	border-width:1px;
	height:30px;
	display:inline-block;
}

span.primaryInner input{
	background-position:center bottom;
	background-image:url("/images/bigButtonBack.png");
	border:medium none;
	color:#000000;
	cursor:pointer;
	font:15px arial,sans-serif;
	height:30px;
	margin:0;
	vertical-align:top;
	padding:0 6px;
	width:auto;
	overflow:visible;
}

span.primaryInner input:active{
	background:none repeat scroll 0 0 #CCCCCC;
}
CSS, Internet Explorer

IE Button Fix – Fix those stupid button widths

I know this hack is old and everything but I thought I’d repost this on here since I forgot how to do this today and it took ages for me to find out how to do this again. This hack basically stops buttons from expanding their widths in IE to stupid levels and is standards mode compliant.

/* IE6 */
* html input {
overflow: visible;
width: 1px;
}

/* IE7 */
*+html input {
overflow: visible;
}

CSS

CSS Overlaying

I’ve been asked more than once now, “How do I overlay images with text using CSS?”. The answer is so much simpler than the question, it is really easy and in this tutorial I will show you how to do it.

Now to make things better I will be creating this:

Stage6 Video Thumb

Okay let’s look at the HTML behind this, then we can overlay the CSS on top of it:

//this is the actual thumb div
<div class="thumbOuter">
        //link containing the image
        <a href="viewVideo" class="thumbList" >                	
             <img src="videoThumb" alt="videoTile">
        </a>
        //backer transparent bar
        <div class="LowerBar"></div>
              //writing on top of the bar
              <div class="LowerBarTop" style="color:white; padding-top:3px; padding-left:3px;">Length of Video</div>
              <div class="LowerBarRate" style="float:right;" id="rateInfo">
                        //post the thumbs up here                   	                        	
               </div>
</div>

Now that we have the HTML it is time to look at the CSS behind it all:

ul.thumbListLayoutBox{
	display:block;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

ul.thumbListLayoutBox li{
	float:left;
	height:156px;
	margin:10px 11px 11px;
	padding:5px 5px 5px 0px;
	position:relative;
	width:216px;
	z-index:1;
}

.thumbOuter{
	display:block;
	position:relative;
	text-align:left;
	width:218px;
}

a.thumbList{
	display:block;
	height:120px;
	overflow:hidden;
	padding:1px;
	position:relative;
	text-decoration:none;
	width:214px;
	border:2px solid #848486;
}

a.thumbList img{
	height:120px;
	width:214px;
	border:0;
}

div.LowerBar{
	background:black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;
	
}
	
div.LowerBarTop{	
	border-top:1px solid black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	
}
	
div.LowerBarRate{	
	height:24px;
	right:4px;
	top:96px;
	position:absolute;
	display:block;
	
}

Now what I would like to draw your attention to is:

.thumbOuter{
	display:block;
	position:relative;
	text-align:left;
	width:218px;
}

div.LowerBar{
	background:black;
	width:100%;
	height:18px;
	top:102px;
	position:absolute;
	display:block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;
	
}

This code is the background for the lower bar shown in the picture. Notice how I use top to position the object whilst causing it to float over the video thumb by using position:relative on the bottom div and position:absolute on the top div. There, no need for z-index’s which will confuse IE. Enjoy :).

Javascript

Creating a JavaScript Overlay Window

This tutorial will enable the reader to create CSS div overlay dialogues using JavaScript. This tutorial was taken from another blog, however, since I first visited the blog it has lost most of the tutorial. I had to revisit a previous revision of my website in order to know how to do this so I thought I would make a new post on my blog to keep the knowledge going.

Now the main thing to understand is that there are extensions that will do this for you, however, I did not use these as they didn’t work…Yes that’s right, they didn’t work (due to certain JavaScript methods and where the window was being called from) so I revived the home made way.

First things first we need to create two divs, one to darken screen and one for the dialogue. I should also mention this is easy to convert into a facebook style message box if you simply make rounded corners for the divs (css can do it but only on some browsers and not many, this is how facebook do it) and making the back dark div only a little bigger than the message window (add a padding or margin).

The first two divs look like this:


<style>
.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}

.loginboxhover{
	z-index: 20;
	position:fixed;
}
</style>

<div id="darkBackgroundLayer" class="darkenBackground" style="display:none;"></div>

<div id="exitConfirm_D" class="loginboxhover" style="display:none;" align="center">
	<div id="uploadconfirmleave" style="width:712px; z-index:1;">
		 <div class="defaultContainerOuter">
	     	<h2 class="regTop" id="">Hey You! Yeah! You There!</h2>
		     <div class="defaultContainerInner" style="text-align:left; padding:0;">
			     <div style="padding-left:5px; padding-right:5px;">
				     <p>This page is attempting to redirect away from itself to another page. In order to stop my servers from exploding this action will stop any files you are currently uploading.</p>
				     <p>Are you sure you wish to navigate away from this page?</p>
			     </div>
			     <div style="background:#131313; border-top:1px solid #363636; padding:5px; padding-top:7px; color:#fff;">
				     <form action="usrcp.php?home">
					     <div align="right">
					     	<input type="submit" value="Yes, Take Me There" class="button7" style="margin-right:3px;"> Or <a id="N_RtnUP" class="normalHyp" style="cursor:pointer;">No, Take Me Back to The Uploads</a>
					     </div>
				     </form>
			     </div>
			 </div>
		</div>
	</div>
</div>

As you will notice this has been taken directly from one of my scripts. The first div is the “darkBackgroundLayer” this is the one that darkens our screen. the second is the div “exitConfirm_D” which holds a lot of code. This is the message box div. Everything within the main div is just for example reasons.

Now what we need to do is a good old hide and show:

function ShowExitConfirmPanel(){

	document.getElementById("darkBackgroundLayer").style.display = "block";
	document.getElementById("exitConfirm_D").style.display = "block";
	
	var newsletter_panel = document.getElementById("exitConfirm_D");
	
	w = 700;
	h = 346;
	
	xc = Math.round((document.body.clientWidth/2)-(w/2));
	yc = Math.round((document.body.clientHeight/2)-(h/2));
	
	var height = yc.toString();
	var temp = height.split("-");
	
	newsletter_panel.style.left = xc + "px";
	newsletter_panel.style.top = "10" + "em";

}

And hey presto! The function simply grabs the two divs by their id’s, sets their display to block (from none) and then changes the height and position of the main message box to suit my needs.

To close the message box simply use:

	function closeit(){
		document.getElementById("darkBackgroundLayer").style.display = "none";
		document.getElementById("exitConfirm_D").style.display = "none";		

	});