Well I am new to css and I need some help with something. I have an image on my website. It's not been uploaded yet so I cant show you a live version unfortunatly. So heres the image. Basically what I want to do with it is move it up to the top.



Here is the CSS code for the image:

#right p.testimonials{
    display:block;
    background:url(images/testimonials.gif) 0 0 no-repeat;
    width:166px;
    height:155px;
    float:left; 
    margin:0 0 22px 0;    
}

and here is the HTML

<p class="testimonials"></p>

So, I'm having trouble identifying the problem here. Please help if you can, thanks. BTW I know its a rubbish image

Is there something above this image/paragraph? It doesn't look like there is anything specifically wrong with that piece of css and html. If you post the rest of the code, it will probably help us find the problem.

Originally Posted by angele803

Is there something above this image/paragraph? It doesn't look like there is anything specifically wrong with that piece of css and html. If you post the rest of the code, it will probably help us find the problem.

/* CSS Document */

body{
    padding:11px 0 14px 0;
    margin:0;
    background-color:#EFEFDF;
    color:#000;
}
div, h1, h2, p, form, label, input, textarea, img, span{
    margin:0; padding:0;
}

ul{
    margin:0; 
    padding:0; 
    list-style-type:none;
    font-size:0;
}
.spacer{
    clear:both; 
    font-size:0; 
    line-height:0;
}
/*------------------------------------------------body--------------------*/

/*------------------------------------------------header--------------------*/
#header{
    background:url(images/header.gif) 0 0 no-repeat;
    width:981px;
    height:274px;
    position:relative;
    margin:0 auto;
}
#header ul{
    background:url(images/nav_bar.gif) 0 0 no-repeat;
    width:847px;
    height:29px;
    position:absolute;
    left:31px;
    top:6px;
    padding:0 0 0 72px;
}
#header ul li{
    background:url(images/nav_div.gif) right top no-repeat;
    height:27px;
    float:left;
    padding:0 1px 0 0;
}
#header ul li a{
    display:block;
    background:url(images/nav_bg.gif) 0 0 repeat-x;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    color:#344A04;
    background-color:inherit;
    text-decoration:none;
}
#header ul li a:hover{
    background:url(images/nav_hover.gif) 0 0 repeat-x;
    color:#fff;
    background-color:inherit;
}
#header ul li a.hover{
    display:block;
    background:url(images/nav_hover.gif) 0 0 repeat-x;
    color:#fff;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    background-color:inherit;
    text-decoration:none;
    cursor:text;
}
#header ul li.last{
    background-image:none;
    height:27px;
    float:left;
}
#header img.logo{
    position:absolute;
    left:40px;
    top:90px;
    width:249px;
    height:72px;
}
#header h1{
    background:url(images/slogan.png) 0 0 no-repeat;
    width:484px;
    height:32px;
    position:absolute;
    left:411px;
    top:108px;
    text-indent:-10000px;
}
#header p{
    font:normal 12px/19px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    position:absolute;
    left:446px;
    top:137px;
}
#header p span.txt1{
    color:#fff;
    background-color:#;
}
#header img.icon{
    position:absolute;
    left:60px;
    top:190px;
    width:174px;
    height:80px;
}
#header p.topText{
    font:normal 18px/23px Arial, Helvetica, sans-serif;
    color:#E8E8E8;
    background-color:inherit;
    position:absolute;
    left:285px;
    top:203px;
    width:588px;
}
#header p.topText span.smallTxt{
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#FF9C3A;
    background-color:inherit;
    padding:0 0 0 8px;
}
#header a.readMore{
    display:block;
    background:url(images/read_more.gif) 0 0 no-repeat;
    width:50px;
    height:38px;
    position:absolute;
    left:895px;
    top:203px;
}
#header a.readMore:hover{
    background:url(images/read_more_hover.gif) 0 0 no-repeat;
}
/*------------------------------------------------header--------------------*/

/*------------------------------------------------body--------------------*/
#body{
    width:978px;
    padding:13px 1px 13px 2px;
    margin:0 auto;
}
/*------------------------------------------------left--------------------*/
#left{
    width:357px;
    float:left;
}
#left1{
    width:324px;
    background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
    border:#DDDDCA solid 7px;
    margin:0 0 4px 0;
    padding:5px 10px 6px 9px;
    color:#878767;
}
#left1 p.pic1{
    display:block;
    background:url(images/lft_pic1a.gif) 0 0 no-repeat;
    width:88px;
    height:78px;
    margin:5px 0 0 0;
    float:left;
}
#left1 p.boxTxt1{
    float:right;
    padding:0 0 0 15px;
    border-left:#F9F9F1 solid 2px;
    font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
    width:199px;
}
#left1 p.boxTxt1 span{
    font:normal 19px/17px Arial, Helvetica, sans-serif;
    color:#D76E08;
    background-color:inherit;
    padding:0 0 0 25px;
    margin:0 0 10px 0;
    background:url(images/one.gif) 0 0 no-repeat;
    height:17px;
    display:block;
}
#left2{
    width:316px;
    background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
    border:#DDDDCA solid 7px;
    margin:0 0 4px 0;
    padding:5px 10px 6px 17px;
    color:#878767;
}
#left2 p.pic2{
    display:block;
    background:url(images/lft_pic2a.gif) 0 0 no-repeat;
    width:74px;
    height:74px;
    margin:8px 0 0 0;
    float:left;
}
#left2 p.boxTxt2{
    float:right;
    padding:0 0 0 15px;
    border-left:#F9F9F1 solid 2px;
    font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
    width:199px;
}
#left2 p.boxTxt2 span{
    font:normal 19px/17px Arial, Helvetica, sans-serif;
    color:#D76E08;
    background-color:inherit;
    padding:0 0 0 25px;
    margin:0 0 10px 0;
    background:url(images/two.gif) 0 0 no-repeat;
    height:17px;
    display:block;
}
#left3{
    width:324px;
    background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
    border:#DDDDCA solid 7px;
    margin:0;
    padding:5px 10px 6px 9px;
    color:#878767;
}
#left3 p.pic3{
    display:block;
    background:url(images/lft_pic3a.gif) 0 0 no-repeat;
    width:94px;
    height:71px;
    margin:5px 0 0 0;
    float:left;
}
#left3 p.boxTxt3{
    float:right;
    padding:0 0 0 15px;
    border-left:#F9F9F1 solid 2px;
    font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
    width:199px;
}
#left3 p.boxTxt3 span{
    font:normal 19px/17px Arial, Helvetica, sans-serif;
    color:#D76E08;
    background-color:inherit;
    padding:0 0 0 25px;
    margin:0 0 10px 0;
    background:url(images/three.gif) 0 0 no-repeat;
    height:17px;
    display:block;
}
/*------------------------------------------------left--------------------*/

/*------------------------------------------------right--------------------*/
#right{
    width:608px;
    float:right;
    background:url(images/right_panel_bg.gif) 0 0 repeat-y;
}
#right p.rightTop{
    display:block;
    background:url(images/right_top.gif) 0 0 no-repeat;
    width:608px;
    height:26px;
}
#right h2{
    font:bold 30px/22px Arial, Helvetica, sans-serif;
    color:#222222;
    background-color:inherit;
    margin:0 0 16px 0;
    padding:0 0 0 38px;
    display:block;
}
#right p.rightTxt1{
    font:normal 13px/18px Arial, Helvetica, sans-serif;
    color:#62625C;
    background-color:inherit;
    padding:0 38px 10px 38px;
}
#right p.rightTxt1 span{
    font:bold 13px/18px Arial, Helvetica, sans-serif;
    color:#5F860B;
    background-color:inherit;
}
#right p.rightTxt2{
    font:normal 13px/18px Arial, Helvetica, sans-serif;
    color:#62625C;
    background-color:inherit;
    padding:0 0 20px 38px;
    float:left;
    width:349px;
    margin:0 27px 0 0;
}
#right p.rightTxt2 span{
    font:bold 17px/18px Arial, Helvetica, sans-serif;
    color:#D76E08;
    background-color:inherit;
    border-bottom:#BCBCB5 dashed 1px;
    width:340px;
    display:block;
    margin:0 0 15px 0;
}
#right p.rightTxt3{
    font:italic 13px/18px Arial, Helvetica, sans-serif;
    color:#62625C;
    background-color:inherit;
    padding:0 0 20px 38px;
    float:left;
    width:349px;
    margin:0 27px 0 0;
}
#right p.rightPic{
    display:block;
    background:url(images/right_panel_pic.gif) 0 0 no-repeat;
    width:166px;
    height:155px;
    float:left;
    margin:0 0 22px 0;    
}
#right p.testimonials{
    display:block;
    background:url(images/testimonials.gif) 0 0 no-repeat;
    width:166px;
    height:155px;
    float:left; 
    margin:0 0 22px 0;    
}
#right p.rightBottom{
    display:block;
    background:url(images/right_bottom.gif) 0 0 no-repeat;
    width:608px;
    height:20px;
    float:left;
}
/*------------------------------------------------right--------------------*/

/*------------------------------------------------body--------------------*/

/*------------------------------------------------bodyBottom--------------------*/
#bodyBottom{
    width:946px;
    background:url(images/body_bottom_bg.gif) 0 0 repeat-x #B9B99D;
    color:#fff;
    padding:22px 13px 19px 18px;
    margin:0 auto;
}
#news{
    width:341px;
    float:left;
    margin:0 28px 0 0;
}
#news h2{
    display:block;
    background:url(images/arrow_red.gif) 0 0 no-repeat;
    padding:0 0 0 25px;
    font:bold 22px/16px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    margin:0 0 17px 0;
}
#news h3{
    display:block;
    background:url(images/date_bg.gif) 0 0 no-repeat;
    width:331px;
    height:17px;
    padding:0 0 0 7px;
    margin:0 0 10px 0;
    font:bold 11px/17px Arial, Helvetica, sans-serif;
    color:#974D04;
    background-color:inherit;
    text-transform:uppercase;
}
#news p{
    font:normal 12px/20px Arial, Helvetica, sans-serif;
    color:#F7F7EA;
    background-color:inherit;
    padding:0 0 13px 0;
}
#news p span{
    font:bold 12px/20px Arial, Helvetica, sans-serif;
    color:#2C2C1B;
    background-color:inherit;
    text-decoration:underline;
    display:block;
}
#service{
    width:338px;
    float:left;
}
#service h2{
    display:block;
    background:url(images/arrow_red.gif) 0 0 no-repeat;
    padding:0 0 0 24px;
    font:bold 22px/16px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
    margin:0 0 17px 0;
}
#service h3{
    display:block;
    background:url(images/date_bg.gif) 0 0 no-repeat;
    width:327px;
    height:17px;
    padding:0 0 0 11px;
    margin:0 0 14px 0;
    font:bold 11px/17px Arial, Helvetica, sans-serif;
    color:#974D04;
    background-color:inherit;
    text-transform:uppercase;
}
#service ul{
    padding:0;
    margin:0;
    display:block;
}
#service ul li{
    display:block;
    height:20px;
    line-height:0;
}
#service ul li a{
    display:block;
    background:url(images/arrow_white.gif) 0 7px no-repeat;
    padding:0 0 0 10px;
    font:normal 11px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#47472D;
    background-color:inherit;
    text-decoration:underline;
    height:20px;
}
#service ul li a:hover{
    color:#974D04;
    background:url(images/arrow_white_hover.gif) 0 7px no-repeat #DDDDCB;
    text-decoration:none;
}
#member{
    width:225px;
    float:right;
}
#member h2{
    display:block;
    background:url(images/member_login_bg.gif) 0 0 no-repeat;
    width:205px;
    height:31px;
    padding:0 0 0 20px;
    font:bold 16px/31px Arial, Helvetica, sans-serif;
    color:#fff;
    background-color:inherit;
}
#member form{
    width:191px;
    background:url(images/member_form_bg.gif) 0 0 repeat-x #353535;
    padding:9px 17px 24px 17px;
    color:#fff;
}
#member form label{
    font:normal 11px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
    float:left; 
    display:block;
}
#member form input.txtBox{
    width:185px;
    height:19px;
    border-left:#808080 solid 1px;
    border-top:#808080 solid 1px;
    border-right:#D4D0C8 solid 1px;
    border-bottom:#D4D0C8 solid 1px;
    color:#000;
    background-color:#fff;
    margin:0;
    padding:0;
    float:left;
}
#member form a{
    background:url(images/register_member_icon.gif) 0 0 no-repeat;
    padding:0 0 0 20px;
    font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#9CCC37;
    background-color:#353535;
    text-decoration:underline;
    float:left;
    margin:15px 0 0 0;
    width:120px;
}
#member form a:hover{
    text-decoration:none;
}
#member form input.go{
    background:url(images/btn_go.gif) 0 0 no-repeat;
    width:36px;
    height:15px;
    border:none;
    cursor:pointer;
    float:right;
    margin:15px 0 0 0;
}
/*------------------------------------------------bodyBottom--------------------*/

/*------------------------------------------------footer--------------------*/
#footer{
    width:977px;
    height:125px;
    margin:0 auto;
    background:url(images/footer_bg.gif) 0 0 repeat-x #323232;
    color:#fff;
    position:relative;
}
#footer ul{
    width:587px;
    position:absolute;
    left:11px;
    top:27px;
}
#footer ul li{
    float:left;
    color:#D4D4C6;
    background-color:inherit;
    font:normal 11px/19px Arial, Helvetica, sans-serif;
}
#footer ul li a{
    color:#D4D4C6;
    background-color:inherit;
    font:normal 11px/19px Arial, Helvetica, sans-serif;
    padding:0 7px;
    text-decoration:none;
}
#footer ul li a:hover{
    color:#D4D4C6;
    background-color:#D76E08;
}
#footer p.copyright{
    font:normal 11px/19px Arial, Helvetica, sans-serif;
    color:#D76E08;
    background-color:inherit;
    position:absolute;
    left:19px;
    top:49px;
}
#footer a.subscribe{
    background:url(images/subscribe_icon.gif) 0 2px no-repeat;
    font:normal 11px/12px Arial, Helvetica, sans-serif;
    color:#B9B99D;
    background-color:inherit;
    position:absolute;
    left:19px;
    top:68px;
    text-decoration:underline;
    width:50px;
    padding:0 0 0 18px;
}
#footer a.subscribe:hover{
    color:#9CCC37;
    background-color:inherit;
    text-decoration:none;
}
#footer a.xht{
    width:98px;
    height:20px;
    background:url(images/xhtml_bg.gif) 0 0 no-repeat;
    position:absolute;
    left:757px;
    top:23px;
}
#footer a.xht:hover{
    background:url(images/xhtml_bg_hover.gif) 0 0 no-repeat;
}
#footer a.cs{
    width:98px;
    height:20px;
    background:url(images/css_bg.gif) 0 0 no-repeat;
    position:absolute;
    left:866px;
    top:23px;
}
#footer a.cs:hover{
    background:url(images/css_bg_hover.gif) 0 0 no-repeat;
}
#footer img{
    position:absolute;
    left:880px;
    top:51px;
    width:84px;
    height:26px;
}
#footer p.design{
    font:bold 12px/19px Arial, Helvetica, sans-serif;
    color:#C5BE25;
    background-color:inherit;
    position:absolute;
    left:19px;
    top:85px;
}
#footer p.design a{
    color:#FFFFFF; background-color:inherit; text-decoration:none;
    }
#footer p.design a:hover{
    color:#C5BE25; background-color:inherit;
    }
/*------------------------------------------------footer--------------------*/

This is all the CSS code I have for my website. Please get back to me

Basically what I want to do with it is move it up to the top.

Of where or what?

Can you see that white space above the testimonials image? well I want to move it to the top of that space...

Anyone?...

surely that's a job for a graphics editor?

No, I have the graphic. I just need to know how to move the image to the top of that white space...

maybe I'm being seriously dim here, but as you have a tall image with an arrow in the white space and a decorative doobry at the bottom of it.
Surely it's just a case of;
cropping the image to just keep the doobry
or
run around the doobry with a selector tool, then cut 'n' paste the selection up to the top of the image. back fill with colour

I fail to see where CSS comes into this. if not, explain to me what I'm missing.

You gave us the CSS.. we need to see the html too.

Ohhh I forgot to mention that the arrow is just to tell you where I want to move the image. It's not part of the image. Go ahead and call me an idiot lol.

I don't think anyone is calling you an idiot - the image you put in your post looks tall and the image we see is at the bottom of this taller image. I think that's what Chris is trying to say. To solve that just move the visable image.. "Testimonials" to the top of the tall image. Please correct us if we are wrong.

Umm... I'm confused

The arrow I added in paint to tell you guys in which direction I want to move the main image lol...

If this isn't a case of editing the actual image,
would changing margin:0 0 22px 0; to margin:0; solve your problem?

Originally Posted by Insensus

If this isn't a case of editing the actual image,
would changing margin:0 0 22px 0; to margin:0; solve your problem?

Nope, didnt work.

Then please give us a link to the page so we can see what should happen?

I havn't got the website hosted yet...

fire up a temporary blog at blogger.com or wordpress.com or if you have MSN messenger use space.live.com. or tripod.lycos.com or geocities.yahoo.com etc etc

You can lock this post now I've fixed it. Thanks to Insensus. I messed around with those settings that he told me to change and it worked like magic.