|
CSS - Resetting Table Borders
I have a page that is generated with php and contains several page breaks with multiple tables in between. The borders of the tables are generated with Quote:
TABLE { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; } and are needed in odd pages. The even pages tables don't need borders at all. How do I handle this? I tried generating another css file with the BORDER values to be 0px but it didn't work. Any ideas? Evan Similar TutorialsHi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? While styling table I would like to have black row border all the way, but currently cell borders (grey) overlay them (1px, but still) - like in the image: Bellow is my css. What do I change? Thanks. Code: .list_f {
padding: 0px;
margin: 0px;
border-width: 1px;
border-style: solid;
border-color: #F1EFE2;
border-collapse: collapse;
empty-cells: show;
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
}
.list_f th {
text-decoration:none;
font-weight:normal;
background-color:#F3F3F3;
margin: 0px;
padding: 2px;
/* text-align: left;*/
vertical-align:middle;
height:22px;
border-collapse: collapse;
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: #000000;
border-right-color: #CCCCCC;
border-bottom-color: #000000;
border-left-color: #CCCCCC;
}
.list_f td {
margin: 0px;
padding: 2px;
border-collapse: collapse;
vertical-align:middle;
height:22px;
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: #000000;
border-right-color: #EBEBEB;
border-bottom-color: #000000;
border-left-color: #EBEBEB;
}
.list_f tr {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
}
I am trying to make a nice thin border around a table and all the table cells. It need to work on both windows and macs... If I add this to my table tag [ style="border-collapse: collapse" bordercolor="#808080" ] it give me a nice border in IE, but not so great on a mac (big and thick). I also want to be able to add it into a style sheet and just add the style tag to the table, but I can't seem to get any of it to work. Anyone have any examples or advice? Thanks! I am learning CSS and wish to put a border around selected tables using the following code: table.sidebar { border: 2px black; padding: 50px } Something similar to this code was working OK earlier today, but now it won't. The cell padding command works, but other tags like border, width, etc., are not. I have tried disabling all other table styles in the CSS. Any ideas? I am using MS FrontPage 2002. Also, whys is it that when I apply a style to a table, like the one above, FrontPage puts in the following HTML code: <table class="sidebar" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> If I go to remove it to <table class="sidebar"> all of the formatting is lost. Seems like this is defeating the whole purpose of CSS Thanks, Keith I'd like to have a class in my style sheet that gives a table a 1 px border, something like this: Quote: <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%">test</td> </tr> </table> But I'm unsure how to do it. Hey guys. At the moment i have made a 100% colored table. What i am trying to do is add a 1px colored border to the top of the table and a 2px colored border to the bottom of the table. Ive tried several different approaches but i never get the result i am looking for. Can anyone help me out with this? Here is my code: Quote: <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr bgcolor="#000033"> <td align="left"><font face="Arial, Helvetica, sans-serif" size="6"><b><font color="#FFFFFF"> <a name="top">Tiffany and Co Neckless and Braclet Set</a></font></b></font></td> </tr> James Okay, I have a table and I can center it using css, and I can turn on the outside border, but I cannot seem to turn on the row borders. How do I do this. I tried.style="border:5px outset #a0a0a0; margin-left:auto;margin-right:auto; margin-top:15%;" which works for the outside border and centering, but to turn on the inside cell row borders I had to use border="3" and then I am unable to center the table on the page no matter what I do. How do I center this table properly using css with both outside border and the row border turned on. Hi all, http://www.zitrote.com/forum/index.php?act=viewforum&f=4 if you see there in IE the two borders on the right dont appear in the topic listing but in FF they do?? I'd like to do something like this: Quote: <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#666666" width="100%"> <tr> <td>Test</td> </tr> </table> But I don't want to use an inline style tag. I tried this: Quote: <html> <head> <style> .border { border-color: #666666; border-collapse: collapse; border: 1px; } </style> </head> <body> <table class="border" cellpadding="0" cellspacing="0" width="100%"> <tr> <td>Test</td> </tr> </table> </body> </html> But it does not work. What am I doing wrong? Hi there, Everyone: Firstly, I am a CSS noob... My site is: wwwDOTincenseforpeaceDOTcom (change the word DOT to a . please, new users are not allowed to post URLs on this forum. Thanks) I have a red background gif on my site. In firefox, it looks great. It DOESN'T show through the cell borders of the main table. However, it is showing through the cell borders of a table in Internet Explorer (at least IE 8, haven't checked with earlier versions of IE). Any idea on how to get it to stop showing through on IE? This is what I THINK is the main table CSS (I told you I am a noob when it comes to CSS). #content-container{ clear:both; width:100%; border-style:solid; border-color:#666666; border-spacing:0; border-width:0 0; /* was border-width:1px 0; before */ padding:0 0 0 0; margin:0; /* ie6 min-height hack */ height:270px; max-height:270px !important; Thanks in advance. Hi, I have a HTML page linking to a CSS file in the header. My main table is defined using class="formBody". This includes: Code: table.formBody td {
border-width: 1px 1px 1px 1px;
padding: 5px 5px 5px 5px;
border-style: solid solid solid solid;
border-color: black black black black;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
}
I need to override this on certain cells, so that a SINGLE certain cell will not have any borders (these will be cells on the bottom row, so the table will have the appearance of having half of its' actual width on the bottom row). Any ideas? I tried explicitly setting border="0" in the <td> tag and also defining a new class called "noborder" with border set to none, and then using <td class="noborder"> but neither of these work. essentially, what I want, is a table that looks like: Code:
________________________
| | | |
------------------------
|________|
Any suggestions on how to do this? Hello, I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table. Im not very experienced with css and would perfer to keep it simple. any info will help thanks Nick Carlevaris I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well. Here is a setup of my table Code: <div id="Content">
<p class='instructions'>Click a column header to sort the table.</p>
<div spry:region="jdmba">
<div spry:state="loading" class="loading">Please wait while alumni data loads…</div>
<table class="spry" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
<th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
<th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
<th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
<th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
<th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
</tr>
</table>
<div class="Overload">
<table class="spry" cellspacing="0" cellpadding="0">
<tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
<td width="108px">{last}</td>
<td width="106px">{first}</td>
<td width="269px">{account}</td>
<td width="66px">{state}</td>
<td width="82px">{hls_year}</td>
<td width="82px">{hbs_year}</td>
</tr>
</table>
</div>
</div>
Here is my CSS file Code:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#News a:link {
color: #00F;
}
#News a:hover {
color: #00F;
text-decoration: underline;
}
body {
background: #000 repeat;
}
#wrap {
background: #000;
width: 900px;
border: thick solid #9C0029;
float: left;
height: auto;
padding: 0px 0px 1em;
margin-top: 2%;
margin-left: 10%;
}
#footer {
font: bold small/50px Arial, Helvetica, sans-serif;
color: #FFF;
background: #9C0029;
text-align: center;
height: 50px;
width: 850px;
margin-left: 25px;
}
#Header {
background: #8F001C url(../images/banner.jpg) no-repeat center center;
width: 850px;
height: 150px;
margin-top: 20px;
margin-right: 20px;
margin-left: 25px;
}
h1 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
}
h2 {
font: small Georgia, "Times New Roman", Times, serif;
color: #333;
text-align: justify;
}
h3 {
font: normal medium "Times New Roman", Times, serif;
color: #FFF;
}
h4 {
font-size: small;
color: #333;
text-align: left;
}
.banners {
background: #FFF0B2;
width: auto;
height: auto;
font: 18px Arial, Helvetica, sans-serif;
padding-top: .5em;
padding-bottom: .5em;
text-indent: 10px;
}
.Content {
font: 14px/normal Georgia, "Times New Roman", Times, serif;
text-align: justify;
display: block;
padding: 2em 3em 3em;
}
.Content a:link {
color: #00F;
}
.Content a:hover {
color: #00F;
text-decoration: underline;
}
.Content a:visited {
color: #00F;
}
#inner_body {
background: #FFF;
height: auto;
width: 800px;
margin-top: 0px;
margin-left: 50px;
padding-top: 0.5em;
padding-bottom: .5em;
}
#inner_border {
margin: 0em auto auto;
border: thin solid #8E887C;
width: 775px;
padding: 1em 0em 0em;
}
#nav_bar {
height: 3em;
width: 100%;
margin-left: 0%;
text-align: center;
}
#Content {
height: auto;
width: 95%;
padding: 0em 0% 5em;
margin: 2.5% 2.55% 2%;
text-align: left;
font-family: Verdana;
}
#nav {
height: auto;
width: 20em;
}
#News {
margin-left: 2px;
height: 30%;
background: #FFF0B2;
padding: 3%;
}
#News a:visited {
color: #00F;
}
.Overload
{
height: 208px;
overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
font-family: Verdana;
font-size: 12px;
line-height:20px;
cursor: pointer;
}
.instructions {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-bottom:8px;
}
.loading {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-top:0px;
margin-bottom:8px;
color:#900;
}
table.spry th {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry td {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px; }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black. Any ideas? Thanks! Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this. So is it possible to have two or more borders in CSS and if so, how? Hi All, I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis. I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows. Code:
<!-- This is a Row that is at the top of the table -->
<table width="100%" border="0" class="fullwidth">
<tr>
<td class="head">This is a header </td>
</tr>
</table>
<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="list">
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Here is the CSS: Code:
table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}
tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}
Hi guys, I am using the following css to style a content box: Code:
/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;
BORDER-RIGHT: #d9ddb9 1px solid;
BORDER-LEFT: #d9ddb9 1px solid;
BORDER-BOTTOM: #d9ddb9 1px solid;
BORDER-TOP: #d9ddb9 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 20px;
PADDING-LEFT: 10px; FLOAT: right;
BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #fafceb;
}
.testimonies-h2 {
PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}
#testimonies H2 {
PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}
/*---------------- End of Testimonies Content Box ---------*/
I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above. I tried using this to cancel it out (placing my inline frame in a span, but it did nothing) Code:
#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}
HTML CODE: Code: <div id="testimonies"> <h2><span class="testimonies-h2">Testimonials</span></h2> <span class="testimonials"> <!-- ========== V-NewsTicker v2.2 (Freeware) ============= --> <script type="text/javascript" src="v_newsticker_1.js"></script> <!-- ======================= --> </span> </div> Can any one suggest a better CSS script for having a border in IE So far I have the following: PHP Code: border: 1px solid #0099CC; The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool. Can any one help. Thge URL is http://pfwd.org.uk/sfd/update_test3.php Hello, I can't for the life of me figure out how to get these thin white borders like on this website: http://www.viceland.com/index_us.php Is this done with a style sheet? I can't find any reference to a border. How is this done? if someone would, check out my testing grounds website... jon.endysis.org there are 3px #fff double borders going along each side of the layout (you can see them on either side of the space shuttle background) that are supposed to extend all the way down the layout, but only go until the end of the shuttle. I've learned that if I just have html br /'s after the the shuttle part they extend down for those, but for some reason don't extend down for my div class="contentleft" and my div class="contentright". if anyone wants to check my source, div id="racingstripes" is the layer that has the stripes, and it has ONLY the stripes. my css is: #racingstripes{ border-right:3px #fff double; border-left:3px #fff double; } any ideas please? i can't figure it out. thanks for any help! Hey, searched so don't give me crap. I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } ) I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> html { height: 100%; overflow: scroll; } body { font-family: tahoma, arial, sans-serif; font-size: 11px; background: #DEDEBA; margin: 0px 0px 0px 0px; color: #DEDEBA; } input, option, select, textarea { font-family: verdana, tahoma, arial, sans-serif; font-size: 11px; } .search { margin: 0px; padding: 5px 5px 5px 7px; width: 366px; height: 24px; float: right; } .input-search { width: 259px; margin: 0px 5px 0px 0px; padding: 5px; background: #DEDEBA; border-color: #666666; float: left; text-shadow: 808080; color: #808080; } </style> <script type="text/javascript" src="webfunctions.js"></script> </head> <body> <div class="search"> <form action="search.php" method="post" style="display:inline;"> <div> <input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" /> <input type="image" src="images/search.gif" /></div> </form> </div> |
|||||||