CSS Specificity

[cmsweb]

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

[cmsweb]

I have changed some of these links.

I will post them up shortly

[AshtonSanders]

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

[cmsweb]

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.

[AshtonSanders]

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.

[cmsweb]

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.

[cmsweb]

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.

[AshtonSanders]

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

[Author]

Posts