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
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Removing space between button and text

    I need help removing the space between the button and the text. Here's the url: http://kingdomhearts7.com/test4/index.html#


    Here's the HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Blue State Strong Brand</title>
    <meta name="description" content="Official Blue State Strong Brand website. Represent your blue state pride in style. Click to shop now.">
    <meta name="keywords" content="blue state, democrat, liberal, politics, political, election, election 2014, election 2016">
    
    		<link rel="stylesheet" type="text/css" href="css/all.css" />
    		<link rel="stylesheet" type="text/css" href="css/reset.css" />
    		<link rel="stylesheet" type="text/css" href="css/960.css" />
    		<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    		<script type="text/javascript" src="js/easySlider1.7.js"></script>
    		<script type="text/javascript" src="js/cufon.js"></script>
    		<script type="text/javascript" src="js/cufon-fonts.js"></script>
    		<script type="text/javascript" src="js/slickster.js"></script>
    		<!-- fancy box -->
    		<script type="text/javascript" src="js/jquery.lazyload.js"></script>
    		<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    		<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.1.js"></script>
    		<link type="text/css" href="js/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" media="screen" />
    		<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" /><![endif]-->
    	</head>
    	<body class="glacier-page">
    		<!-- start header -->
    		<div id="header">
    			<div class="header-h container_12">
    				<div class="holder grid_5">
    					<h1 class="logo"><a href="#">Blue State Strong</a></h1>
    <br />
    <br />
    					<strong class="slogan">Go Blue or<br />Go Home!<br /></strong>
    					<p>Welcome to the Official Blue State Strong Brand website. Click below to visit the Blue State Strong Brand store or click to the right to watch the Blue State Strong Brand video.</p>
    					<!-- start buttons -->
    					<ul class="buttons">
    							<li class="buy-h">
    							<a href="http://www.cafepress.com/bluestatestrong" class="buy">
    								<span class="l"><span>Buy</span></span>
    								<span class="r"></span>
    							</a>
    						</li>
    					</ul>
    <p>Powered by CafePress</p>
                           
    				</div>
                				<!-- start gallery -->
    
    <center><iframe src="http://free.timeanddate.com/countdown/i3rugydv/n179/cf12/cm0/cu4/ct0/cs0/ca0/co1/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTue%20Nov%204%2C%202014/tac000/tptTime%20since%20Event%20started%20in/tpc000/iso2014-11-04T00:00:00/bo2" frameborder="0" width="148" height="52"></iframe></center>
    
    
                                     <br />
                                     <br />
    				<iframe width="560" height="315" src="//www.youtube.com/embed/FEyRza0rJyI?rel=0"; frameborder="0" allowfullscreen></iframe>
    			</div>
    		</div>
    		
    		<!-- start gray-box -->
    		<div class="gray-box">
    			<div class="frame container_12">
    				<div class="text-holder grid_7">
                                                <div class="holder glacier">
    			<h3>News</h3>
    
    					</div>
    				</div>
                                        
                           </div>
    		</div>
    		<!-- start footer -->
    		<div id="footer">
    			<div class="footer-f">
    				<div class="footer-h container_12">
    					<div class="holder grid_7">
    						<p>&copy; 2013 Blue State Strong Brand. All Rights Reserved.</p>
    						<!-- start socials -->
    						<ul class="socials">
    							<li><a href="#" class="facebook">facebook</a></li>
    							<li><a href="#" class="twitter">twitter</a></li>
    							<li><a href="#" class="rss">rss</a></li>
    							<li><a href="#" class="flickr">flickr</a></li>
    							<li><a href="#" class="vimeo">vimeo</a></li>
    						</ul>
    					</div>
    					<!-- start mailing-form -->
    					<form action="#" class="mailing-form grid_5">
    						<fieldset>
    							<label for="join">Join Our Mailing List</label>
    							<div class="row">
    								<span class="text"><input type="text" value="E-mail address" id="join"/></span>
    								<input type="submit" value="Subscribe" class="subscribe" />
    							</div>
    						</fieldset>
    					</form>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    Here's the CSS:
    Code:
    html{
    	min-width:1000px;
    }
    body{
    	margin:0;
    	min-width:1000px;
    	color:#333;
    	font-family:Helvetica, Arial, Verdana, sans-serif;
    }
    img{border-style:none;}
    a{
    	color:#000;
    	text-decoration:none;
    }
    a:hover{
    	text-decoration:underline;
    }
    input,
    textarea,
    select{
    	font:100% Helvetica, Arial, Verdana, sans-serif;
    	vertical-align:middle;
    }
    form,fieldset{
    	margin:0;
    	padding:0;
    	border:none;
    }
    body.ocean-page{background:#0033CC;}
    body.glacier-page{background:#104064;}
    body.raspberry-page{background:#EC1F1F;}
    body.gun-metal-page{background:#222;}
    /* header start */
    #header{
    	width:100%;
    	padding:28px 0 14px;
    	min-width:1000px;
    	overflow:hidden;
    }
    .header-h:after,
    .buttons:after,
    .mailing-form .row:after,
    .saturday-post .holder:after,
    .content-h:after,
    .gray-box .frame:after{
    	content:"";
    	display:block;
    	clear:both;
    }
    .ocean-page #header{background:##0033CC;}
    .glacier-page #header{background:#0e3b5e url(../images/bg-header-glacier.jpg) no-repeat 50% 0;}
    .raspberry-page #header{background:#EC1F1F url(../images/bg-header-raspberry.jpg) no-repeat 50% 0;}
    .gun-metal-page #header{background:#1f1f1f url(../images/bg-header-gun-metal.jpg) no-repeat 50% 0;}
    #header .holder{
            padding:30px 0 0;
    	margin-left:0;
    	position:relative;
    	z-index:1;
    }
    
    
    .logo a{
    	background:url(../images/bg-logo.png) no-repeat;
    	width:350px;
            height:91px;
    	text-indent:-9999px;
    	overflow:hidden;
    	font-size:0;
    	line-height:0;
    	display:block;
    	cursor:pointer;
    }
    .slogan{
    	display:block;
    	font-size:30px;
    	line-height:36px;
    	color:#fff;
    	letter-spacing:-1px;
    	height:1%;
    	margin:0 0 30px;
    }
    #header p{
    	font-size:16px;
            line-height:24px;
    }
    .ocean-page #header p{color:#36caf4;}
    .glacier-page #header p{color:#36a2f5;}
    .raspberry-page #header p{color:#f53659;}
    .gun-metal-page #header p{color:#ccc;}
    /* .buttons start */
    .buttons{width:100%;}
    .buttons li{
    	float:left;
    	overflow:hidden;
    	position:relative;
            margin:0 0 -4px -19px;
    }
    
    .download, .buy{
    	float:left;
    	height:100px;
    	overflow:hidden;
    	font-size:18px;
            line-height:96px;
            color:#fff;
    	text-transform:uppercase;
    	font-weight:bold;
    }
    .download:hover, .buy:hover{
    	text-decoration:none;
    	position:relative;
    }
    .download span, .buy span{
    	height:200px;
    	float:left;
    	cursor:pointer;
    }
    .download .l{
    	background:url(../images/btn-download.png) no-repeat;
    	padding:0 0 0 44px;
    }
    .download .l span{
    	margin:0 -67px 0 0;
    	padding:0 0 0 45px;
    	position:relative;
    }
    .download .r{
    	width:130px;
    	background:url(../images/btn-download-r.png) no-repeat;
    }
    .buy .l{
    	background:url(../images/btn-buy.png) no-repeat;
            padding:0 0 0 44px;
    }
    .buy .l span{
            margin:0 -33px 0 0;
    	padding:0 0 0 40px;
    	position:relative;
    }
    .buy .r{
    	width:90px;
    	background:url(../images/btn-buy-r.png) no-repeat;
    }
    .download:hover .l, .buy:hover .l{
    	height:100px;
            margin:-100px 0 0;
            padding-top:100px;
    }
    .download:hover .r, .buy:hover .r{margin:-100px 0 0;}
    .gray-box .buttons{margin:0 0 13px;}
    .gray-box .buttons li{margin:17px 0 0 -3px;}
    .gray-box .buttons .buy-h{margin:17px -22px 0 14px;}
    .gray-box .download, .gray-box .buy{
    	height:66px;
    	line-height:66px;
    }
    .gray-box .download span, .gray-box .buy span{height:132px;}
    .gray-box .download .l, .gray-box .download .r, .gray-box .buy .l, .gray-box .buy .r{
    	margin:-200px 0 0;
    	padding-top:200px;
    }
    .gray-box .download .l span{
    	margin:0 -84px 0 0;
    	padding-left:28px;
    }
    .gray-box .buy .l span{
    	margin:0 -50px 0 0;
    	padding-left:23px;
    }
    .gray-box .download:hover .l, .gray-box .download:hover .r, .gray-box .buy:hover .l, .gray-box .buy:hover .r{
    	margin:-266px 0 0;
    	padding-top:266px;
    	height:66px;
    }
    .call{
    	display:block;
    	color:#cecece;
    	text-align:center;
    	position:relative;
    	font-size:14px;
    }
    .gray-box .call{color:#666;}
    .call a{
    	color:#8ed827;
    	text-decoration:underline;
    }
    .gray-box .call a{color:#5ea100;}
    .call a:hover{text-decoration:none;}
    /* gallery start */
    #header .gallery{
    	position:relative;
    	margin-right:0;
    }
    .gallery .frame{
    	width:639px;
    	overflow:hidden;
    	position:relative;
    	margin:0 -51px 0 -18px;
    }
    .gallery .frame ul{
    	width:9999px;
    	overflow:hidden;
    }
    .gallery .frame ul li{
    	float:left;
    	width:639px;
    }
    .gallery img{display:block;}
    .gallery .swicher{
    	position:absolute;
    	bottom:6px;
    	left:230px;
    	z-index:1;
    }
    .gallery .swicher li{
    	float:left;
    	display:inline;
    	margin:0 10px 0 0;
    }
    .gallery .swicher a{
    	float:left;
    	background:url(../images/btn-swicher001.png) no-repeat;
    	width:20px;
    	height:20px;
    	text-indent:-9999px;
    	overflow:hidden;
    	cursor:pointer;
    }
    .gallery .swicher a:hover{background:url(../images/btn-swicher002.png) no-repeat;}
    .gallery .swicher a.active,
    .gallery .swicher a.active:hover{background:url(../images/btn-swicher003.png) no-repeat;}
    /* saturday-post start */
    .saturday-post{
    	width:100%;
    	min-width:1000px;
    }
    .ocean-page .saturday-post{background:#4fc0df url(../images/bg-saturday-post-ocean.gif) repeat-x;}
    .glacier-page .saturday-post{background:#4ea0de url(../images/bg-saturday-post-glacier.gif) repeat-x;}
    .raspberry-page .saturday-post{background:#f56882 url(../images/bg-saturday-post-raspberry.gif) repeat-x;}
    .gun-metal-page .saturday-post{background:#ccc url(../images/bg-saturday-post-gun-metal.gif) repeat-x;}
    .saturday-post .holder{padding:24px 0 21px;}
    * html .saturday-post .holder{padding:24px 0 25px;}
    * +html .saturday-post .holder{padding:24px 0 25px;}
    .saturday-post .grid_12{
    	margin:0 0 0 -4px;
    }
    .saturday-post strong{
    	font-size:29px;
    	line-height:36px;
    }
    .ocean-page .saturday-post strong{color:#013a4a;}
    .glacier-page .saturday-post strong{color:#012a4a;}
    .raspberry-page .saturday-post strong{color:#4a010e;}
    .gun-metal-page .saturday-post strong{color:#333;}
    .saturday-post span{
    	font-size:14px;
    	line-height:36px;
    	font-weight:bold;
    	text-transform:uppercase;
    	padding:0 0 0 14px;
    }
    .ocean-page .saturday-post span{color:#3196b2;}
    .glacier-page .saturday-post span{color:#307ab2;}
    .raspberry-page .saturday-post span{color:#b23048;}
    .gun-metal-page .saturday-post span{color:#777;}
    /* content start */
    #content{
    	width:100%;
    	min-width:1000px;
    }
    .ocean-page #content{background:#daf4fb url(../images/bg-content-ocean.gif) repeat-x;}
    .glacier-page #content{background:#d9ecfa url(../images/bg-content-glacier.gif) repeat-x;}
    .raspberry-page #content{background:#fad9df url(../images/bg-content-raspberry.gif) repeat-x;}
    .gun-metal-page #content{background:#fff url(../images/bg-content-gun-metal.gif) repeat-x;}
    .content-h{padding:59px 0 55px;}
    #content .column{
    	margin:0 20px 0 0;
    	display:inline;
    }
    #content .omega{margin-right:0;}
    .column .image-holder{
    	margin:0 -3px 8px;
    	width:306px;
    	position:relative;
    }
    * html .column .image-holder{margin:0 -3px 12px;}
    * +html .column .image-holder{margin:0 -3px 12px;}
    .column .image-holder div{
    	background:url(../images/bg-image-holder.png) no-repeat;
    	width:288px;
    	height:192px;
    	padding:7px 9px;
    }
    .column img{
    	display:block;
    	position:relative;
    }
    #content h2{
    	font-size:30px;
    	line-height:36px;
    	margin:0 0 8px;
    }
    .ocean-page #content h2{color:#013a4a;}
    .glacier-page #content h2{color:#012a4a;}
    .raspberry-page #content h2{color:#4a010e;}
    .gun-metal-page #content h2{color:#333;}
    * html #content h2{margin:0 0 5px;}
    * +html #content h2{margin:0 0 5px;}
    #content p{
    	font-size:13px;
    	line-height:22px;
    }
    /* gray-box start */
    .gray-box{
    	width:100%;
    	min-width:1000px;
    	background:#f5f5f5 url(../images/bg-gray-box-ocean.gif) repeat-x;
    }
    .gray-box .frame{
    	padding:22px 0 37px;
    }
    .gray-box .text-holder{
    	margin-left:1px;
    	padding:15px 0 0;
    }
    .gray-box h3{
    	font-size:22px;
    	line-height:24px;
    	margin:0 0 2px;
    }
    .gray-box p{
    	font-size:16px;
    	line-height:24px;
    }
    .gray-box .ocean{
    	background:url(../images/arrow_ocean.png) no-repeat 100% 27px;
    	padding:0 145px 0 0;
    	height:1%;
    }
    .gray-box .glacier{
    	background:url(../images/arrow_glacier.png) no-repeat 100% 27px;
    	padding:0 145px 0 0;
    	height:1%;
    }
    .gray-box .gunmetal{
    	background:url(../images/arrow_gunmetal.png) no-repeat 100% 27px;
    	padding:0 145px 0 0;
    	height:1%;
    }
    .gray-box .raspberry{
    	background:url(../images/arrow_rasberry.png) no-repeat 100% 27px;
    	padding:0 145px 0 0;
    	height:1%;
    }
    /* footer start */
    #footer{
    	width:100%;
    	min-width:1000px;
    }
    .ocean-page #footer{
    	background:url(../images/bg-footer-ocean.gif) repeat-x;
    	color:#daf4fb;
    }
    .glacier-page #footer{
    	background:url(../images/bg-footer-glacier.gif) repeat-x;
    	color:#d9ecfa;
    }
    .raspberry-page #footer{
    	background:url(../images/bg-footer-raspberry.gif) repeat-x;
    	color:#fad9df;
    }
    .gun-metal-page #footer{
    	background:url(../images/bg-footer-gun-metal.gif) repeat-x;
    	color:#eee;
    }
    .footer-f{width:100%;}
    .ocean-page .footer-f{background:url(../images/bg-footer-ocean01.jpg) no-repeat 50% 0;}
    .glacier-page .footer-f{background:url(../images/bg-footer-glacier01.jpg) no-repeat 50% 0;}
    .raspberry-page .footer-f{background:url(../images/bg-footer-raspberry01.jpg) no-repeat 50% 0;}
    .gun-metal-page .footer-f{background:url(../images/bg-footer-gun-metal01.jpg) no-repeat 50% 0;}
    .footer-h{
    	overflow:hidden;
    	padding:21px 0 7px;
    }
    #footer .holder{margin-left:2px;}
    #footer p{
    	font-size:13px;
    	line-height:17px;
    	margin:0 0 9px;
    }
    /* socials start */
    .socials{
    	overflow:hidden;
    }
    .socials li{
    	float:left;
    	margin:0 20px 0 0;
    	display:inline;
    }
    .socials a{
    	float:left;
    	width:30px;
    	height:32px;
    	text-indent:-9999px;
    	overflow:hidden;
    	cursor:pointer;
    }
    .socials .facebook{background:url(../images/ico-facebook.png) no-repeat;}
    .socials .twitter{background:url(../images/ico-twitter.png) no-repeat;}
    .socials .rss{background:url(../images/ico-rss.png) no-repeat;}
    .socials .flickr{background:url(../images/ico-flickr.png) no-repeat;}
    .socials .vimeo{background:url(../images/ico-vimeo.png) no-repeat;}
    .socials .linkedin{background:url(../images/ico-linkedin.png) no-repeat;}
    .socials .facebook:hover{background:url(../images/ico-facebook-hover.png) no-repeat;}
    .socials .twitter:hover{background:url(../images/ico-twitter-hover.png) no-repeat;}
    .socials .rss:hover{background:url(../images/ico-rss-hover.png) no-repeat;}
    .socials .flickr:hover{background:url(../images/ico-flickr-hover.png) no-repeat;}
    .socials .vimeo:hover{background:url(../images/ico-vimeo-hover.png) no-repeat;}
    .socials .linkedin:hover{background:url(../images/ico-linkedin-hover.png) no-repeat;}
    /* mailing-form start */
    #footer .mailing-form{margin-left:7px;}
    .mailing-form label{
    	display:block;
    	font-size:13px;
    	line-height:17px;
    	padding:0 0 3px 3px;
    }
    .mailing-form .row{
    	height:1%;
    }
    .mailing-form .text{
    	float:left;
    	background:url(../images/bg-input.png) no-repeat;
    	width:254px;
    	padding:0 10px;
    	height:36px;
    }
    .mailing-form input{
    	float:left;
    	padding:0;
    	margin:0;
    }
    .mailing-form .text input{
    	width:100%;
    	background:none;
    	border:none;
    	margin:9px 0 0;
    	font-size:14px;
    	line-height:16px;
    	color:#999;
    	font-style:italic;
    	position:relative;
    }
    .mailing-form .subscribe{
    	background:url(../images/btn-submit.png) no-repeat;
    	width:138px;
    	height:67px;
    	color:#fff;
    	font-weight:bold;
    	font-size:14px;
    	cursor:pointer;
    	border:none;
    	margin:-16px -21px 0 -11px;
    	position:relative;
    }
    .mailing-form .subscribe:hover,
    .mailing-form input.hover{
    	background:url(../images/btn-submit-hover.png) no-repeat;
    }
    
    #controls { position: relative; bottom: 30px;top:0px; text-align:center;width:629px;}
    #controls li { display: inline;}
    #controls li a { display: inline-block; background: url(../images/btn-swicher001.png) no-repeat center top; width:20px; height:20px; margin:0 2px; font-size:0; line-height:0; padding-top:16px; overflow:hidden;}
    #controls li a:hover, #controls li.current a { background:url(../images/btn-swicher002.png) no-repeat;}

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,546
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Do you mean by "Buy" Button? Change the height and width, done?

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Keleth View Post
    Do you mean by "Buy" Button? Change the height and width, done?
    Yeah, I mean the buy button. So I just have to adjust the width and height of it correct?


  •  

    Posting Permissions

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