CSS Table Help

Discussion in 'CSS' started by pinkytoe, Nov 23, 2010.

  1. #1
    Hey Guys

    I'm looking for some help with adding margin to the bottom of a table, but it keeps adding it inside the table. I want the H3 text under the table to be further down.

    http://nuclearpoker.net/bpts/bluefire-poker-review

    You can see the <h3>Overview</h3> is too close to the table. Has any one ideas on what to do to the css to change this?

    Code is below, I appreciate any help

    /************iantable-style***************/
    
    #iantable{
    	background-image:url(images/iantable-top-bg.jpg);
    	background-repeat:no-repeat;
    	background-position:top center;
    	width:593px;
    	margin:0 auto;
    	overflow:hidden;
           
    	}
    
    #iantable-left{
    	width:180px;
    	height:243px;
    	float:left;
    	padding:10px;
    	}
    
    .poker-star-image{
    	margin-bottom:10px;
    	padding:0;
    	}
    
    #poker-star-list{
    	background-color:#FFFFFF;
    	width:170px;
    	float:left;
    	padding:5px;
    	}
    
    #poker-star-list p{
    	margin-bottom:5px;
    	font-family:"Tahoma";
    	}
    
    #poker-star-list p span{
    	color:#AF0201;
    	}
    
    .visit-site{
    	background-image:url(images/visit-site-button.jpg);
    	width:155px;
    	height:29px;
    	border:0 none;
    	margin-left:7px;
    	cursor:pointer;
    	}
    
    #iantable-right{
    	width:393px;
    	
    	float:left;
    	
    	}
    	
    #iantable-right-top{
    	width:393px;
    	height:57px;
    	float:left;
    	}
    
    #iantable-right-heading{
    	width:180px;
    	height:39px;
    	float:left;
    	padding:18px 0 0 12px;
    	}
    
    #iantable-right-heading p{
    	font-family:Tahoma;
    	font-size:18px;
    	font-weight:bold;
    	color:#000000;
    	padding:0;
    	}
    
    #iantable-right-heading .bonus-text{
    	color:#DD0000;
    	font-size:14px;
    	font-family:Tahoma;
    	font-weight:bold;
    	}
    
    #iantable-right-flag{
    	width:201px;
    	height:57px;
    	float:left;
    	}
    
    #iantable-right-flag ul{
    	list-style:none;
    	padding-top:18px;
    	}
    
    #iantable-right-flag ul li{
    	list-style:none;
    	float:left;
    	padding-right:10px;
    	}
    
    #iantable-content{
    	width:393px;
    	
    	float:left;
    	}
    
    #iantable-content p{
    	font-family:verdana;
    	font-size:12px;
    	color:#000000;
    	padding:5px 8px;
    	}
    
    #iantable-content ul{
    	list-style:none;
    	padding-left:10px;
    	padding-top:10px;
    	}
    
    #iantable-content ul li{
    	list-style:none;
    	float:left;
    	padding-right:5px;
    	}
    
    #iantable-content .use-promo{
    	background-image:url(images/yellow-button.jpg);
    	width:229px;
    	height:40px;
    	border:0 none;
    	cursor:pointer;	
    	}
    	
    
    #iantable-content .use-promo p{
    	text-align:center;
    	font-family:"verdana";
    	font-weight:bold;
    	font-size:13px;
    	padding:0;
    	margin:0;	
    	}
    
    #iantable-content .use-promo a{
           text-decoration: none;
    
    }
    
    #iantable-content .use-promo .upto{
    	font-size:16px;
    	}
    
    
    #iantable-content .read-review{
    	background-image:url(images/read-review.png);
    	width:137px;
    	height:31px;
    	border:0 none;
    	cursor:pointer;
    	margin-top:8px;
    	}
    
    #iantable-bottom{
    	background-image:url(images/iantable-bottom.jpg);
    	background-repeat:no-repeat;
    	background-position:bottom;
    	width:593px;
    	height:9px;
    	float:left;
            
    
    	}
    
    #iantable-repeat{
    	background-image:url(images/iantable-bg-repeat.jpg);
    	width:593px;
    	background-repeat:repeat-y;
    	float:left;
    	}
    /************iantable-style***************/
    
    Code (markup):
     
    pinkytoe, Nov 23, 2010 IP
  2. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #2
    Found the markup lol

    Okay, what the hell is this?

    
    <p>        <!--[if !IE]>iantable-repeat<![endif]--></p> 
    
    Code (markup):
    What does "iantable-repeat" do or what should it do?

    Add

    
    margin-bottom:10px;
    
    Code (markup):
    to #iantable-repeat
     
    CSM, Nov 23, 2010 IP
  3. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Try adding a margin-bottom:15px; to #iantable-repeat. You can adjust the height as needed.
     
    Last edited: Nov 23, 2010
    GWiz, Nov 23, 2010 IP
  4. pinkytoe

    pinkytoe Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    Thanks for the replies guys.

    CSM - The HTML you mean - Do you need it?

    GWIz - Thanks but that didnt work. Nothing changes.
     
    pinkytoe, Nov 23, 2010 IP
  5. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #5
    LOL GWiz ;)

    Your typo is fun :D

    No I don't need the HTML anymore ;)
     
    CSM, Nov 23, 2010 IP
  6. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Haha, yes I did a typo. I fixed it. Try the code I posted above again.
     
    GWiz, Nov 23, 2010 IP
  7. pinkytoe

    pinkytoe Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #7
    Nice one CSM

    Worked a treat.

    IDK what the
    <p>        <!--[if !IE]>iantable-repeat<![endif]--></p>
    Code (markup):
    is. It was given to me by the coder/designer.

    Also, why does the fix go into Ian-repeat instead of #iantable{

    Excuse the n00b questions.
     
    pinkytoe, Nov 23, 2010 IP
  8. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Because iantable-repeat is the container that wraps around iantable AND iantable-bottom. So we are applying a margin on the parent container. Otherwise you would have a gap between the table and the bottom part of your table. You can try it and see what happens.
     
    GWiz, Nov 23, 2010 IP
  9. pinkytoe

    pinkytoe Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #9
    Thanks Gwiz

    Fair play you.

    Same goes CSM, tyvm
     
    pinkytoe, Nov 23, 2010 IP