Inherit issues

[torque]

Ok I have an external css.My trouble comes from the attributes for my body tag:

body,td,th {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 14px;	margin:0 auto;	width:80%;}

causing a table to also 'shrink' to 80%??I have given the table inline? attributes that I thought should override the external. I am not understanding how the whole inherit thing works. Can I stop a tag from inheriting ???

[ShadowMage]

I don't think that margin: 0 auto is going to do anything on td and th tags. Also, why are you setting the width of your td and th tags to 80%? Maybe it's just me but your style declarations don't make a whole lot of sense. Could you maybe explain a little more about what it is you're trying to accomplish?To answer your question, to stop a tag from inheriting styles you can use either an embedded stylesheet (in the head tags) or inline styles to override external stylesheets. Inline styles will override embedded styles.

[jeffman]

Percentages are funky. If your body is 80% of the window width, and your table is 100% of the body width, then the table also will be 80% of the window width. If a table cell is defined as 80%, it will be 80% the size of its own container, NOT 80% of the window width. So now it is 64% the width of the window. If the table itself has no definition, then it will collapse to the size of its widest row. If a table row is only one cell wide, then the whole table will be 64% of the window width. If that's not what you want . . .

[torque]

I don't think that margin: 0 auto is going to do anything on td and th tags. Also, why are you setting the width of your td and th tags to 80%? Maybe it's just me but your style declarations don't make a whole lot of sense. Could you maybe explain a little more about what it is you're trying to accomplish?To answer your question, to stop a tag from inheriting styles you can use either an embedded stylesheet (in the head tags) or inline styles to override external stylesheets. Inline styles will override embedded styles.

Ok, thats what I thought!So here is the deal. That body style was to center the content in the page. I am not setting my td to 80%, thats the point. I specified a table width of 444px inline:

<table width="444" border="0" align="center">

There is a nested table in there that holds a radio group:

<table width="444" border="0" align="center">            <tr>              <td width="434"><table width="98%" border="0" align="center"  bgcolor="#FFFFFF" id="mcat">                  <tr>                    <td><div align="center">                        <input type="radio" name="radio" id="radio" value="eat" />                    </div></td>                    <td><div align="center"><img src="/images/eatsm.gif" width="39" height="30" /></div></td>                    <td><div align="center">                        <input type="radio" name="radio" id="radio2" value="sleep" />                    </div></td>                    <td><div align="center"><img src="/images/sleepsm.gif" width="31" height="30" /></div></td>                    <td><div align="center">                        <input type="radio" name="radio" id="radio3" value="^21" />                    </div></td>                    <td><div align="center"><img src="/images/21sm.gif" width="37" height="30" /></div></td>                    <td><div align="center">                        <input type="radio" name="radio" id="radio4" value="sights" />                    </div></td>                    <td><div align="center"><img src="/images/sightssm.gif" width="45" height="30" /></div></td>                  </tr>                  <tr>                    <td><div align="center">                        <input type="radio" name="radio" id="radio5" value="play" />                    </div></td>                    <td><div align="center"><img src="/images/playsm.gif" width="27" height="30" /></div></td>                    <td><div align="center">                        <input type="radio" name="radio" id="radio6" value="shop" />                    </div></td>                    <td><div align="center"><img src="/images/shopsm.gif" width="38" height="30" /></div></td>                    <td><div align="center">                        <input type="radio" name="radio" id="radio7" value="services" />                    </div></td>                    <td><div align="center"><img src="/images/servesm.gif" width="32" height="30" /></div></td>                    <td><div align="center">                        <input type="radio" name="radio" id="radio8" value="local" />                    </div></td>                    <td><div align="center"><img src="/images/localsm.gif" width="33" height="30" /></div></td>                  </tr>              </table>

This table is ?inheriting? the 80% width of the body tag somehow. If I change the body tag to 100% the radio group table adjusts to 100% also. I am really confused. LOLI am just learning the css and feel like I am missing a really important part of the concept because my layouts are not responding to changes in the external based on inherit issues according to dreamweaver.

[torque]

Percentages are funky. If your body is 80% of the window width, and your table is 100% of the body width, then the table also will be 80% of the window width. If a table cell is defined as 80%, it will be 80% the size of its own container, NOT 80% of the window width. So now it is 64% the width of the window. If the table itself has no definition, then it will collapse to the size of its widest row. If a table row is only one cell wide, then the whole table will be 64% of the window width. If that's not what you want . . .

That was really helpful, thanks.I just dropped the width attribute in the body tag altogether and my tables went back to being the right size. I initially was trying to just center my content.I read about a 'wrapper' div here and will try that now.

[torque]

That was really helpful, thanks.I just dropped the width attribute in the body tag altogether and my tables went back to being the right size. I initially was trying to just center my content.I read about a 'wrapper' div here and will try that now.

Just to try and understand the inherit attribute though, Do I inherit from the next level up or all the way down from the main body tag unless otherwise specified?Let's say I have a body with a div1 inside and another div2 inside that. If my body tag says width:80% and I don't specify anything different then both div1 and div2 will have a width of 80%? If I specify div2 width:100% I will get 100% of the body tag's 80% only? Can I override that by using a pixel value for the div2 instead? width:300px instead of 100%?This is becoming a huge issue for me in the layout process...lol Feeling pretty dense.

[ShadowMage]

I am not setting my td to 80%, thats the point.

Yes, actually you are. The selector your using...body,td,th {...says to format the body tag, all td tags, and all th tags.

Just to try and understand the inherit attribute though, Do I inherit from the next level up or all the way down from the main body tag unless otherwise specified?Let's say I have a body with a div1 inside and another div2 inside that. If my body tag says width:80% and I don't specify anything different then both div1 and div2 will have a width of 80%? If I specify div2 width:100% I will get 100% of the body tag's 80% only? Can I override that by using a pixel value for the div2 instead? width:300px instead of 100%?This is becoming a huge issue for me in the layout process...lol Feeling pretty dense.

If you set the body to 80% your page will be 80% of the window size. If you have a div with no width specified, it will default to 100% of its parent (in this case the body) so it too will also be 80% of the window size, but 100% of the body width. If you specify a width in % it will be that much of its parent. So if you set the width of the div to 75% it will be 75% percent of the body width. Pixels will be whatever you set them at all the time, so yes if you set the div at 300px and your body is only 250px wide the div will extend beyond the borders of the body.

[torque]

Yes, actually you are. The selector your using...body,td,th {...says to format the body tag, all td tags, and all th tags.

OH OK. That was a missing piece....makes much more sense now!Thats why none of my other attributes work on the other tables either! I still don't quite understand why it isn't overriding it. I think I must have some tag issues apart from this to ferret out.So if I create a new class for the table that has the radio button group I can over ride the 80% by using a pixel value within the css class selector?

[ShadowMage]

OH OK. That was a missing piece....makes much more sense now!Thats why none of my other attributes work on the other tables either! I still don't quite understand why it isn't overriding it. I think I must have some tag issues apart from this to ferret out.

Show us the code that's not behaving, and maybe we can help you work it out.

So if I create a new class for the table that has the radio button group I can over ride the 80% by using a pixel value within the css class selector?

Yes