www.webdeveloper.com
Results 1 to 9 of 9

Thread: Can I protect a table from my Embedded CSS

  1. #1
    Join Date
    Sep 2006
    Posts
    213

    Can I protect a table from my Embedded CSS

    Hi, Iíve been designing in HTML, DHTML & JavaScript for a couple of years now, but except for the occasional inline style; Iíve completely ignored CSS until recently. The page Iím working on is a MySpace page (which Iím also just now getting around to fooling with), so thereís a restriction on what scripts I can use. Iím using an embedded CSS, which Iíve customized and like very much. The issue Iím having is this: I created the set of tables below and would like to include it on the page, but I donít want the embedded CSS to be applied to this particular table (just the rest of the page). I was hoping thereís a tag I can use to enclose the table in to prevent the CSS from being applied, Iíve looked but canít find it. Then I thought maybe I could use the inline method to ďre-defineĒ the tableís style to a default style (as it would appear with no style). But I canít find anything like this either. Am I barking up the wrong tree or what?





    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="550"
    id="AutoNumber1">
    <tr>
    <td><img border="0" src="folder.gif" width="550" height="50"></td>
    </tr>
    <tr>
    <td>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position: relative; left: 0; top: 0; border-left: 1px solid #AD9C0E; border-right: 3px solid #AD9C0E; border-bottom: 3px solid #AD9C0E" bordercolor="#111111" width="100%" id="AutoNumber2">
    <tr>
    <td width="100%">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position: relative; left: 0; top: 0" bordercolor="#111111" width="100%" id="AutoNumber3">
    <tr>
    <td width="25" bgcolor="#E9D214">&nbsp;</td>
    <td width="500" bgcolor="#F0F0F0">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position: relative; left: 1; top: 1; border-right-style: double; border-bottom-style: double; z-index:5" bordercolor="#111111" width="100%" id="AutoNumber4" bgcolor="#FFFFFF">
    <tr>
    <td width="100%" colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center"><b>&nbsp;</b></td>
    <td width="50%" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center"><b>&nbsp;</b></td>
    <td width="50%" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center"><b>&nbsp;</b></td>
    <td width="50%" align="center">&nbsp;<br>
    &nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center">&nbsp;</td>
    <td width="50%" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center">&nbsp;</td>
    <td width="50%" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center">&nbsp;</td>
    <td width="50%" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center">&nbsp;</td>
    <td width="50%" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" align="center">&nbsp;</td>
    <td width="50%" align="center">&nbsp;</td>
    </tr>
    <tr>
    <td width="100%" align="center" colspan="2">&nbsp;</td>
    </tr>
    </table>
    </td>
    <td width="25" bgcolor="#E9D214">&nbsp;</td>
    </tr>
    <tr>
    <td width="100%" bgcolor="#E9D214" colspan="3">&nbsp;</td>
    </tr>
    </table>
    </td>

    </tr>
    </table>
    </td>
    </tr>
    </table>

  2. #2
    Join Date
    Aug 2006
    Posts
    80
    Not quite following your problem, are you trying to stop the table inheriting style from its parent? Is it the content of the table or the table that you are trying to style; or not style as the case may be?

    If it is the content then could you not just place the content in a div and style that div. Or if it is the table could you not give the table an id <table id="mytable"> and then define the #mytable styles. Sorry if I am misunderstanding or pointing out the obvious here!

  3. #3
    Join Date
    Sep 2006
    Posts
    213
    Sorry for not being clear. Yes, I want to stop the table from inheriting style from its parent.

    It's both the table and the content inside that I want to have no style applied to. The table is designed to look like a manila file folder with a stack of papers inside, the "top sheet of paper" has a white background so the text inside can be any color but white. The table looks exactly how I want it to (on a page by itself) until I paste it on the page I'm trying to display it on (the destination page) which has an Embedded CSS that tells the (destination) page to apply a black background to all tables and to transform the text from (the default) black to white. So the result is my table no longer looks like the "file folder with papers" inside. The only thing that remains is the border colors of the "file folder". I tried enclosing the table in a div with a white background but it doesnít really help. I know how to name the table and reference the table name in the Embedded CSS, but what style do I give it if I want it to have ďno styleĒ? I guess what Iím looking for is a quick fix for this issue. If that doesnít exist I guess Iíll have to redesign my ďfile folder with papers insideĒ using divs and spans instead of tables.
    Last edited by bustya; 09-08-2006 at 12:04 PM.

  4. #4
    Join Date
    Aug 2006
    Posts
    80
    OK, I think then you will have to apply styles to them to 'unstyle' them. There is no way, sa far as I know, to un-inherit css. Good luck!

  5. #5
    Join Date
    Sep 2006
    Posts
    213
    Sorry, I edited my post after you commented; please refer to the edited post above for more details on my issue.

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    You're barking up a couple of wrong trees, the first being the "using tables for layout" tree. You're styles aren't "embedded" they are "inline". Factor them out to an embedded style sheet apply them to a table with a given class then give the embedded table(s) another class. Hopefully you can use CSS specificity to separate the styling.

  7. #7
    Join Date
    Sep 2006
    Posts
    213
    As I feared, so much for the quick-fix bail-out method. I'm going to go back to the drawing board with this one and I'll do it the right way this time. Thank you both for your help.

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    What you are trying to do with TABLE and all those TD cells (see attached image) could be very easily rendered using CSS. I'm not sure what you intend to populate this with, -if it is lists of similar textual items grouped under a single defining heading (e.g., "Vegetables" being the <TH> and lists of types of vegetables under it being the relevant <TD>s), TABLE might be the layout you want. But still, with about 1/3 or 1/4 of the current code, CSS can accomplish the same thing.
    Attached Images Attached Images

  9. #9
    Join Date
    Sep 2006
    Posts
    213
    Yeah, Iím going to redo it using CSS. Actually I think I know a quick fix that would work if I was displaying this table on another siteÖ I could just put the table on an external document and link it into the parent pageÖ but MySpace doesnít allow that, so Iím going to have to redesign it in CSS. Thank you all for you comments.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles