CSS - 2 Table Borders Dont Appear

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

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 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.

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

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?

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?

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&hellip;</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!

Ok this is the website: http://mydeco.com/ and if you hover over the sections/links at the top, the subnav appear. However if you go to community section & then try to hover over different sections, the subnav dont seem to appear!

This happens for a colleague of mine on FF & IE 7. However I have same browsers but this problem doesnt occur with me! she has cleared cache

Hi newbie here,

Just completed site for client, to find out that the CSS text does not appear in IE7.

This is the exact source -
<div id="homewrapper">
<div id="homeimage">
<div align="right"><a href="" target="_blank"><img src="images2/logo_07.png" alt="Enjoy England" width="131" height="178" border="0" longdesc="" /></a><a href="" target="_blank"><img src="images2/logo_09.png" alt="Tourism Newquay" border="0" longdesc="" /></a></div>
</div>
<div id="intro">
<p>For your perfect holiday in Newquay, come and stay at 12A Pentire Heights. We have a 2 bedroom self catering apartment which has fantastic sea views overlooking the world famous Fistral Beach.</p>
<p>&nbsp;</p>
<p>Pentire Heights is ideally located, being only a short walk from Fistral Beach, and a 20 minute walk from Newquay town centre. There is also a private car park space allocated to you while you stay.</p>
<p><br />
In Newquay you will find an array of shops, bars, bistros, restaurants, pubs, clubs and night life. Explore the cliff top walks along one of the eleven superb beaches or visit some of the many attractions in the town or close by, such as the Zoo, Golf Course, Trenance Leisure Park, Waterworld and the Sea Life Centre.<br />
<br />
Pentire Heights apartments in Newquay provides an ideal base for visiting the whole of Cornwall.</p>
</div>

Any help will be much appreciated! Cheers!

Hi, I was learning CSS and it didn't quite explain what the second img does.

Code:

div.img img
  {
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
  }

Also on some sites i noticed it would have more than one tag:
Code:

div.img img img img img {}

or
Code:

div div div div {}

if you could help,
thank you

Hi, so i dont know how else to explain this with out giving you the link ocixx.com/index1.html

the three buttons on the right Facebook myspace twitter, everything is perfect with them, except when you click them nothing happens, i am using css file and scripts i found on the net, cause i cant program the source to the css file is in the source to the page, i dont know what to do

The right column of this website just started appearing in the wrong place, as you can see he [deleted]

Unfortunately, i did not make the site but have been asked to fix it. I cant seem to find the cause of this at all, any help would be great, thanks!

Edit: Found the mistake, a WYSIWYG field in the admin that shows on the header was screwing up the page with invalid code.

Ok, some trouble with Fire Fox and IE.

I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it.

http://ernies.bombinaid.com

Problems

IE:
The main box areas in each page keeps going over the menu!

FireFox:
In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping.

Here is the css code:

Code:

body      {background-color: black}
.header   {width: 100%; margin-left: -1px; margin-top: -4px;}
.links    {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main     {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2    {background: url(corner1.gif) 0 100% no-repeat}
.main3    {background: url(corner2.gif) 100% 100% no-repeat}
h3        {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link    {text-decoration: underline; color: black;}
a:hover   {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr        {color: white}
img.ajm113 {margin-left: 30cm;}

Can someone help me out here?

i have two css boxes on the company lan, and for one person the two boxes wont appear? is this a problem with internet explorer?