Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    paypal image streching / css

    Hello everyone, new member here.

    I've read a few threads about this problem and their solution did not seem to work for my page. So I'm hoping someone here can help me out.

    Problem: I can't get the width of the paypal (envelope) image to show properly.
    the height code seems to be working fine on the page html, but not the width.

    page link

    Code:
    <div class="contentbox_small">
                   <h2>Calendar / Donate</h2>
                                <p><a href="http://www.cityonthehill.com/calendar/" target="_blank"><img class="alignleft" src='files/cal-trans.png' alt="" /></a>Check out our upcoming events at City on the Hill Church</p>
                                <p><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="3835377">
    <input name="submit" type="image" class="alignleft" src="http://www.cityonthehill.com/reflect/files/donate-trans.png" alt="PayPal" width=64 height=64 border="0" img>
    </form>
    </a>Make a donation</p>
                    </div>
    Css
    Code:
    /*Small reset*/
    body, ul, ol, h1,h2,h3,h4,h5,h6,form,li,p{
    	margin:0;
    	padding:0;
    }
    
    /*----------------------------------------
    
    1.) Styles for all Sites but especially for Mainpage
    2.) Special Styles for Resources
    3.) Special Styles for Ministires
    4.) Special Styles for Pages (for example: about)
    5.) Special Styles for Gallery
    6.) Special Styles for Contact
    
    
    ----------------------------------------*/
    
    
    
    /*----------------------------------------
    1.) Styles for all Sites but especially for Mainpage
    ----------------------------------------*/
    
    html{
    	background:#171717;
    	}
    
    body{
    	font-size:13px;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	line-height:22px;
    	color:#CCC;
    	background:#171717 url(../images/bg_top.jpg) repeat-x;
    	position:relative;
    	}
    
    #bgwrapper{
    	background:transparent url(../images/bg_big.jpg) no-repeat;
    	background-position:center 0;
    	width: 100%;
      	display: table;
    	position:relative;
    	}
    	
    #top{
    	width:980px;
    	margin:0 auto;
    	position:relative;
    	
    	}
    	
    #head{
    	position:relative;
    	height:485px;
    	}
    	
    #footer{
    	background:transparent url(../images/border.jpg) repeat-x scroll 0 19px;
    	clear:both;
    	color:#999999;
    	font-size:11px;
    	margin:0 auto 20px;
    	padding:21px 0 0;
    	text-align:center;
    	width:900px;
    	}
    	
    #logo{
    	height:72px;
    	position:absolute;
    	top:20px;
    	width:250px;
    	background-image:none;
    	}
    	
    #logo a{
    	display:block;
    	width:250px;
    	height:72px;
    	text-indent:-9999px;
    	position:relative;
    	z-index:1;
    	outline:none;
    	}
    	
    #menu{
    	position:absolute;
    	height:80px;
    	top:0;
    	right:0;
    	width:450px;
    	z-index:100;
    	}
    
    #featured-content{
    	display:block;
    	height:484px;
    	position:absolute;
    	width:100%;
    	overflow:hidden;
    	top:0;
    	}
    	
    
    .featured-item {
    	background:transparent url(../images/featured-item.png) no-repeat scroll 0 0 !important; /*Internet explorer 6 F*/
    	background:transparent url(../images/featured-item-ie.png) no-repeat scroll 0 0; 
    	display:block;
    	height:266px;
    	left:6px;
    	padding:40px;
    	position:absolute;
    	top:-500px;
    	width:888px;
    	z-index:10;
    }
    
    .featured-text{
    	float:left;
    	height:260px;
    	overflow:hidden;
    	padding-right:20px;
    	width:360px;
    	position:relative;
    	}
    	
    .featured-image{
    	float:left;
    	width:502px;
    	height:252px;
    	margin-top:6px;
    	border:1px solid #333;
    	overflow:hidden;
    	position:relative;
    	}
    	
    .featured-image a img, .featured-image img{
    	border:1px solid #111;
    	}
    	
    .featured-text .meta{
    	position:absolute;
    	bottom:0;
    	width:360px;
    	background-color:#222;
    	}
    	
    .meta{
    	background:transparent url(../images/border.jpg) repeat-x scroll 0 top;
    	color:#777777;
    	display:block;
    	font-size:10px;
    	float:left;
    	width:100%;
    	}
    	
    #top .current-item{
    	top:93px;
    	}	
    
    #reflect{
    	position:relative;
    	display:block;
    	margin:0 auto;
    	height:100px;
    	width:968px;
    	background:transparent url(../images/reflect-help-trans.png) no-repeat;
    	bottom:-431px;
    	left:0;
    	}
    
    .next-item{
    	display:block;
    	height:74px;
    	width:48px;
    	background:transparent url(../images/icon-next-trans.png) no-repeat;
    	position:absolute;
    	text-decoration:none;
    	z-index:22;
    	text-indent:-9999px;
    	left:190px;
    	bottom:10px;
    	outline:none;
    	visibility:hidden;
    	cursor:pointer;
    	}
    	
    .next-item:hover{
    	background:transparent url(../images/icon-next-trans.png) no-repeat 0px -74px;
    	}
    	
    #main{
    	margin-top:5px;
    	position:relative;
    	float:left;
    	width:100%;
    	}
    	
    .contentbox_small{
    	float:left;
    	padding-left:40px;
    	width:270px;
    	}
    	
    
    
    
    /*Main Menu*/
    .lavaLamp {
        position: absolute;
        height: 29px; 
        padding: 15px; 
    	margin: 24px 0 0 0;
    }
    
    .lavaLamp li {
    	float: left;
    	list-style: none;
    }
    
    .lavaLamp li.back {
    	background: url(../images/lava.png) no-repeat right -30px !important;
    	background: url(../images/lava-ie.png) no-repeat right -30px;
    	width: 9px; 
    	height: 30px;
    	z-index: 8;
    	position: absolute;
    }
    
    .lavaLamp li.back .left {
    	background: url(../images/lava.png) no-repeat top left !important;
    	background: url(../images/lava-ie.png) no-repeat top left;
    	height: 30px;
    	margin-right: 9px;
    }
    
    .lavaLamp li a {
    	position: relative; 
    	overflow: hidden;
    	text-decoration: none;
    	color: #fff; 
    	outline: none;
    	text-align: center;
    	height: 30px; 
    	top: 4px;
    	z-index: 10; 
    	letter-spacing: 0;
    	float: left; 
    	display: block;
    	padding:0 10px;
    }
    
    .tooltip_image2{
    	position:absolute;
    	z-index:200;
    	border:1px solid #4f4f4f;
    	background-color:#202020;
    	padding:5px;
    	color:#fff;
    	left:-9999px;
    	top:0px;
    }
    
    
    /*FONTs Images basic selectors*/
    
    h1,h2,h3,h4,h5,h6{
    	line-height:1.8em;
    	font-weight:normal;
    	background:transparent url(../images/border.jpg) repeat-x 0 bottom;
    	margin:0 0 4px;
    	color:#fff;
    	clear:both;
    	}
    	
    h1{font-size:22px;}
    h2{font-size:20px;}
    h3{font-size:18px;}
    h4{font-size:17px;}
    h5{font-size:16px;}
    h6{font-size:14px;}
    
    p{padding:0 0 22px 0}
    
    a{color:#fff; text-decoration:underline;}
    a:hover{color:#eee; text-decoration:none;}
    
    blockquote{
    padding:5px 30px 0 15px;
    background-repeat:no-repeat;
    background-position:top left ;
    margin:10px 0 10px 15px;
    border-left:3px solid #fff;
    color:#fff;
    }
    
    blockquote em{
    color:#ff0000;
    padding:0px 40px  0px 0px;
    background-repeat:no-repeat;
    background-position:top right;
    display:block;
    text-align:right;
    font-style:italic;
    }
    
    #top .noborder, #top .noborder a, #top noborder ima a{
    	border:none;
    	padding:0;
    	}
    
    #main img{
    	border:1px solid #333;
    	padding:4px;
    	background-color:#111;
    	}
    
    .alignright{
    	float:right;
    	margin:4px 0 10px 10px;
    	}
    	
    .alignleft{
    	float:left;
    	margin:4px 10px 10px 0px;
    	}
    	
    .floatright{float:right;}
    .floatleft{float:left;}
    .clearboth{clear:both;}
    	
    #main ul{
    	list-style-type:none;
    	list-style-position:outside;
    	}
    	
    #main .contentbox_big ul{
    	list-style-type:disc;
    	list-style-position:outside;
    	padding:0 0 20px 20px;
    	}
    	
    #main ol{
    	list-style-position:outside;
    	padding:0 0 20px 20px;
    	}
    	
    #main li{
    	clear:both;
    	float:left;
    	width:100%;
    	}
    	
    .contentbox_small li a{
    	display:block;
    	width:100%;
    	border-bottom:1px solid #333;
    	color:#eee;
    	text-decoration:none;
    	padding:3px 0;
    	float:left;
    	}
    
    .contentbox_small li a:hover{
    	background-color:#111;
    	color:#fff;
    	}
    
    .contentbox_small li a:hover strong{
    	font-weight:bold;
    	}
    	
    .contentbox_small li strong{
    	padding:0px 3px;
    	float:left;
    	font-weight:normal;
    	width:212px;
    	}
    
    .contentbox_small li a span{
    	padding:0px 3px;
    	float:right;
    	font-size:11px;
    	color:#999;
    	}
    
    
    	
    	
    /*----------------------------------------
    2.) Special Styles for Blog
    ----------------------------------------*/
    
    .contentbox_big{
    	float:left;
    	padding-left:42px;
    	width:582px;
    	}
    
    .subheading{
    	padding:20px 0 0;
    	}
    
    .blog_entry{
    	clear:both;
    	padding-bottom:40px;
    	float:left;
    	width:100%;
    	}
    	
    .blog_entry .meta{
    	background-position:bottom;
    }
    
    /*----------------------------------------
    3.) Special Styles for Portfolio
    ----------------------------------------*/
    .page_portfolio #head{
    	position:relative;
    	height:485px;
    	height:88px;
    	}
    
    .page_portfolio #top{
    	min-height:500px;
    	}
    	
    .page_portfolio .featured-item{
    	position:relative;
    	top:0;
    	}
    	
    .page_portfolio #main .featured-item img, .page_portfolio #main .featured-item a img{
    	border:1px solid #111111;
    	padding:0;
    	}
    
    /*----------------------------------------
    4.) Special Styles for Pages (for example: about)
    ----------------------------------------*/
    
    .page_mass_content #head{
    	position:relative;
    	height:485px;
    	height:88px;
    	}
    
    .page_mass_content #top{
    	min-height:500px;
    	}
    
    .xlarge{
    	background:url(../images/xlargebox-trans.png) no-repeat top center;
    	padding-top:30px;
    	margin-top:5px;
    	}
    	
    
    /*----------------------------------------
    5.) Special Styles for Gallery
    ----------------------------------------*/
    
    .page_gallery #head{
    	position:relative;
    	height:485px;
    	height:88px;
    	}
    	
    .page_gallery #top{
    	min-height:500px;
    	}
    	
    .thumb{
    	background:transparent url(../images/bg-thumb.png) no-repeat scroll 0 0 !important;
    	background:transparent url(../images/bg-thumb-ie.png) no-repeat scroll 0 0;
    	float:left;
    	height:130px;
    	margin:8px 8px 0 0;
    	position:relative;
    	width:130px;
    	display:inline;
    	}
    	
    #main.thumb img, .thumb a img{
    	display:block;
    	margin:24px auto 0 auto;
    	height:72px;
    	width:72px;
    	position:relative;
    	z-index:2;
    	}
    	
    #main .thumb a img:hover{
    	border:1px solid #D01276;
    }
    
    /*----------------------------------------
    6.) Special Styles for Contact
    ----------------------------------------*/
    
    .contentbox_medium{
    	width:426px;
    	float:left;
    	padding-left:42px;
    	}
    	
    .contentbox_medium li a{
    	display:block;
    	width:100%;
    	border-bottom:1px solid #333;
    	color:#eee;
    	text-decoration:none;
    	padding:3px 0;
    	float:left;
    	}
    
    .contentbox_medium li a:hover{
    	background-color:#111;
    	color:#fff;
    	}
    
    .contentbox_medium li a:hover strong{
    	font-weight:bold;
    	}
    	
    .contentbox_medium li strong{
    	padding:0px 3px;
    	float:left;
    	font-weight:normal;
    	width:368px;
    	}
    
    .contentbox_medium li a span{
    	padding:0px 3px;
    	float:right;
    	font-size:11px;
    	color:#999;
    	}
    
    .invalid-form{
    	border:1px solid #D01276;
    	}
    	
    form p{
    	padding:0 0 10px 0;
    	}
    
    input, textarea{
    	border:1px solid #333;
    	margin:1px;
    	font-size:13px;
    	font-family:Arial, Helvetica, Verdana, sans-serif;
    	color:#fff;
    	padding:4px;
    	background-color:#171717;
    	}
    	
    input{
    	width:170px;
    	}
    	
    textarea{
    	width:340px;
    	height:92px;
    	overflow:auto;
    	}
    
    #send{
    	cursor:pointer;
    	}
    #send:hover{
    	background-color:#fff;
    	color:#171717;
    	}
    
    .page_contact .featured-image {
    	border:none;
    	float:left;
    	height:auto;
    	padding:32px 0 0;
    	width:502px;
    	background: transparent url(../images/mail_bg.jpg) 390px 90px no-repeat;
    }
    
    label{
    	padding-left:10px;
    	}
    	
    .blocklabel{
    	display:block;
    	padding:0 0 10px;
    	}
    thank you for your help

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    .alignleft {/*style1.css (line 324)*/
    float:left;
    margin:4px 10px 10px 0;
    width:auto;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    troy7890 (03-10-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    that was easy - thanks abduraooft


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •