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.http://www.gsconsulting2010.com/pitt/pa.jpg

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.