Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member GeZe's Avatar
    Join Date
    Dec 2003
    Posts
    330
    Member #
    4381
    Hi,
    I have a problem with some spans. I want them to be 50 by 50 pixils, but they shrink down to surrond the content of the span and don't expand to 50x50 pixils.

    Here is the CSS for the spans
    HTML Code:
    .squarenullnull {
       	height: 50px;
       	width: 50px;
       	border: 1px solid #000000;
       	margin: 0px;
       }
       
       /* P1 */
       
       .squarehastatiP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(hastati_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squareprincipesP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(principes_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squaretriariiP1  {
       	height: 50px;
       	width: 50px;
       	background-image:	url(triarii_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squarepilumP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(pilum_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squarespecialP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(special_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       
       /* P2 */
       
       .squarehastatiP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(hastati_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squareprincipesP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(principes_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squaretriariiP2  {
       	height: 50px;
       	width: 50px;
       	background-image:	url(triarii_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       
       .squarepilumP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(pilum_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squarespecialP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(special_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
    Here is the CSS for the entire page:
    HTML Code:
    .body {
           margin: 0px;
           left: 0px;
           top: 0px;
           border: 1px solid #E1E1E1;
           width: 770px;
           font-family: Verdana, Arial, Helvetica, sans-serif;
           height: 100%;
       }
       .topbar {
           background-color: #E1E1E1;
           padding: 4px 4px 4px 10px;
           position: relative;
           z-index: 3;
           left: 0px;
           top: 0px;
           height: 20px;
       }
       .realbody {
           margin-top: 0px;
           margin-right: 0px;
           margin-bottom: 0px;
           margin-left: 0px;
       }
       .topbarlink {
           color: #000000;
           text-decoration: none;
       }
       .topbarlink2 {
           border-top-width: 1px;
           border-right-width: 1px;
           border-bottom-width: 1px;
           border-left-width: 1px;
           border-top-style: solid;
           border-right-style: solid;
           border-bottom-style: solid;
           border-left-style: solid;
           border-top-color: #D6D6D6;
           border-right-color: #ADADAD;
           border-bottom-color: #ADADAD;
           border-left-color: #D6D6D6;
           padding: 3px;
           position: relative;
           background-color: #EEEEEE;
           cursor: hand;
       }
       .sidebar {
           background-color: #FFFFFF;
           float: right;
           position: relative;
           z-index: 2;
           border-left-width: 1px;
           border-left-style: solid;
           border-left-color: #E1E1E1;
           width: 200px;
           height: 100%;
           padding: 0px 0px 0px 5px;
       
       }
       .board {
           border: 1px solid #000000;
           position: relative;
           z-index: 2;
           left: 11px;
           top: 10px;
           width: 500px;
           padding: 10px;
           margin-bottom: 20px;
       }
       .row {
           height: 50px;
           width: 500px;
           margin: 0px;
           padding: 0px;
       }
       .gamestats {
           height: 300px;
           margin-top: 5px;
       }
       .abbrv {
           
       }
       .sidebartitle {
           font-size: 14pt;
           color: #3399CC;
       }
       a.topbarlink:hover {
           color: #3399CC;
       
       }
       .gamestats-playerturn {
           color: #FFFFFF;
           background-color: #3399CC;
           margin-top: 6px;
           margin-bottom: 6px;
           padding-top: 1px;
           padding-bottom: 1px;
       }
       /* ################### SQUARE CLASSES ################### */
       
       .squarenullnull {
       	height: 50px;
       	width: 50px;
       	border: 1px solid #000000;
       	margin: 0px;
       }
       
       /* P1 */
       
       .squarehastatiP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(hastati_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squareprincipesP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(principes_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squaretriariiP1  {
       	height: 50px;
       	width: 50px;
       	background-image:	url(triarii_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squarepilumP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(pilum_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squarespecialP1 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(special_p1.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       
       /* P2 */
       
       .squarehastatiP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(hastati_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squareprincipesP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(principes_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squaretriariiP2  {
       	height: 50px;
       	width: 50px;
       	background-image:	url(triarii_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       
       .squarepilumP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(pilum_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squarespecialP2 {
       	height: 50px;
       	width: 50px;
       	background-image:	url(special_p2.jpg);
       	border: 1px solid #000000;
       	margin: 0px;
       }
       .squarelink {
           color: #FFFFFF;
           text-decoration: none;
           background-color: #000000;
           float: left;
       }
    Sample row:
    HTML Code:
    <div class="row"> 
     	<input name="squareselect" value="00" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="01" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="02" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="03"  type="radio" />
     	<a href="? 
     	<input name="squareselect" value="04" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="05" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="06" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="07" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="08" type="radio" />
     	<a href="? 
     	<input name="squareselect" value="09" type="radio" />
     	<a href="?
    -GeZe

  2.  

  3. #2
    Senior Member GeZe's Avatar
    Join Date
    Dec 2003
    Posts
    330
    Member #
    4381
    awnsered:

    it only works with divs, it doesn't work with spans
    -GeZe


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:46 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com