Grow your CSS skills. Land your dream job.

CSS Specificity

  • # November 27, 2009 at 4:40 am

    I am after a little help with this site I am working on. Help with my site. I have tried to lay these out, and work them as much as possible, but I am hitting a brick wall.

    1. Specificity

    I am new to this part of CSS ( Specificity ). I have designed a table which which is going to be the layout of a checkout page.

    The design for the page is here.

    http://www.eighthqz.com/cmsplc-test-site/checkout.gif

    The build for the table is here.

    http://www.eighthqz.com/cmsplc-test-site/table1.html

    As it stands at the moment, the design of this table is fine, ie the fonts, spacing etc etc. But when I try and put the table in a generic standard page, half the table loses it styling.

    http://www.eighthqz.com/cmsplc-test-site/genpage4.html

    I have tried putting .Checkout_table infront of every element, but when I preview in Firebug, still half the styling is not even there. I know it it being overwritten somewhere, and I am trying to keep the code lean and efficient as possible, however it has elements that I cannot get to settle.

    This is the same, on the server and locally. I am pulling my hair out with this, and I need to get all the styling before I can transfer the html into the eccomerce store I am building it for.

    On a separate, note. I have the home page, I am trying to validate, but it will not because it has this table on the front of it.

    http://www.eighthqz.com/cmsplc-test-site/tabbedmenuslider.html

    All of the errors are from me using a piece of interactive tabbed menu, which is throwing out 4 errors. I dont know how to validate it otherwise. It does not validate on t

    I got the source code from this link, but I am now at a loss.

    http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

    Any help is appreciated.

    T

    # November 27, 2009 at 9:48 am

    I have changed some of these links.

    I will post them up shortly

    # November 27, 2009 at 10:20 pm
    "cmsweb" wrote:
    1. Specificity

    I am new to this part of CSS ( Specificity ). I have designed a table which which is going to be the layout of a checkout page.

    Well, it sounds like your problem isn’t specificity, but morelikely just a boo-boo with some code. But this is the funniest tutorial I’ve seen, and it just happens to be on specificity.
    http://www.stuffandnonsense.co.uk/archi … _wars.html

    Let us know when those links are back.

    # November 30, 2009 at 5:22 am

    New links are as follows.

    This is the table I have built.
    [url]
    http://www.eighthqz.com/cmsplc-test-sit … table.html
    [/url]
    And this is what happens to the table when i drop it into the generic standard page.

    http://www.eighthqz.com/cmsplc-test-site/genpage3.html

    As you can see, there is padding, fonts, background issues, etc etc.

    I am working on this at the moment, so there is a good chance that these links might change somewhat, because of me (hopefully) solving things as I go along.

    # November 30, 2009 at 11:10 am

    Thanks for the links.

    The first thing I would do is validate the page: http://validator.w3.org/check?verbose=1 … table.html

    The Table Row with the product information in it has more columns than any other row. All rows should have the same number of columns.

    # November 30, 2009 at 11:59 am

    Yeah, I wanted an extra on for the button on the end (matches the design). i’ll stick another column on the end and get back to you tomorrow.

    # December 1, 2009 at 5:25 am

    http://www.eighthqz.com/cmsplc-test-site/checkout.gif

    Okay, the above image was done in fireworks and it is the desired look for what I am trying to achieve.

    http://www.eighthqz.com/cmsplc-test-site/test_carttable.html

    Now, before I dropped in the doc type, body and html tags, you could actually see the yellow box. But when I drop the table into the standard page, you cannot see it anyways.

    http://www.eighthqz.com/cmsplc-test-site/genpage3.html

    This is the table, in its built format has been lifted from the eccomerce section, and I have made the extra section for the delete button stand out. (on the far right), but aside from that, everything should line up just fine.

    But I am having css issues. The font size is being lost, as is some padding…..well, its clear what the differences are just looking at them, but I am fried. Well, my brain is.

    # December 1, 2009 at 1:37 pm

    Do you have firebug installed in Firefox?

    If not, I recommend getting it.

    Once it’s installed, you can right click on an element and click "inspect element" and it will give you a list of all (CS)Styles applied to that element, and which ones are being overwritten. That will help you find how the font is changing, and where the background color is going.

    (You still have 33 errors on your html page.)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".