Any CSS gurus? Need help with multiple table formatting.

Reply Subscribe

Thread Tools

Search this Thread

Dec 30, 2005 | 05:49 PM

Cebby

Thread Starter

Registered User

Joined: Sep 2002

Posts: 11,199

Likes: 2

From: Pittsburgh, PA

Any CSS gurus? Need help with multiple table formatting.

First a little background...

Fairly new to website dev, but learning fast. I've found through experience and what I'm reading that Firefox and IE handle many things differently. I'm tackling one nuance at a time...

I like using tables. The problem is, I have three diffferent styles of tables represented in one of my pages. I can't for the life of me figure out how to assign different CSS values for three different looks (main prob with Firefox is that it does not recognize "bordercolor" in the HTML, but does recognize "border-color" in the CSS file.

So, in a nutshell, all of my table bordercolor formatting must be in a CSS so it appears the same in both Firefox and IE.

Here's the page:
http://rigs.corequipment.com/cebby_site/engine.htm

The first table is the one with the title. This one is displaying properly (background not in CSS, just border-color)

The second table style would be the ones showing the pics. I want these to have no border showing at all.

The thrid table style would be the links (same deal, background handled manually, but I want border color to be the background color (#000033).

Anyone know how I can do this??

Last edited by Cebby; Dec 30, 2005 at 05:51 PM.

Dec 31, 2005 | 07:57 AM

Cebby

Thread Starter

Registered User

Joined: Sep 2002

Posts: 11,199

Likes: 2

From: Pittsburgh, PA

Bump for the morning crew...

Dec 31, 2005 | 08:31 AM

WATRD

Contributing Member

Joined: Oct 2002

Posts: 5,089

Likes: 0

From: Duvall, WA

In interesting problem...

Take a look at this; http://www.w3.org/TR/REC-CSS2/tables...apsing-borders you may be able to accomplish what you what to do using the collapsing border model. That is if I am understanding what you are hoping to accomplish correctly.

Jan 2, 2006 | 06:26 PM

Cebby

Thread Starter

Registered User

Joined: Sep 2002

Posts: 11,199

Likes: 2

From: Pittsburgh, PA

Thanks Rob - Thats nolt exactly where I was going with this, but it *might* work, seems it might overcomplicate what I need to do though. I've figured out that the "body" tag is overwriting any manual changes I might make. I'm going to try disabling the table references I have in my body tags and see if I can include the table info with my text style info. That "should" allow me to change all the table parameters when I choose a style for the text in the table. (I think...)

Jan 2, 2006 | 06:46 PM

marko3xl3

Contributing Member

Joined: Jun 2005

Posts: 1,725

Likes: 0

From: San Jose, CA

I have some good CSS books here that I might delve into to see how I can help ya. I think what you wanna do has a simple solution. But I have one question first, why don't you just skip HTML tables all together and do all the styling in CSS, or are you already doing that?

Jan 2, 2006 | 07:38 PM

Cebby

Thread Starter

Registered User

Joined: Sep 2002

Posts: 11,199

Likes: 2

From: Pittsburgh, PA

Quote:

Originally Posted by marko3xl3

I was attempting to do that, but was running into some styles overwriting others. I seem to have figured it out - what I tried worked...

Jan 6, 2006 | 10:10 AM

jacksonpt

Senior Member

Joined: May 2002

Posts: 2,752

Likes: 0

From: Binghamton, NY

Are they styles that you need to replicate on other pages? If not, do something like:

first table:

Code:

<table width="800" cellpadding="0" cellspacing="0" border="0" style="insert styles here">

second table:

Code:

<table width="800" cellpadding="0" cellspacing="0" border="0" style="insert different styles here">

third table:

Code:

<table width="800" cellpadding="0" cellspacing="0" border="0" style="insert more styles here">

If it is something you need to replicate (i.e. don't want the styles associated with a particular table), I think you can do this is your style declaration file/section:

Code:

#style1 <table> {
style declarations
}

#style2 <table> {
style declarations
}

#style3 <table> {
style declarations
}

I've never done this myself, but I've seen it done before. You'd implement it something like this:

Code:

<div class="style1">
   <table>
      <tr>
         <td> stuff</td>
     </tr>
   </table>
</div>

<div class="style2">
   <table>
      <tr>
         <td> stuff</td>
     </tr>
   </table>
</div>

<div class="style3">
   <table>
      <tr>
         <td> stuff</td>
     </tr>
   </table>
</div>

Like I said, I've never done this myself, so there might be some errors in my code, but that should be close.