Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    70
    Thanks
    2
    Thanked 1 Time in 1 Post

    Restrict Table Style to a DIV

    I'm using a shopping cart program that requires me to drop a code snippet into my site. It calls a javascript to display the cart, so I cannot see the HTML being output. I did figure out, however, that I can define styles for table and input elements to customize the cart a bit.

    Problem is, I want to define styles for inputs and tables for the cart ONLY, and if I define those anywhere on the page or in a linked stylesheet, they are applied to all tables and inputs on my page.

    I can't get rid of the other tables because they are generated by similar systems on other areas of the page - i didn't put them there by choice. And the inputs - there's no way around those at all...

    Is there a way to wrap the cart portion of the page in a DIV, and the define styles for tables within that DIV only?

  • #2
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Your solution (wrapping the cart in a div and then targetting the cart table elements using that div) should work. CSS can be applied to elements only when they appear inside other named elements.

    It would look something like this:

    HTML:

    [...]

    <div id="cart_wrapper">
    [Cart HTML]
    </div>

    [...]

    CSS:

    #cart_wrapper td {
    background-color: #0f0;
    border: 1px solid #000;
    }

    #cart_wrapper table {
    border: 1px solid #000;
    }

  • Users who have thanked one_too_many for this post:

    jakerbug (07-21-2008)

  • #3
    New Coder
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    70
    Thanks
    2
    Thanked 1 Time in 1 Post
    thanks so much! i was trying "td.cart" or "td:cart" etc, do try to define the styles... i guess i've just never been too clear on how exactly that works.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It's difficult without having access to the markup to add classes and ids. I'm dealing with something similar: having to style an e-commerce application written in ASP with little access to or knowledge of the controls that make up the application. It's a lot of reverse engineering from the outputted source code. What I've had to do in many instances is, instead of referring to a div or a table's class or id, using the classes or ids that are given and working from that.

    Are there any classes or ids assigned anywhere on the page? A lot of my CSS ends up looking like this:

    Code:
    #rightSideContainer table table td{
      font-weight:900;
      }
    ...for example. Of course that doesn't work in all instances. There's only so much you can do without being able to assign classes and ids.

    Also a link or some code would be helpful.

    Edit: Too slow!
    matt | design | blog

  • #5
    New Coder
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    70
    Thanks
    2
    Thanked 1 Time in 1 Post
    thanks msuffern, that was the first thing i looked for - i run into this a lot, as i'm sure many others do, trying to integrate third-party apps. the problem was, there was no HTML output - everything was happening via the javascript.

    i actually asked the third party's support if there were any classes assigned to the elements i wanted to change, and they told me it was just a plain old, unlabled table.

    thanks again for the reply though.


  •  

    Posting Permissions

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