Can't move image down and form up in css

[kroscoe777@verizon.net]

Hi there,

I think this should be so simple, but I can't seem to get the sidebar image called "Join Us Now" image to be lowered so it is slightly on top of the form border.
See picture attached.

It is a Wordpress site in the style.css file and code in the sidebar.php file.
If it is easier to see in the site itself ( dev site with back up, no worries)

http://www.gsconsulting2010.com/pitt/wp-admin



sidebar.php

<div id="sidebar">
<a href="#" class="join" border="0"><span>Join Us Now</span></a> 

    <?php  ///echo do_shortcode('[contact-form 1 "Contact form 1"]'); ?>

<script language="JavaScript" type="text/javascript"> 

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
 <!--
function formCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("fname", "lname","email","zip","state");
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("First Name", "Last Name","Email","Zip","State");
	// dialog message
	var alertMsg = "Please complete the following fields:\n";
	
	var l_Msg = alertMsg.length;
	
	for (var i = 0; i < fieldRequired.length; i++){
		var obj = formobj.elements[fieldRequired[i]];
		if (obj){
			switch(obj.type){
			case "select-one":
				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "select-multiple":
				if (obj.selectedIndex == -1){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "text":
			case "textarea":
				if (obj.value == "" || obj.value == null){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			default:
			}
			if (obj.type == undefined){
				var blnchecked = false;
				for (var j = 0; j < obj.length; j++){
					if (obj[j].checked){
						blnchecked = true;
					}
				}
				if (!blnchecked){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
			}
		}
	}
 
	if (alertMsg.length == l_Msg){

		return true;
	}else{
		alert(alertMsg);
		return false;
	}
}
// -->
</script> 

<div style="margin-right:-32px;">


<form action="<?php bloginfo('wpurl'); ?>/thank-you-join-2/" class="join" method=post name="formcheck" onsubmit="return formCheck(this);"> 
								<fieldset> 
									<div class="row"> 
										<label>first name* </label> 
										<input type="text" name=fname class="text" /> 
									</div> 
									<div class="row"> 
										<label>last name* </label> 
										<input type="text" name=lname class="text" /> 
									</div> 
									<div class="row"> 
										<label>email address* </label> 
										<input type="text" name=email class="text" /> 
									</div> 
									<div class="row"> 
										<label>zip code* </label> 
										<input type="text" name=zip class="text small" /> 
									</div> 
									<div class="row"> 
										<label>state* </label> 
 
<select name="state">  <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="AZ">Arizona</option> 
<option 
value="CA" >California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DC">District of Columbia</option> <option 
value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="IA">Iowa</option> <option 
value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option 
value="LA">Louisiana</option> <option value="MA">Massachusetts</option> <option value="MD">Maryland</option> <option value="ME">Maine</option> <option value="MI">Michigan</option> <option 
value="MN">Minnesota</option> <option value="MO">Missouri</option> <option value="MS">Mississippi</option> <option value="MT">Montana</option> <option value="NC">North Carolina</option> 
<option value="ND">North Dakota</option> <option value="NE">Nebraska</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New 
Mexico</option> <option value="NV">Nevada</option> <option value="NY">New York</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option 
value="OR">Oregon</option> <option value="PA" selected>Pennsylvania</option> <option value="PR">Puerto Rico</option> <option value="RI">Rhode Island</option> <option value="SC">South 
Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option 
value="VA">Virginia</option> <option value="VT">Vermont</option> <option value="WA" >Washington</option> <option value="WI">Wisconsin</option> <option value="WV">West 
Virginia</option> 

<!--
									</div> 
<input type=hidden name=submit_ind value=1>	
<div class="btn-box">
<button type="submit" name="Edit1">
<img src="<?php bloginfo('template_url'); ?>/images/btn-submit.gif" alt="Submit" class="button" />
</button>
</div>
								</fieldset> 
							</form> 
</div>
    <a href="http://nopittbevtax.com/tell-a-friend/" title-"Tell a Friend" class="btn-tell">Tell A Friend</a>
</div>

-->


									</div> 
<input type=hidden name=submit_ind value=1>	
									<div class="btn-box"><input type="image" src="<?php bloginfo('template_url'); ?>/images/btn-submit.gif" alt="Submit" class="button" /></div>
								</fieldset> 
							</form> 
</div>    
    <a href="http://nopittbevtax.com/tell-a-friend/" title-"Tell a Friend" class="btn-tell">Tell A Friend</a>
</div>

AND the Style.css is here

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
}
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}
.alignright {
	float: right;
}
.alignleft {
	float: left;
}
/* End Images */



/*sidebar */

#sidebar {

position:absolute;
top:180px;
	width:209px;
	float:left;
	padding:22px 0 0;
}
.join {
	width:237px;
	margin:0 0 26px -28px;
	overflow:hidden;
	padding-left: 60px;
	position:relative;
	background:url(../images/bg-join-c.gif) repeat-y 28px 0;
}


.join span{
	cursor:pointer;
	display:block;
	background:url(images/bg-join.png) no-repeat;

	width:276px;
	height:102px;
	text-indent:-9999;
	overflow:hidden;
	margin-top: 52px;
}


.join fieldset {
	height:1%;
	overflow:hidden;
	padding:72px 0 0 20px;
    border: solid 5px gray;


}
.join .row {
	height:1%;
	overflow:hidden;
	padding:0 0 3px
}
.join label {
	color:#bf271e;
	width:167px;
	float:left;
	padding:0 2px 2px;
	font:20px/24px Arial, Helvetica, sans-serif;
}
* html .join label {margin-bottom:-1px;}
.join input.text {
	border:1px solid #34566f;
	width:160px;
	padding:1px 5px 3px;
	margin:0;
	font:16px Arial, Helvetica, sans-serif;
}
.join input.small {width:81px;}
.join input.medium {width:97px;}
.join .btn-box {
	width:209px;
	margin:13px 0 0 -12px;
	overflow:hidden;
	background:url(../images/bg-btn-box.gif) no-repeat;
}
.join input.button {
	float:right;
	padding-right: 15px;
	}
.tell-a-friend {
	width:207px;
	height:87px;
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background:url(../images/btn-tell-a-friend.gif) no-repeat;
}
.tell-a-friend2 {
	width:207px;
	height:87px;
	display:block;
	overflow:hidden;
	text-indent:-9999px;
//	background:url(../images/btn-tell-a-friend.gif) no-repeat;
}



/* end ------------------------        sidebar edits GSConsulting2010 */

/* Start ----------------Join Organization style*/
.join2 {
	width:337px;
	margin:0 0 26px -28px;
	overflow:hidden;
	position:relative;
}
.join2 fieldset {
	height:1%;
	overflow:hidden;
	padding:0px 0 0 40px;
}
.join2 .row {
	height:1%;
	overflow:hidden;
	padding:0 0 15px
}
.join2 label {
	color:#bf271e;
	width:307px;
	float:left;
	padding:0 2px 2px;
	font:20px/24px Arial, Helvetica, sans-serif;
}
* html .join2 label {margin-bottom:-1px;}
.join2 input.text {
	border:1px solid #34566f;
	width:300px;
	padding:1px 5px 3px;
	margin:0;
	font:16px Arial, Helvetica, sans-serif;
}
.join2 input.small {width:81px;}
.join2 input.medium {width:97px;}
.join2 input.button {float:right;}

/* END ------------Join Organization style GSConsul */


.addthis{

float:right;
margin-right:20px;
}

Thanks, or even some hints....................Karen

[BLiZZaRD]

The reason is because the image is being used as a background image. You either need to edit the image itself, or remove it from being a background image and control it with a margin-top: negative declaration in the CSS.

Because there are other elements in the background in that div, I wouldn't recommend using positioning of the background to accomplish this, as it would push other items into different spots.

[kroscoe777@verizon.net]

Thank you so much. The web designer did not slice any images and only provided the image as you saw. So, there is not way to over lay a div on top of another. Like z-index for images, there is no way to overlay div's. thanks

[djr33]

I think it may be possible [using z-index], but also believe it would become very messy. Any alternative is better.

[kroscoe777@verizon.net]

I was able to position it properly exploiting the css algorithm.http://www.gsconsulting2010.com/pitt/
However, the z-index is not helping when you use it as a div background. Inserting as an image inside the div doesn't work as it needs to cross over 2 divs. I appreciate your feedback. I think the designers need to send me a slice I can use.
Appreciate it.