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):
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
Thanks for the replies guys. CSM - The HTML you mean - Do you need it? GWIz - Thanks but that didnt work. Nothing changes.
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.
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.