Man, tables are looking better and better! LOL

You're using a proper doctype - that means IE6 and the other modern browsers are all using the same doctype (IE5 is a different story).

Your markup seems extremely complex for just two images. What are you trying to achieve?

Could the following achieve the same thing

#header {
  background: blue;
  overflow: hidden;
}

#logo, #banner {
  float: left;
}

<div id="header">
  <img id="logo" href="..." />
  <img id="banner" href="..." />
</div>

I have to agree. You've got to get out of the complex nested table way of thinking. CSS is all about simplicity.

You need to specify units in your css too.

Marvelous idea!

img#imglogo {
	width: 200;
	height: 200;
	border: 0;
}
img#imgbanner {
	width: 572;
	height: 200;
	border: 0;
}
img.imghyperlink {
	border: 0;

200? 200 watts?

572? 572 kilometers?

Good eye, Doc.

Thanks for the feedback.

I am taking Triumphs advice and designing to get the page correct in Firefox before hacking to correct for IE.

I simplified the code by removing the excess DIV. I implemented the changes you recommended and I am almost there.

Check http://www.wrcd.org/homestrict-firefox.htm and see if you can help me. In Firefox, the page is virtually exactly as I wanted it EXCEPT the rightbar DIV is not lining up to the right side. Instead, it is floating down below the center content and above the footer content. I have the "content" DIV set to 100% with "clear: both;" set. This includes 3 DIVs, the "leftbar" DIV set to 20%, the "centercontent" DIV set to 60% and the "rightbar" DIV set to 20%, all with "float: left;".

However, in IE, there are a few more problems. Not only is the rightbar DIV not lining up to the right side, the menu drop downs do not work. The "leftbar" DIV and the "centercontent" DIV are definitely wider than on Firefox. The header and footer looks fine.

One thing which I can live with but don't understand is on the <marquee> for Firefox, the content fills the "leftbar" DIV starting at the top before scrolling whereas in IE, the content just starts at the bottom. Curious to know why that happens.

I'm not lazy. I just can't see what is causing the problem. Probably because I'm an idiot!

You are going to need to reduce your %'s to less than 100% on those three divs...

OK, I found one thing and that was in the CSS centercontent DIV.

#centercontent { /* Section CENTERCONTENT */
border-left: solid 1px #003366;
border-right: solid 1px #003366;

Once I removed these borders, my rightbar column fell into place.

Also, I changed the IE hack just prior to the </head> tagline, to change the width of the UL for the menu DIV to 6.2em. In the first CSS declaration is was set to 11em.

#menu ul {
width: 6.2em;
}

Not entirely sure why this works except that Firefox and IE must use a different width calculation for the "em" width setting.

Now how can I get a 1px border on both sides of the centercontent that will not collapse the rightbar DIV? [Note: You can't simply put the borders on the leftbar or rightbar DIV. Tried that..it did the same collapsing of the rightbar DIV]

Also, as you can see, the content DIV bottom is nice and clean with a straight line in IE. However, in Firefox, the content DIV shows only the white background for the content contained in the three embedded DIV's (leftbar, centercontent, rightbar). The remainder of it lets the container DIV background show through.

If I can get these resolved, I will be a happy camper! [Note: I change all image source references to full url's in case you wanted to just copy the source into your editor]

The border thing. I suspect your widths add to 100%. That doesn't allow any space for the 2px required by the border. You should either, reduce the width slightly or counter the 1px border with a -1px margin.

You might be right about the em calculation although I haven't noticed it before, try setting the font-size #menu, even if you set it to 100%.

That clean line across the bottom. FF correctly implements the CSS2.1 spec, which says floats aren't in flow. So the float's container shouldn't expand to surround it, hence you'll end up with an uneven background if the lowest content in the container is floated. There are a few ways around this:

1 - clearfix. check out the article on this site by Tony. This uses :after to place some invisible height:0 content beyond the floats so forcing the container to surround that content - will apply to #content.
2 - overflow. an overflow value other than visible (the default value) when combined with a height of auto will force the container to surround the floats. If you think about this long enough you'll see why . e.g. #content {overflow: hidden;}
3 - equal height column hack. Place an impossibly large padding and an equally large -ve margin on all the columns. This keeps the actual column height unchanged but ensures the column background will fill any unused space below the column. Applies to each floated element, refer Position Is Everything - The One True Layout.

In your case, clearfix is probably the most appropriate solution.

You have submenu id'd more than once. You can only have one id.
Also, in your js, 'onMouseOut' should be all lower case.

Doc,

Thanks for the catch on the submenu id. I have changed all references of submenu to be a class. Also, I have changed the onmouseout and mouseover to lower case.

Chris,

I implemented the #content {overflow: hidden;} hack recommended by Chris. It displays the content and embedded DIV's properly in IE, Firefox, Mozilla, Netscape and Opera, although in Opera the centercontent goes right to the border with the bottom of the image against the bottom of the DIV. I can live with that.

I implemented the border plus negative margin recommendation and on the left side of the centercontent, it works beautifully. However, on the right side, the border only shows on the lower part as it looks like the negative margin -1px is moving the rightbar DIV over on top of the centercontent right border. Any recommendations?

Just a thought but would z-index declarations solve this problem? Haven't tried it yet but was wondering.

Again, thanks for the feedback.

just position:relative on the central element should be enough. An element has to have a position (other than static) to use a z-index. Any element with position should be rendered in front of an element without position. If they both have position, sure use z-index to bring the central element forward.

I added the position: relative and because that overlapped the menus, I also added a z-index. The borders display, almost correctly, in all browsers except Opera.

Here is the strange things. In IE6, if I resize the browser, everything looks fine EXCEPT if I maximize the page, the rightbar DIV floats below the other 2 DIV's. I mean I can resize the browser to almost a fullsize window and it works fine but just as soon as I maximize it, it floats it below. Also, now my submenu's do not have the green background. Now why would adding the position:relative and the z-index affect the background color of the submenu DIV?

In Firefox, Mozilla and Netscape, the page displays fine EXCEPT that there is now a gap at the bottom of the content DIV. It resizes properly and displays properly at full-screen mode. Another problem is the green background is not there for the submenu DIV. In Opera, there is a smaller gap a the bottom and the border between the contentcenter and the rightbar is still not correct.

Now a reasonable person, who has used tables in the past and gotten pretty good results in these same browsers, would be ready to abandon this exercise and go back to tables. But now, its a matter of stubbornness. I want to know if it is possible to do what I'm trying to do. I do understand some of the things all of you have recommended but I'd be lying if I didn't say, some things just elude me now.

I could probably live with the page as it is except in IE6. Why it floats the rightbar DIV when I maximize the page is beyond me. Anyone have any idea why this is happening and, if you do, can give a response in layman's terms so I can understand (if that is possible)?

What page link should we be looking at now?

Remember you're in a learning process now. Its not that its particularly hard, its just that you don't have all the ins and outs down pat yet.

I had to make some adjustments to a table based site yesterday. The first time in a long time. Something that would have taken no time in a decent semantic layout ended up being incredibly frustrating and taking way to much time.

Chris,

I should have included the URL. It is http://www.wrcd.org/homestrict-firefox-overflow.htm.

Another curious thing I found is that something got changed or broken and I couldn't find it on the header logo. It showed a border when I have indicated that borders: 0px;. The only way I could resolve this was putting in an inline style comment. Nothing major but just curious why the CSS code did not do the trick.

Just as another exercise, I did this page using tables (God forbid)! In less than 30 minutes, I had a page that looked the same in IE, Firefox, Mozilla, Netscape and Opera. Check it out: http://www.wrcd.org/homeusingtables.htm

I'm not saying it's right according to the XCLAMPS group of website designers but it is one way to provide consistency without having to resort to so many hacks. This is the dilemma of the W3C and all other XCLAMPS professionals who know web sites should separate content from style. I want to join that group BUT and it's a big butt, if it takes a week or more to do just one simple webpage and have it to display properly in multiple browsers versus 30 minutes using tables, well!

Also, I'm sorry to be complaining when Doc, Triumph, Fred and you are helping me through this exercise. This is coming from my total lack of understanding all the hacks. The actual fundamentals I understand (or at least I believe I understand).

However, I will be praying for a miracle that all the browser designers will finally get on the W3C bandwagon.

Right div moving down - doesn't happen for me. Possibly you are getting unlucky with a percentage/em calculation. Its rounding up 1 too many pixels. Try shrinking the column width a pixel or two.

The submenu. Its nothing to do with position:relative.

.submenu a { some shade of green }
#menu a {some shade of blue }

its specificity. An id beats a class. You should make it

#menu .submenu a { some shade of green }

I'll try and take a look at the other stuff later.

Chris,

The columns are percentages. How can I reduce a column by a pixel when it is in percentages? If I reduce it by 1%, it will end up with a larger gap. Just curious but is the value (60%-1px) valid? I don't think it is. Now to be honest, if you could use calculated values like that, it looks like you could fix a lot of problems. LOL

If the parent is 800px wide, 1px is ⅛ of 1%, or .125%.

You're not limited to integers for percentage metrics.

cheers,

gary

Gary,

I use percentages as I want the page to expand. So I won't know if they are using 800px, 1024px, 1200px or 1600px widths. So your formula won't work unless I redesign the page for a set with which defeats the purpose of expandable windows.

Set the gap for the smallest width it is "reasonable" for the page to work. If you feel thats 600px, Then a percentage of around 0.15% is probably sufficient.

Chris,

Now I'm confused. Are you saying set the width of the content DIV to 600px? Works fine but now content section is only 600px wide. Tried the .15% on the border-left and border-right settings in the centercontent DIV section. The borders disappear.

By default, both of my monitors are set to 1024x768. On a lark, I tested the page at 800x600. Works great. I then checked it on every other setting all the way to 1600x1200. Works great. The only setting in which the rightbar DIV floats below the other two DIVs are at 1024x768.

So I checked it on my wifes computer with a different monitor and video card. Works fine on all settings except 1024x768 and at the 1279 width (strange setting as mine was 1280 width and it worked fine at that setting).

Now that really blows my mind. Any idea why that happens?

Quit changing the topic title!!!

Man, that's confusing.

Triumph,

The reason for changing the Subject was to get it listed higher so I could get a response. If this caused a problem to anyone, I apologize.

I run a website design/hosting service in my local community and I don't charge a lot to do it. However, I have always tried to approach everything I do in a professional manner. That was the purpose in deciding to do this site in strictly CSS/HTML without the use of tables. I had done so much reading and research and felt this is where the industry is going and where I needed to be.

My little exercise has become a behemoth of problems. You fix one problem and it creates other problems. One thing works fine in one browser but not other browsers. The final straw was the inability to keep the rightbar DIV in it's proper location on fullscreen mode.

The amount of hacking to get it right is beyond all but the truly gifted. If I can't get one simple page to display in most browsers properly using "supposively" cutting edge technology, then I guess it's time to revert to tried and true tables.

Reminds me of all the new electronic ignition technology for American-made automobiles back in the late 80's. Bought a brand-new 1989 Oldsmobile and had nothing but problems with it. So I bought a 1980 Cadillac with no electronic ignition and you know what? That vehicle gave me several years of "dependable" service.

Until browser developers and internet industry standardist groups can finally have a joint meeting of the minds on a single set of rules, I think CSS/HTML/XHTML/XML will never reach it's stated goals of separating content from style.

It's a shame as I truly believe it is a worthy cause. Unfortunantly, I run a business and I need a dependable way to generate webpages so it's back to tried and true technology for me. I'll try to use CSS/HTML/XHTML/XML where I can but when I need dependability, I'll be using tables. Sure, there are problems but as I mentioned earlier, I designed this simple page in 30 minutes using tables and it displays virtually the same in all my test browsers.

Of course, it doesn't validate to Strict XHTML but it does to 4.01 HTML and for now, that is good enough for me. I will continue to train myself by doing exercises like this and when I feel my skills are sufficient that I can do a page similar to this in the same amount of time as I could using tables AND it displays the same in the 5 different browsers that I test with, then I'll make the transition away from tables.

I thank everyone for their feedback, especially Chris, as the page came very close to being complete. If anyone wants to continue to assist me with this page, I will continue to work on it as I feel it is a worthwhile endeavor but if not, I still appreciate your efforts.

I think you misunderstood me. I didn't mean set the border as a percentage but reduce the width of one of the regions by 0.15%. Say, use 59.85% for #centercontent - which works fine (example)

For whatever reason, browsers (this isn't an IE only thing) have what appear to be pixel rounding problems. Having dimensions in units other than pixels adding up exactly is putting your webpage at risk. Instead of adding things to 100%, make them add to 99%. The difference is small enough so that it won't have any real effect on the page appearance. Any vertical alignment issues can normally be overcome pretty easily.

The reason for changing the Subject was to get it listed higher so I could get a response. If this caused a problem to anyone, I apologize.Posting to the topic will bump it up. Changing the subject has no effect.

Chris,

The 59.85% works. However, in Mozilla/Firefox/Netscape, there is still the open space at the bottom of the content DIV section. Also, in all browsers, there is now a small gap on the right side between the content DIV and the right border of the container DIV. In addition, the rightbarlabel DIV now has a small gap to the right of it. See how one fix for one problem creates other problems!

I'm sure that these problems derive from inconsistency of browsers to meet CSS/HTML tag definitions or either a difference of opinion in what those definitions really mean. That is the dilemma facing everyone in the industry. There is no definitive body that has been able to get everyone on board, not even the W3C. Basically, it's confusion to the max. Too many chiefs and not enough indians which then creates turf battles. Is Microsoft the evil demon in all this? Maybe to some degree but as you know already, even among other browsers there are inconsistencies.

The one area where all browsers are fairly consistent is the use of the table tags. I guess that is why the 'dinosaur' table has been so hard to kill. We know it needs to go away, we pray it will go away but until there is something better out there which will perform as consistently across browsers, it will linger on and on.

As I said, I will continue to use tables until I feel that I can develop pages using CSS/HTML/XHTML/XML without having to resort to so many hacks or workarounds. I believe I am only stating the opinion that what so many designers have said privately for fear of looking foolish.

Again, I give my sincere thanks to you and everyone else for trying to help me. You have exhibited an enormous amount of patience and professionalism.

testing the content layout only. Use of additional inner division boxes.
3 columns of more columns width add to a total of 100% of nested division box.

Header, Nav. and Footer not include.

testing only
Sorry if it doesn't works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="resource-type" content="document" />
<meta name="classification" content="EnterClassificationHere" />
<meta name="robots" content="ALL" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<meta name="author" content="Luke Douglas, Wiregrass Web,515 E Church St, Headland, AL 36345, (334) 693-2148, www.wiregrassweb.net, " />
<title>Test CSS Page for WRCD designed for Firefox</title>
<!--<style>@import "/styles/boxes.css";</style>-->



<!--[if IE]>
<style type="text/css">
html, body {
   behavior: url('csshover.htc');
   word-wrap: break-word; 
   scrollbar-base-color: #999999;
   scrollbar-3dlight-color: #999999;
   scrollbar-highlight-color: #999999;
   scrollbar-face-color: #ffffff; 
   scrollbar-arrow-color: #999999;
   scrollbar-shadow-color: #999999;
   scrollbar-darkshadow-color: #999999;
   scrollbar-track-color: #f6f6f6; }

* html #menu ul li {float: left; width: 100%;}
* html #menu ul li a {height: 1%;} 

</style>
<![endif]-->

<style type="text/css">
	

		/* File: styles/boxes.css */

	.enclose                  {
		clear: both;
	}

	
		
	#header                   { /* Section HEADER */
	   clear: both;
	   width: 100%;
				float: none;
				overflow:hidden
	   }



	#scroller {
   		padding: 5px;
		}

	 
	#articles {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 1px;
    	height: auto;
	 	background-color: #ffffff;
		}
	#article1                 { /* Section ARTICLE1 */ }
	#article2                 { /* Section ARTICLE2 */ }
	#article3                 { /* Section ARTICLE3 */ }

	
	div.rightbarlabel {
			width: 100%;
			color: #ffffff;
			background-color: #009966;
			text-align: center;
			border-bottom: 1px solid #003366;
		}
	div.projectlabel {
			width: 100%;
			color: #ffffff;
			background-color: #009966;
			text-align: center;
			border-bottom: 1px solid #003366;
		}

	div.announcementlabel {
			width: 100%;
			color: #ffffff;
			background-color: #009966;
			text-align: center;
			border-top: 1px solid #003366;
			border-bottom: 1px solid #003366;
		}

	div.rightbarcontent {
			width: 100%;
	 		background-color: #ffffff;
		}
	div.projectlabel font {
		 	color: #ffffff;
			font-size: 12px;
			font-weight: bold;
		}
	div.announcementlabel font {
		 	color: #ffffff;
			font-size: 12px;
			font-weight: bold;
		}

	div.rightbarcontent li {
			padding-top: 5px;
			font-family: verdana, arial, sans-serif;
			font-size: 11px;
			font-weight: bold;
		}
	div.rightbarcontent a {
			color: #003366;
		 	font-weight: bold;
			text-decoration: none;
		}
	div.rightbarcontent a:hover {
			color: #009966;
		 	font-weight: bold;
			text-decoration: underline;
		}
		
   #footerbottom 				  { /* Section FOOTER */
   	clear: both;
   	width: 100%;
		text-align: center;
		padding: 0em;
		}
	#footerbottom-inner 				  { /* Section FOOTER */
		color: #ffffff;
		font-size: 10px;
		background-color: #003366;
		padding: 0.5em;
		}	
	p.footer              { 
	 	text-align: center;
	 	font-size: 10px;
	 	color: #ffffff;
		text-decoration: none;
		}
	a.footer              { 
	 	text-align: center;
	 	font-size: 10px;
	 	color: #ffffff;
		text-decoration: none;
		}
	font.footer 			  {
		color: #ffffff;
		font-size: 10px;
		}

	a.footer:hover { /* Section FOOTER */
	 	color: #ff9900;
		text-decoration: underline:
		}

		/* #### menu coding #### */
		#menu 			{ /* Section MENU */
                        text-align: center;
			position: relative;
			z-index: 500;
			width: 100%;
			background: #6699CC;
			float: left;
			letter-spacing: 1px;
			display: inline;
			border-bottom: solid 2px #003366;
		}

		#menu ul {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 8em;
			float: left;
		}

		#menu a {
			font: bold 11px/16px arial, helvetica, sans-serif;
			display: block;
			border-width: 1px;
			border-style: solid;
			border-color: #ccc #888 #555 #bbb;
			margin: 0;
			padding: 1px 2px;
			background: #6699CC;
		}

		#menu h2 {
			font: bold 11px/16px arial, helvetica, sans-serif;
			display: block;
			border-width: 1px;
			border-style: solid;
			border-color: #ccc #888 #555 #bbb;
			margin: 0;
			background: #6699CC;
		}

		#menu h2 {
			color: #fff;
			background: #6699CC;
			text-transform: uppercase;
		}

		#menu a {
			color: #ffffff;
			font-weight: bold;
			background-color: #6699CC;
			text-decoration: none;
		}

		#menu a:hover {
			color: #ffffff;
			font-weight: bold;
			background-color: #666666;
		}

		#menu li {position: relative;}

		#menu ul ul {
			position: absolute;
			z-index: 499;
		}

		#menu ul ul ul {
			position: absolute;
			top: 0;
			left: 100%;
		}

		div#menu ul ul,
			div#menu ul li:hover ul ul,
			div#menu ul ul li:hover ul ul
		{display: none;}

			div#menu ul li:hover ul,
			div#menu ul ul li:hover ul,
			div#menu ul ul ul li:hover ul
		{display: block;}
		
		.submenu {
			color: #ffffff;
			font-weight: bold;
			background-color: #009966;	
		}
		.submenu h2 {
			background-color: #666666;
			text-transform: uppercase;
		}

		.submenu a {
			background-color: #009966;
			text-decoration: none;
		}

		.submenu a:hover {
			background-color: #666666;
		}

		.submenu li {position: relative;}

		.submenu ul ul {
			position: absolute;
			z-index: 500;
		}

		.submenu ul ul ul {
			position: absolute;
			z-index: 501;
			top: 0;
			left: 100%;
		}

		div.submenu ul ul,
			div.submenu ul li:hover ul ul,
			div.submenu ul ul li:hover ul ul
		{display: none;}

			div.submenu ul li:hover ul,
			div.submenu ul ul li:hover ul,
			div.submenu ul ul ul li:hover ul
		{display: block;}
		
		img.imglogo {
		width: 200px;
		height: 200px;
		}
		
		img.imgbanner {
		width: 550;
		height: 200px;
		}

		img.imgborder {
			margin-left: 5px;
			margin-bottom: 5px;
			border: solid 1px #003366;
		}
		img.imgfiller5x5 {
			width: 5px;
			height: 5px;
			border: solid 0px #ffffff;
		}


/* ###### */

span.imza img { 
   vertical-align: middle; width: 20%; border: 0px;}  


span.imzb img { 
   vertical-align: middle; width: 55%; border: 0px;}  

img { vertical-align: middle; border: 0px; } 

br.cb { clear: both; line-height: 1em; }

body {
   text-align: center; 
   margin: 0px; 
   width: 100%;
   font-size: 76%; 
   color: #003366;
   font-family: verdana, tahoma, arial, sans-serif; 
   background-color:  #006699;
   padding: 1em 0em 1em 0em; }


#wrapper {
   text-align: left; 
   margin: 0px auto 0px auto; 
   width: 95%;
   min-width: 700px !important; /* or 41em. Mozilla and Opera. */ 
   min-width: none; /* IE 7 hacks */
   height: auto;     
   line-height: 135%;   
   border: 1px solid #00ff00; 
   padding: 0em; }		

#rowd {
   margin: 0px;
   width: 100%; 
   height: auto;
   background-color: #ffffff; 
   padding: 0em; } 

#rowda { /* padding and border 0px. */
   float: left; clear: right; 
   width: 20%; 
   }  
#rowtdda { /* this inner division box then use border and padding. */
   text-align: left;
   margin: 0px;
   height: auto;
   font-size: 1.1em;
   letter-spacing: 0.02em;
   border: 1px solid #ff0000; 
   padding: 0.7em; }  
	    

#rowdb { /* padding and border 0px. */
   float: left; clear: right;
   width: 60%; 
   } 
#rowtddb {
   text-align: justify;
   margin: 0px;
   height: auto;
   font-size: 1.1em;
   letter-spacing: 0.02em;
   border: 1px solid #0000ff; 
   padding: 0.7em; }


span.imageright img { 
   vertical-align: middle; width: 100%; border: 0px;}  
   
span.imageright {
   margin: 0px;
   float: right; text-align: left;
   width: 40%; /* adjust */
   color: #ff0000;
   padding: 1.5% 0% 1.5% 6%; }
html.dummy * body span.imageright { float: none; }  /* IE 4 */    
   
span.contentleft { 
   margin: 0px;
   padding: 0em;  }



#rowdc { /* padding and border 0px. */
   float: left; clear: right;
   width: 20%;  
   } 
#rowtddc {
   text-align: left;
   margin: 0px;
   height: auto;
   font-size: 1.1em;
   letter-spacing: 0.02em;
   border: 1px solid #ffb903; 
   padding: 0.7em; }

</style>

</head>
<body>

<div id="wrapper">

<div id="header">
   <span class="imza"><a href="index.htm"><img id="imglogo" alt="Wiregrass Resource Conservation &amp; Development" src="http://www.wrcd.org/images/thumb-WRCD-Logo-BG-blue-TXT-white-DIV-blue-TXT-blue-MAP-green-MOTTO-blue-outside-blue.jpg" /></a></span>
   <span class="imzb"> <img id="imgbanner" alt="Providing Services throughout the Wiregrass Area" src="http://www.wrcd.org/images/banner-collage-550x200.jpg" /></span>
   </div> <!-- close HEADER DIV -->
   
   
<div id="menu"><!-- Section MENU -->
   <ul>
      <li><h2><a href="" title="About Us">About Us</a></h2>
   <ul>
      <li><a href="about-what.php" title="What is a RC&D">What is a RC&amp;D</a></li>
      <li><a href="about-wrcd.php" title="Wiregrass RC&D">Wiregrass RC&amp;D</a></li>
      <li><a href="about-statement.php" title="Vision and Mission Statement">Vision and Mission Statement</a></li>
      <li><a href="" title="Council">Council</a>
            <div class="submenu"> 
            <ul>
            <li><a href="about-council-board.php" title="Executive Board">Executive Board</a></li>
                  <li><a href="about-council-minutes.php" title="Meeting Minutes">Meeting Minutes</a></li>
                </ul>
              </div>
              <!-- close SUBMENU DIV -->
            </li>
            <li><a href="about-staff.php" title="Wiregrass RC&amp;D Staff">Wiregrass 
              RC&amp;D Staff</a></li>
            <li><a href="about-bylaws.php" title="Bylaws">Bylaws</a></li>
            <li><a href="about-990filings.php" title="Wiregrass RC&amp;D 990 Filings">WRC&amp;D 990 Filings</a></li>
           </ul>
           </li>
   </ul>
   <ul>
   <li><h2><a href="" title="Projects">Projects</a></h2>
          <ul>
            <li><a href="" title="Projects By Year">By Year</a> 
              <div class="submenu"> 
                <ul>
                  <li><a href="projects.php?type=year&amp;year=2005" title="Projects for 2005">2005</a></li>
                  <li><a href="projects.php?type=year&amp;year=2004" title="Projects for 2004">2004</a></li>
                  <li><a href="projects.php?type=year&amp;year=2003" title="Projects for 2003">2003</a></li>
                </ul>
              </div>
              <!-- close SUBMENU DIV -->
            </li>
            <li><a href="" title="Projects By County">By County</a> 
              <div class="submenu"> 
                <ul>
                  <li><a href="projects.php?type=county&amp;county=Barbour" title="Barbour Co. Projects">Barbour</a></li>
                  <li><a href="projects.php?type=county&amp;county=Coffee" title="Coffee Co. Projects">Coffee</a></li>
                  <li><a href="projects.php?type=county&amp;county=Covington" title="Covington Co. Projects">Covington</a></li>
                  <li><a href="projects.php?type=county&amp;county=Crenshaw" title="Crenshaw Co. Projects">Crenshaw</a></li>
                  <li><a href="projects.php?type=county&amp;county=Dale" title="Dale Co. Projects">Dale</a></li>
                  <li><a href="projects.php?type=county&amp;county=Geneva" title="Geneva Co. Projects">Geneva</a></li>
                  <li><a href="projects.php?type=county&amp;county=Henry" title="Henry Co. Projects">Henry</a></li>
                  <li><a href="projects.php?type=county&amp;county=Houston" title="Houston Co. Projects">Houston</a></li>
                  <li><a href="projects.php?type=county&amp;county=Pike" title="Pike Co. Projects">Pike</a></li>
                  <li><a href="projects.php?type=county&amp;county=Russell" title="Russell Co. Projects">Russell</a></li>
                  <li><a href="projects.php?type=county&amp;county=Multi" title="Multi-County Projects">Multi-County</a></li>
                </ul>
              </div>
              <!-- close SUBMENU DIV -->
            </li>
            <li><a href="" title="Projects By Status">By Status</a> 
              <div class="submenu"> 
                <ul>
                  <li><a href="projects.php?type=status&amp;status=funded" title="Funded Projects">Funded</a></li>
                  <li><a href="projects.php?type=status&amp;status=process" title="In Procss Projects">In Procss</a></li>
                  <li><a href="projects.php?type=status&amp;status=completed" title="Completed Projects">Completed</a></li>
                  <li><a href="projects.php?type=status&amp;status=pending" title="Pending Projects">Pending</a></li>
                </ul>
              </div>
              <!-- close SUBMENU DIV -->
            </li>
            <li><a href="projects-form.php" title="Application Form for Project Submission">Application Form for Project Submission</a></li>
          </ul>
   </li>
   </ul>
   <ul>
    <li><h2><a href="" title="News">NEWS</a></h2>

          <ul>
            <li><a href="" title="Current Year News">Current Year</a> 
              <div class="submenu"> 
                <ul>
                  <li><a href="news.php?period=current&amp;type=news" title="Current News">News</a></li>
                  <li><a href="news.php?period=current&amp;type=events" title="Current Upcoming Events">Upcoming Events</a></li>
                  <li><a href="news.php?period=current&amp;type=prior" title="Current Prior Events">Prior Events</a></li>
                </ul>
              </div>
              <!-- close SUBMENU DIV -->
            </li>
            <li><a href="" title="Archived News">Archives</a> 
              <div class="submenu"> 
                <ul>
                  <li><a href="news.php?period=archive&amp;type=news" title="Archived News">News</a></li>
                  <li><a href="news.php?period=archive&amp;type=events" title="Archived Events">Events</a></li>
                </ul>
              </div>
              <!-- close SUBMENU DIV -->
            </li>
          </ul>
   </li>
   </ul>
   <ul>
   <li><h2><a href="" title="Partners">Partners</a></h2>

          <ul>
            <li><a href="partners.php?type=federal" title="Partners - Federal">Federal</a></li>
            <li><a href="partners.php?type=state" title="Partners - State">State</a></li>
            <li><a href="partners.php?type=regional" title="Partners - Regional">Regional</a></li>
            <li><a href="partners.php?type=county" title="Partners - County">County</a></li>
            <li><a href="partners.php?type=city" title="Partners - City">Cities &amp; Towns</a></li>
            <li><a href="partners-comments.php" title="Partners Comments">Partners Comments</a></li>
          </ul>
   </li>
   </ul>
   <ul>
   <li><h2><a href="" title="Library">LIBRARY</a></h2>
          <ul>
            <li><a href="library.php?type=annual" title="Annual Reports">Annual Reports</a></li>
            <li><a href="library.php?type=plan" title="Plans of Work">Plan of Work</a></li>
            <li><a href="library.php?type=other" title="Other Publications">Other Publications</a></li>
            <li><a href="library.php?type=990" title="WRC&amp;D 990 Filings">WRC&amp;D 990 Filings</a></li>
          </ul>
   </li>
   </ul>
   <ul>
   <li><h2><a href="" title="Links">Links</a></h2>
          <ul>
            <li><a href="links.php?type=federal" title="Links - Federal">Federal</a></li>
            <li><a href="links.php?type=state" title="Links - State">State</a></li>
            <li><a href="links.php?type=regional" title="Links - Regional">Regional</a></li>
            <li><a href="links.php?type=county" title="Links - County">County</a></li>
            <li><a href="links.php?type=city" title="Links - City">Cities &amp; Towns</a></li>
          </ul>
   </li>
   </ul>
   <ul>
   <li><h2><a href="" title="Contacts">Contacts</a></h2>
          <ul>
            <li><a href="contact.php?type=WRCD" title="Contacts - Wiregrass RC&amp;D">WRC&amp;D</a></li>
            <li><a href="contact.php?type=staff" title="Contacts - Wiregrass RC&amp;D Staff">Staff</a></li>
            <li><a href="contact.php?type=board" title="Contacts - Wiregrass RC&amp;D Board">Board</a></li>
          </ul>
   </li>
   </ul>
   </div> <!-- close MENU DIV -->
	

<div id="rowd"><!-- Section CONTENT -->
  
   <div id="rowda"><div id="rowtdda">
	<div id="scroller">
	<!-- marquee below does not validate in w3c, can convert it to javascript to hide from validation. -->
			<!--webbot bot="HTMLMarkup" startspan -->
<marquee direction=up height=350 onmouseout=this.scrollAmount=2 onmouseover=this.scrollAmount=0 scrollamount=2 width=100%>
<strong><font size='2' color='003366'>Barbour County</font></strong><font size='2' color='003366'><br />Project# 05-01<br /><br /><em>Eufaula Rails to Trails</em><br /><br /><font size='1'><strong>Sponsor:</strong><br />City of Eufaula<br /><br /><strong>Local Contact:</strong><br />Joy White<br /><br /><strong>Estimated Cost:</strong><br />$35,000.00<br /><strong>Funds Approved:</strong><br />$6,000.00</font><br /><br /><hr />

<strong><font size='2' color='003366'>Coffee County<br />Project# 05-26<br /><br /><em>Enterprise Senior Citizens Community Center Landscaping</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Coffee County Commission<br /><br /><strong>Local Contact:</strong><br />Jim Thompson<br /><br /><strong>Estimated Cost:</strong><br />$10,000.00<br /><strong>Funds Approved:</strong><br />1st Alternate</font><br /><br /><hr />
<strong><font size='2' color='003366'>Covington County<br />Project# 05-04<br /><br /><em>Opp Access Bridge</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />City of Opp<br /><br /><strong>Local Contact:</strong><br />Bobby Jackson<br /><br /><strong>Estimated Cost:</strong><br />$7,500.00<br /><strong>Funds Approved:</strong><br />$3,000.00</font><br /><br /><hr />

<strong><font size='2' color='003366'>Crenshaw County<br />Project# 05-06<br /><br /><em>Dozier Water Tower</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Town of Dozier<br /><br /><strong>Local Contact:</strong><br />Bud Johnson<br /><br /><strong>Estimated Cost:</strong><br />$65,000.00<br /><strong>Funds Approved:</strong><br />$3,000.00</font><br /><br /><hr />
<strong><font size='2' color='003366'>Dale County<br />Project# 05-09<br /><br /><em>Ariton High School Baseball Field</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Ariton H.S. and Jr. Legion Baseball<br /><br /><strong>Local Contact:</strong><br />Vickie Logan<br /><br /><strong>Estimated Cost:</strong><br />$19,000.00<br /><strong>Funds Approved:</strong><br />$2,000.00</font><br /><br /><hr />

<strong><font size='2' color='003366'>Geneva County<br />Project# 05-011<br /><br /><em>Geneva Sidewalk</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />City of Geneva<br /><br /><strong>Local Contact:</strong><br />Karen Simmons<br /><br /><strong>Estimated Cost:</strong><br />$14,755.65<br /><strong>Funds Approved:</strong><br />$6,000.00</font><br /><br /><hr />
<strong><font size='2' color='003366'>Henry County<br />Project# 05-12<br /><br /><em>County Annex Parking Lot</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Henry County Commission<br /><br /><strong>Local Contact:</strong><br />Lamar Turner<br /><br /><strong>Estimated Cost:</strong><br />$7,500.00<br /><strong>Funds Approved:</strong><br />$3,000.00</font><br /><br /><hr />

<strong><font size='2' color='003366'>Houston County<br />Project# 05-05<br /><br /><em>Landmark Park Streets</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Landmark Park<br /><br /><strong>Local Contact:</strong><br />William Holman<br /><br /><strong>Estimated Cost:</strong><br />$15,000.00<br /><strong>Funds Approved:</strong><br />$6,000.00</font><br /><br /><hr />
<strong><font size='2' color='003366'>Pike County<br />Project# 05-08<br /><br /><em>Critical Area Treatment - Co Rd 2262</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Pike County Commission<br /><br /><strong>Local Contact:</strong><br />Herb Huner<br /><br /><strong>Estimated Cost:</strong><br />$3,445<br /><strong>Funds Approved:</strong><br />$1,722.50</font><br /><br /><hr />

<strong><font size='2' color='003366'>Russell County<br />Project# 05-19<br /><br /><em>Nature Trail and Outdoor Discovery Center</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Lakewood Elementary School<br /><br /><strong>Local Contact:</strong><br />Sandy Watson<br /><br /><strong>Estimated Cost:</strong><br />$12,000.00<br /><strong>Funds Approved:</strong><br />$5,500.00</font><br /><br /><hr />
<strong><font size='2' color='003366'>Area-Wide<br />Project# 05-24<br /><br /><em>Teacher Workshops</em></font><br /></strong><br /><font size='1'><strong>Sponsor:</strong><br />Wiregrass RCD<br /><br /><strong>Local Contact:</strong><br />Mara Balcom<br /><br /><strong>Estimated Cost:</strong><br />$10,000.00<br /><strong>Funds Approved:</strong><br />$7,625.00</font><br /><br /><hr />

</marquee>
		<!--webbot bot="HTMLMarkup" endspan -->
		</font></div><font size='2' color='003366'>	<!-- close SCROLLER DIV -->

   </font></div></div><font size='2' color='003366'>
  

   <div id="rowdb"><div id="rowtddb">
<!-- Section CENTERCONTENT -->
    <div id="articles">
       <div id="article1">

        	<!-- Section ARTICLE1 -->  	
			<h4>Vision</h4>
          <p>To make the Wiregrass area of Alabama a better place to live and work through partnership and cooperative efforts.</p>
       </div> <!-- close ARTICLE1 DIV -->
       <div id="article2">
             	<!-- Section ARTICLE2 -->
             	<h4>Mission Statement</h4>

             	<p>Provide leadership in seeking technical and financial assistance
             	to create new opportunities in agriculture and forestry, economic
             	development, education, area development, social welfare,
             	environmental protection, and recreation and tourism.</p>
       </div> <!-- close ARTICLE2 DIV -->
       <div id="article3">
        		<!-- Section ARTICLE3 -->
				<h4>Current Project is Completed</h4>



       </div> <!-- close ARTICLE3 DIV -->
		 
     

   
   <span class="imageright"> 
   <img src="http://www.wrcd.org/images/HernyAnnexBuilding-thumb.jpg" title="Henry County Annex Parking Lot Project #05-12" alt="&gt;" /></span> 
   <span class="contentleft">We are pleased to announce the completion of the Henry County Annex
	Parking Lot improvements in Abbeville, Alabama. This was Project
             	05-12 with an estimated cost of $7,500.00.&nbsp; Wiregrass RC&amp;D
             	provided $3,000.00 funding towards this project.&nbsp; The project
             	contact was Lamar Turner, Probate Judge of Henry County</span><br class="cb" />
</div> <!-- close ARTICLES DIV -->






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

   <div id="rowdc"><div id="rowtddc">
  		<!-- Section RIGHTBAR -->
   		
		<div class="projectlabel">

       	<font>Featured Projects</font>
		</div> <!-- close CENTERCONTENT DIV -->
       <div class="rightbarcontent">
       	<ul>
               <li><a href="#">Kinston Ball Park Access Road</a></li>
               <li><a href="#">Joy Caring Building Renovation</a></li>
               <li><a href="#">Freshwater Shrimp, Phase 3</a></li>

               <li><a href="#">Agritourism Brochure</a></li>
			</ul>               
      	</div><br /> 
		<div class="announcementlabel">
       	<font>Announcements</font>
		</div>
		<div class="rightbarcontent">
       	<ul>
          		<li><a href="#">Application Forms are now available for
                   RC&amp;D Water Projects</a></li>

              <li><a href="#">Crenshaw Christian Academy Improvement Project
                   is completed</a></li>
          </ul>
       </div>
   </div></div><br class="cb" /><!-- the last column needs br clear: both to work. -->
   
   </font></div><!-- end id="rowd" -->
   <!-- close CONTENT DIV -->



  
  <div id="footerbottom">
    <div id="footerbottom-inner">
   		<!-- Section FOOTER -->
		<font class="footer">

		  <a class="footer" href="index.htm">Home</a>&nbsp;|&nbsp;
		  <a class="footer" href="mailto:[email protected]">Contact Us</a>&nbsp;|&nbsp;
		  <a class="footer" href="#">Privacy Policy</a>&nbsp;|&nbsp;
		  <a class="footer" href="#">Non-Discrimination Statement</a><br />
  			Copyright © 2005 Wiregrass RC&amp;D&nbsp;&nbsp; Design/Hosted: 
  		  <a class="footer" href="http://www.wiregrassweb.net" target="_blank">WiregrassWeb.Net</a>

      	</font>
    </div></div> <!-- close FOOTER DIV -->
 <!-- close CONTAINER DIV -->

</div><!-- end id="wrapper" -->
</body>
</html>

Without wishing to beat a dead horse.

Because a semantic layout is causing you problems with that particular layout, it doesn't universally make them "bad". Think square pegs & round holes. Come up with a round peg and you'll be fine. There are plenty excellent designs around the web with no (unsemantic) tables in sight.