Does anyone know where I can find the rules that CSS follows. I'm having a ton of trouble getting simple things to work since there is absolutely no information on this subject.

I purchased two books, have been through tons of websites and still can't find a simple explanation of the rules.

The way I look at it, every guide/book on CSS is like giving some one a bunch of parts with an infinite amount of combinations without a manual that explains the right way in order for it to work.

I would start with http://w3schools.com/css/default.asp

http://www.w3.org/TR/css-style-attr

TopStyle:
http://www.newsgator.com/Individuals...e/Default.aspx

CSS vista
http://litmusapp.com/labs

JustStyle
http://www.ucware.com/juststyle/

Those all helps you to design CSS and provide a list of features with their possible values.
And if you are looking for a reference, start here: http://www.w3.org/TR/CSS21/

The 'rules' for CSS ? There are TONS of places on the web to find everything you need on how CSS works.

What EXACTLY are you trying to do and/or having trouble with ?

It sounds like what you're looking for is the rules of the cascade. The cascade is what determines which of several different rules is the one that gets used.

Is that what you're looking for?

Thanks for all of the links!

I still can't figure out how to complete what I want to do. I want to create a border around my entire content and navigation. I want to use 8 images with the middle parts expanding depending on the content and the resolution of the screen.

I've tried several ways to complete it but everything seems impossible. I created 9 layers and tried to set the corners on top (z-index : - higher number). For some reason this does not work in this case? (can't find anything that explains this)

I tried combinations of relative positioning with no luck (for some reason it refuses to work on the right side).

Thanks

If you post a link to your site I'm sure we can figure out why things aren't working.

Many layers:
http://riptidepcs.com/final/master2.html

(z-index doesn't work)
A space appears in Firefox/not in IE6

Relative
http://riptidepcs.com/final/master3.html

border floats to the top in Firefox (not even sure if I can get the sides to expand using this method - gave up when it wouldn't work in Firefox)

I also tried creating layers for each but it required the use of a spacer image to achieve the expanding borders (which will cause trouble for users that have different font style/size....)

Thanks for your help

Z-index ONLY works with elements that are absolutely or relatively positioned, otherwise setting a z-index is a pointless exercise. There's no point in putting a z-index on the body at all.

All that positioning is generally not necessary either.
You have <div id="container"> TWICE, ID's MUST be unique, they cannot be re-used in a page. If you want to repeat something, use a Class instead.

Originally Posted by LadynRed

All that positioning is generally not necessary either.

Which way should I complete the border so that it works? Do you have a link to a tutorial?

Thanks

You mean something like -:

http://www.candsdesign.co.uk/demo/wt/rt/ ?

Originally Posted by chrishirst

You mean something like -:

http://www.candsdesign.co.uk/demo/wt/rt/ ?

Exactly! Thanks for all your help! I still can't get the page to work right.

I want to add div id tags within the center (left nav and right the content and a tabbed menu). when I add the div tag for the nav, the border shifts over. Do you know how I can get around the problem?

Sound like you are testing in IE.

floating any elements inside the #ct_ctr container should solve that, just remember to clear them as well.

I just cleared the left side and floated to the left.

It only works in IE (but the buttons have a large amount of space in between).

http://www.riptidepcs.com/final/master4.html

float AND clear in the same direction on one element has some odd effects

see
http://www.webmaster-talk.com/css-fo...tml#post503866

Clearing the element underneath fixed that problem (updated).

But now the center element is not inheriting the height from what is inside of it. (inherit and auto don't seem to work in Firefox, Opera...)

Thanks

inherit and auto don't seem to work in Firefox, Opera.

Sure they do, it's something else in your code that is the culprit. The reason it's not expanding is because you need to clear the float after the nav, like this:

<div id="ct_ctr">

<div id="nav">

<ul>

<li><a href="http://www.riptidepcs.com/final/products.htm">Products</a></li>
<li><a href="http://www.riptidepcs.com/final/support.htm">Support</a></li>
<li><a href="http://www.riptidepcs.com/final/faq.htm">Faq</a></li>
<li><a href="http://www.riptidepcs.com/final/contact.htm">Contact</a></li>

</ul>

</div>
<br class="brclear" />

</div> <!-- ct_ctr -->

Once you clear the float there, the center section will encompass the nav within.

I removed the clear:left you had in there, it's not effective. The code for the clearing <br> I use is this:
.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
Works like a charm

Now I only have one problem. I need to get the content below the nav to go next to it with the border inheriting the height of the content tag. (everything under the 3 year warranty image)

Updated here:
http://www.riptidepcs.com/final/master4.html

Thanks for your help -hopefully this will be the last problem I have.

The way you have it now with the added div, you're going to have to move the clearing <br> to below the last closing div tag and before your footer.

You'll also have to set the #content to float:left OR, don't float it and give it a left margin wide enough to go past the left nav.