Constant nav bar width

[kurt.santo]

Look for hours on my CSS file and cannot spot the error. The CSS file is:

/* - - GENERAL ELEMENTS - -*/body	{		font-family:Tahoma;		font-size:14px;		color:#555;		line-height:120%;		}h1		{		font-size:18px;		margin: 0px 0px 20px 0px;		font-weight:normal;		}		h2		{		font-size:17px;		margin: 0px 0px 20px 0px;		font-weight:normal;		}p		{		margin: 0px 0px 10px 0px;		}		img		{		border:none;		}		table	{		width:980px;		border:none;		margin:0 auto;		padding:0px;		}		td		{		text-align:left; 		vertical-align:top;		padding:30px 30px 30px 30px;		}		ul		{		margin:0px 0px 10px 15px;		padding:0px;		}		li		{		padding:0px 0px 0px 0px;		margin:0px 0px 0px 0px;		}a:link, a:visited, a:hover, a:active 	{										color: #555; 										text-decoration:none;										font-weight:normal;										}										/* - - NAV BAR - -*/#navBar 	{			width:200px;			background-color:#788;			color:#555;			}		#navBar a:link, #navBar a:visited, #navBar a:hover, #navBar a:active	{			color:#FFF;			line-height:150%;			font-size:12px;			font-weight:normal;			}			/* - - CARPENTRY AND GREENWOOD - -*/#carpentryIndex	{				width:350px;				background-color:#665;				color:#8A9;				text-align:center;				}								#greenwoodIndex		{					width:430px;					background-color:#8A9;					text-align:center;					}			#greenwood	{			width:780px;			background-color:#8A9;			}									#carpentry	{			width:780px;			background-color:#665;			color:#FFF;		}			#carpentry p, #greenwood p	{							margin:0px 0px 20px 0px;							}#carpentry img, #greenwood img	{								padding:20px 40px 20px 0px;								margin:0px;								}			/* - - BLUE CLASS - -*/					#blue		{			width:780px;			background-color:#678;			}						/*-- FOOTER --*/							td#footer		{			height:29px;			font-size:9px;			color:#555;			padding:10px 30px 10px 30px;			text-align:center;			}		#footer a:link, #footer a:visited, #footer a:hover, #footer a:active 	{										color: #555; 										font-size:9px;										text-decoration:none;										font-weight:bold;										}/*-- SPACER --*/#spacer		{			height:500px;			}		

Then I will use on the website for most pages:

<tr><td id="navBar"><p>Richard Keal Woodwork</p><img src="layout/logo.gif" width="180" height="115" />    <ul><li><a href="index.htm" target="_self">Welcome</a></li><li><a href="about.htm" target="_self">About me</a></li><li><a href="statement.htm" target="_self">Statement</a></li><li><a href="carpentry.htm" target="_self">Carpentry</a></li><li><a href="greenwood.htm" target="_self">Greenwood</a></li><li><a href="contact.htm" target="_self">Contact</a></li></ul></td><!-- InstanceBeginEditable name="content" --><td colspan="2" id="blue"><h1>About me...</h1>      <ul><li>Carpenter/Joiner - City & Guilds Certified</li>  <li>Wood Turner (5 years professional experience)</li>  <li>Sculptor - BA Hons</li>  <li>Greenwood Furniture Maker</li></ul> <p>As a self-employed woodworker I am happy to consider undertaking any project from ordinary domestic carpentry and repairs to furniture making or large, elaborate artworks. All work being finished to a high level of craftsmanship.  </p>      <p>You can approach me with a completed design for me to follow, or as most people do, with an initial idea which we can develop together. </p></td><!-- InstanceEndEditable --></tr>

but the main page with two instead of one table cell. The code for this one is:

<tr><td id="navBar"><p>Richard Keal Woodwork</p><img src="layout/logo.gif" width="180" height="115" />    <ul><li><a href="index.htm" target="_self">Welcome</a></li><li><a href="about.htm" target="_self">About me</a></li><li><a href="statement.htm" target="_self">Statement</a></li><li><a href="carpentry.htm" target="_self">Carpentry</a></li><li><a href="greenwood.htm" target="_self">Greenwood</a></li><li><a href="contact.htm" target="_self">Contact</a></li></ul></td><!-- InstanceBeginEditable name="content" --><td id="carpentryIndex"><h2><a href="carpentry.htm" target="_self">Carpentry, Joinery, Furniture</a></h2><a href="carpentry.htm" target="_self"><img src="layout/carpentry.jpg" width="263" height="350" title="Please click here to get into the carpentry section" alt="carpentry"/></a></td><td id="greenwoodIndex"><h2><a href="greenwood.htm" target="_self">Greenwood furniture, Sculpture, Log building</a></h2><a href="greenwood.htm" target="_self"><img src="layout/greenwood.jpg" width="350" height="245" title="Please click here to get into the greenwood section" alt="greenwood" /></a></td><!-- InstanceEndEditable --></tr>

I really do not understand why the nav bar stays constant for all pages (all the ones with colspan="2"), but not on the one with two cells. The bar's width becomes smaller, although I specified the width correctly (350px plus 430px makes 780px, doesn't it?). Really lost...KurtReason for edit: CSS for #navBar includes a "padding:30px 10px 30px 10px;" (200px minus 180px picture width, minus 10px padding on either side). Copied accidently an older version of my CSS...

[jlhaslip]

Link please. I don't plan on stitching together crumbs to make a loaf of bread.Make it easy for us to help you.

[kurt.santo]

Link please. I don't plan on stitching together crumbs to make a loaf of bread.Make it easy for us to help you.

We haven't any webspace yet, but I should be able to reference one next week (still not sure about domain name)...Kurt

[kurt.santo]

We haven't any webspace yet, but I should be able to reference one next week (still not sure about domain name)...Kurt

You can find the site under http://www.richardkeal.co.uk/testing/index.htm. At the end of the day if you cannot come up with a good name why not use your name (at least when you are an artist)?Still cannot figure out where it goes wrong. Always thought that 200px plus 390px, plus 390px makes 980px. Somehow it does not....Kurt

[jlhaslip]

Tables aren't my strength. I have never really used them for Page Layout, but it appears the width of each picture is the width for the Image plus the paddings. My tools are agreeing as the width the ruler shows is 450px for each picture. Might need to skinny them down some and reduce the padding a bit OR go with a fluid layout by eliminating the table width??? just an idea.Nice woodwork, by the way... I do Finish Work and Cabinets myself, too.

[kurt.santo]

Tables aren't my strength. I have never really used them for Page Layout, but it appears the width of each picture is the width for the Image plus the paddings. My tools are agreeing as the width the ruler shows is 450px for each picture. Might need to skinny them down some and reduce the padding a bit OR go with a fluid layout by eliminating the table width??? just an idea.Nice woodwork, by the way... I do Finish Work and Cabinets myself, too.

Does not make sense, but tried it all. Even deleted the whole content. It just does not work. Drives me nuts...Yes, great work by Rich. I really like his faces and the great bench... Kurt

[kurt.santo]

Does not make sense, but tried it all. Even deleted the whole content. It just does not work. Drives me nuts...Yes, great work by Rich. I really like his faces and the great bench... Kurt

Found the cause. Rich's site became a victim of the box model... I added padding to the width (declared width:160px instead of width:100px - padding is 30px on each side).Is there any way of checking what a site looks like with IE 5.5 (I use IE 7)? Cause this is the browser, which subtracts the padding from the width (and I would have to specify 160px instead). Have a hack, which would help that, but obviously if I cannot check the result I cannot use it...The hack goes:

width:160px;voice-familiy:"\"}\"";voice-family: inherit;width:100;

The first width is for IE 5/5.5, then there is some gibberish to discourage IE 5/5.5 from checking the next lines. At the end the proper width is specified... Might be of use for some other sites. Found this in a book about CSS. Or do you not code any more with those older browser models in mind?Kurt

[jlhaslip]

Google IE conditional comments, or search this Forum for the same phrase.IE Conditional Comments let you write code selectively for IE-only Browsers because they are the only Browsers which see what is between the comment tags. It is safer, and easier, to use the IE-cc's than to write hacks. In a way, it is a hack, but it won't mess up the other browsers, which was a problem in the past where you need a hack to hack a hack in another Browser which in turn needed a different hack in yet another... you get the picture... :)and no, I don't worry about anything older than IE6, which is about 7 years ago when it was released (I think)

[kurt.santo]

Google IE conditional comments, or search this Forum for the same phrase.IE Conditional Comments let you write code for IE-only Browsers because they are the only Browsers which see what is between the comment tags. It is safer, and easier, to use the IE-cc's than to write hacks. In a way, it is a hack, but it won't mess up the other browsers, which was a problem in the past where you need a hack to hack a hack in another Browser which in turn needed a different hack in yet another... you get the picture...

Cheers, will check this one out... Do you still code with IE 5 in mind? Not sure if I really have to go the extra mile...Kurt

[jlhaslip]

I editted that last posting, then remembered that I have an IE5 Mac downstairs which I still use for emails since it is very safe on the web, and doesn't attract virii, but is useless for web development these days.

[kurt.santo]

I editted that last posting, then remembered that I have an IE5 Mac downstairs which I still use for emails since it is very safe on the web, and doesn't attract virii, but is useless for web development these days.

Thank you for your feedback...Kurt