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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    table padding in IE9

    I've run into an odd problem I can't seem to find the solution for. I have several seperator table cells with a styled <hr> tag to separate information. It looks right in Firefox and other places. but in IE, the table cells containing the HR tag are padded and I can't get rid of it. Here's a sample of what I've got:

    Code:
    <style>
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    	width:500px;
    	margin:auto;
    }
    
    #product-table {width:100%; border-bottom: 1px solid #4b7bde;}
    #product-table tr td {padding:8px 12px 8px 12px;vertical-align: top;}
    .product-header {font-size:1.4em;color:red;width:33%;line-height:.9em;}
    .product-name {font-weight:700;}
    .dark-td {background:#e5e5d5;width:33%;font-size:.8em;}
    .light-td {background:#d6d6d6;width:33%;font-size:.8em;border-left: 1px solid #4b7bde;border-right: 1px solid #4b7bde;}
    .product-separator {border-top: 1px dashed #4b7bde; border-bottom: 0px; color: rgb(255, 255, 255); height: 1px;}
    .product-ul {width:100%;list-style:disc;color:#4b7bde;padding-left:12px;}
    .product-ul span {color:#000000;}
    
    </style>
    
    <table id="product-table" style="border-collapse: collapse; " cellpadding="0" cellspacing="0">
    								<tr id="product-intro">
    									<td colspan="3" style="padding:0px 0px 0px 0px;">
    										<h3 style="line-height:.5em;color:#0a5a10;"> A Merchant Service for every Sector - which is right for you?</h3>
    										<span style="font-size:.9em;">
    											Check out our user-friendly, multifunctional point-of-sale terminals for accepting Visa, MasterCard, Amex and
    											Debit Cards, allowing you to process faster, safer and more efficiently 
    										</span>
    									</td>
    								</tr>
    								
    								<tr id="product-headers">
    									<td class="product-header lighter">THE TERMINAL</td>
    									<td class="product-header darker">THE BUSINESS</td>
    									<td class="product-header lighter">THE ADVANTAGE</td>
    								</tr>
    								<tr id="product-intro" style="" >
    									<td colspan="3" style="padding:0px;" cellpadding="0" cellspacing="0">
    										<hr style="border-top: 2px solid #4b7bde; border-bottom:0px;height:2px;margin:0px;padding:0px;">
    									</td>
    								</tr>
    								<tr id="countertop-details">
    									<td class="light-td product-name">Countertop</td>
    									<td class="dark-td">Retail, professional services, health care providers</td>
    									<td class="light-td">
    										<ul class="product-ul">
    											<li><span>Shorter wait times</span></li>
    											<li><span>Improved customer service</span></li>
    										</ul>
    									</td>
    								</tr>
    								
    								<tr id="product-intro" style="">
    									<td colspan="3" style="padding:0px;" cellpadding="0" cellspacing="0">
    										<hr class="product-separator" style="margin:0px;padding:0px;">
    									</td>
    								</tr>
    								
    								<tr id="short-range-details">
    									<td class="light-td product-name">Short range wireless</td>
    									<td class="dark-td">Restaurants, spas, salons</td>
    									<td class="light-td">
    										<ul class="product-ul">
    											<li><span>Offers payment flexibility</span> </li>
    											<li><span>Enhances service</span></li>
    											<li><span>Added security</span></li>
    										</ul>
    									</td>
    								</tr>
    								
    								<tr id="product-intro" style="">
    									<td colspan="3" style="padding:0px;" cellpadding="0" cellspacing="0">
    										<hr class="product-separator" style="margin:0px;padding:0px;">
    									</td>
    								</tr>
    								
    								<tr id="long-range-details">
    									<td class="light-td product-name">Long range wireless</td>
    									<td class="dark-td">Delivery services, taxi cabs, golf courses</td>
    									<td class="light-td">
    										<ul class="product-ul">
    											<li><span>Grows your business area</span></li>
    											<li><span>Simple and secure</span></li>
    											<li><span>Improved customer service</span></li>
    										</ul>
    									</td>
    								</tr>
    								
    								<tr id="product-intro" style="">
    									<td colspan="3" style="padding:0px;" cellpadding="0" cellspacing="0">
    										<hr class="product-separator" style="margin:0px;padding:0px;">
    									</td>
    								</tr>
    								
    								<tr id="mobile-reader-details">
    									<td class="light-td product-name">Mobile app and reader</td>
    									<td class="dark-td">Contractors, trade show vendors, trades</td>
    									<td class="light-td">
    										<ul class="product-ul">
    											<li><span>Flexible and convenient</span></li>
    											<li><span>Offers enhanced security</span></li>
    										</ul>
    									</td>
    								</tr>
    								
    								<tr id="product-intro" style="">
    									<td colspan="3" style="padding:0px;margin:0px;">
    										<hr class="product-separator" style="margin:0px;padding:0px;">
    									</td>
    								</tr>
    								
    								<tr id="contactless-details">
    									<td class="light-td product-name">Contactless</td>
    									<td class="dark-td">Retail, grocery stores, entertainment venues, gas stations</td>
    									<td class="light-td">
    										<ul class="product-ul">
    											<li><span>Fast and easy to use</span></li>
    											<li><span>Flexible and convenient</span></li>
    										</ul>
    									</td>
    								</tr>
    								
    								<tr id="product-intro" style="">
    									<td colspan="3" style="padding:0px;">
    										<hr class="product-separator" style="margin:0px;padding:0px;">
    									</td>
    								</tr>
    								
    								<tr id="ecommerce-details">
    									<td class="light-td product-name">eCommerce</td>
    									<td class="dark-td">Professional services, subscription-based services</td>
    									<td class="light-td">
    										<ul class="product-ul">
    											<li><span>Added efficiency</span></li>
    											<li><span>Flexible and convenient</span></li>
    										</ul>
    									</td>
    								</tr>
    								
    								<tr id="product-intro" style="">
    									<td colspan="3" style="padding:0px;">
    										<hr class="product-separator" style="margin:0px;padding:0px;">
    									</td>
    								</tr>
    								
    								<tr id="virtual-details">
    									<td class="light-td product-name">Virtual terminal</td>
    									<td class="dark-td">Home and garden services, professional services</td>
    									<td class="light-td">
    										<ul class="product-ul">
    											<li><span>Grows your business</span></li>
    											<li><span>Delivers improved customer service</span></li>
    										</ul>
    									</td>
    								</tr>
    								
    							</table>

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Which kind of DOC TYPE are you using, <hr> is a block-level element.
    Depending on your DOC TYPE IE can go in quirks mode and affecting your padding.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts
    Right now I have this:

    Code:
    <!--[if IE]>
    <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//en" 
        "http://www.w3.org/TR/html4/loose.dtd">
    <![endif]-->

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts
    hmmm... you know what? I'm not sure why I didn't just style the borders of each cell. I can do that. Only problem is that the dashes are not consistent dashes across the width of the table

  • #5
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
    You also should close the hr <hr style="blabla"/>
    For the border of the table, you should put the border on the tr or changing the cell width that it looks the way you want and maybe even a background image with repeat-x.


  •  

    Posting Permissions

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