homepage Welcome to WebmasterWorld Guest from 54.234.159.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Table Borders & Image Margin/Padding
LinusIT




msg:4248745
 11:01 pm on Jan 3, 2011 (gmt 0)

Hi

I have a table with several columns and rows that require a border but the last cell in each row I don't want a border applied. I think the way I've coded it is the problem however I don't want to add a class to each cell that requires a border, I'm sure there is a better way of doing it.

Sample HTML


<table cellspacing="0" class="sizes">
<tr>
<td class="red">SIZE</td>
<td class="blue">WAIST (inch)</td>
<td class="green">LENGTH (inch)</td>
<td class="pink">WEIGHT (kg)</td>
</tr>
<tr>
<td>#*$!S</td>
<td class="blue">20</td>
<td class="green">10</td>
<td class="pink">23-26</td>
<td class="noborder"><a href="purchase.php?type=muaythai&size=#*$!S"><img src="images/shopping-cart-icon.jpg" alt="" width="35" height="35" class="buynow" /></a></td>
</tr>
<tr>
<td>XXS</td>
<td class="blue">22</td>
<td class="green">11</td>
<td class="pink">26-34</td>
<td class="noborder"><a href="purchase.php?type=muaythai&size=XXS"><img src="images/shopping-cart-icon.jpg" alt="" width="35" height="35" class="buynow" /></a></td>
</tr>
<table>


Relevant CSS:


.sizes {font-weight:bold; font-size:20px; text-align:center; width:500px;border:1px solid #000;}
.sizes td {padding:5px; border:1px solid #000;}
.noborder td{border:none;}
.buynow {margin:0; padding:0;}
.green {color:#69ED10;}
.pink {color:#D61FF3;}
.blue {color:#263FFB;}
.red {color:#F00;}


Also

The last cell contains an image and I'd like to remove all margin & padding styles as this bulks up the entire row and looks silly. I have added class="buynow" to each image but it's not taken into effect. In my stylesheet I have this which seems to be the problem:

#content-body img {float:left;margin:5px;padding:2px;}


Is there any way around this other than recoding other sections of the site?

Many thanks

 

milosevic




msg:4249284
 9:34 am on Jan 5, 2011 (gmt 0)

Hi LinusIT,

Try changing your rules for the 'buynow' class to be on .noborder td

The padding you want to remove should be on the parent td, rather than the contained anchor or image.

It's good in addition to reset images to not use padding or margins for the whole site at the top of your css file with a rule like:

img {
margin 0; padding 0;
}

Hope this helps!

LinusIT




msg:4249317
 11:08 am on Jan 5, 2011 (gmt 0)

Thanks Milosevic

I looked at the code again and made some changes. Seeing as each cell had it's own class anyway, I added the border style to these and left the buynow cell without a border.

.sizes {font-weight:bold; font-size:20px; text-align:center;}
.sizes td {padding:7px; width:95px;}
.noborder td{border:none;margin:0; padding:0;}
.purchase {font-size:12px;}
.grey {color:#333;border:1px solid #000;}
.green {color:#69ED10;border:1px solid #000;}
.pink {color:#D61FF3;border:1px solid #000;}
.blue {color:#263FFB;border:1px solid #000;}
.red {color:#F00;border:1px solid #000;}


I tried adding the img code you suggested but this did nothing, possibly because I already have the same code under *. I added the following to get around the image padding & margin

#content-body img.buynow {float:left; margin: 0px; padding:0px;}

milosevic




msg:4249908
 5:02 pm on Jan 6, 2011 (gmt 0)

Hi, glad you've sorted it, yes, a * rule will do exactly the same thing.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved