We help IT Professionals succeed at work.

HTML to CSS Conversion question

btintermedia
btintermedia asked
on
I am in the process of converting a site over to CSS.

the site is graceforcleveland.org

the code for the page is reference below.

The main part of the page has been converted over to CSS, but the page is still being populated by html tables.

You can see that the HTML is blowing up the design (http://www.graceforcleveland.org

my question is: when I convert the modules that use the old html to CSS table structure - will they be compliant with the CSS - or are there problems with my code that will continue to cause layout problems.

I want the structure of the site to flow/expand with the content as it is poulated by the imbedded modules (which I have not converted yet)

in this page, the content modules begin at <cfinclude template="../../../content/application_architecture/content_containers/#center_layout_model#">      

any suggestions??

I was hoping that the css would expand to accept the HTML tables within them - but it looks like it is flowing outside of them. But I also know that this may be because of forced size/structures in the css code itself - which I am not sure I know how to change, if it can be changed to fix the problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Welcome to Grace Assembly of God, Cleveland TN</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <cfoutput>
		<link rel="stylesheet" type="text/css" href="http://www.kingdomathand.com/designs/#site_design#/html/stylesheet.css">
		<link href="http://www.kingdomathand.com/designs/#site_design#/html/index.css" rel="stylesheet" type="text/css">
        </cfoutput>
	</head>
	<body background="tile.jpg" link="#859dc7" text="#000000" vlink="#969982">
		<div class="ts-1">
			<div class="ts-1-1">
				<div class="ts-2">
					<div class="ts-2-1">
						<div class="ts-3">
							<div class="ts-3-1">
                            <!-- dynamic flash banner here; .swf file should be in same folder as this page -->
                            <cfoutput>
                            <!--- BEGIN SIDE CODE --->				
<cfinclude template="../../../modules/FlashBanner2.cfm">
<!--- we do not put the flash banner in with the content_container because the flash movie is part of the interface/design --->
<cfinclude template="../../../content/application_architecture/content_containers/#side_layout_model#">

<!--- <cfinclude template="../../../content/application_architecture/content_containers/default_side_one.cfm">
  side_layout_model = <cfoutput> #side_layout_model# </cfoutput>  code for debugging --->
<!--- END SIDE CODE --->
</cfoutput>
                            
                            </div>
							<div class="gen-1"></div>
						</div>
					</div>
					<div class="ts-2-2">
						<div class="ts-4">
							<div class="text_medium ts-4-1">
								<div align="left"><object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="509" height="160"><param name="movie" value="top.swf"><param name="quality" value="high"><embed src="top.swf" width="509" height="160" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed></object></div>
							</div>
							<div class="gen-1"></div>
						</div>
						<div class="ts-5">
							<div class="ts-5-1">
								<div class="ts-6">
									<div class="text_medium ts-6-1">
										<p class="gen-3"></p>
										<div align="center">
											<p align="center"><a href="home.cfm"><span class="text_small">home</span></a><span class="text_small"> | <a href="aboutus.cfm">about us</a> | <a href="ministries.cfm">ministries</a> | <a href="forum.cfm">forum</a> | <a href="articles.cfm">articles</a> | <a href="sermons.cfm">sermons</a> | <a href="contacts.cfm">staff</a> | <a href="services.cfm">service times and directions</a> | <a href="comments.cfm">contact us</a><br><br><a href="dy_page.cfm?pagename=angel_food_ministries">angel food ministries</a> - <a href="dy_page.cfm?pagename=test_page">test page</a> -  <cfinclude template="../../../modules/pagelinks.cfm"></span></p>
										</div>
										<p class="gen-4"></p>
									</div>
									<div class="gen-1">
                                    
                                    
                                    <!--- this code no longer belongs here, but has been moved under application architecture, it has been kept here for reference purposes only.	
<cfparam name="page_personality_module" default="">
<cfinclude template="../../../modules/#page_personality_module#"> --->	
		

		
		<cfinclude template="../../../content/application_architecture/content_containers/#center_layout_model#">	
		
		
	
					
<!--- debuging code for page_personality_module
<cfoutput> page_personality_module is #page_personality_module# and pagename is #pagename#</cfoutput> --->
                                    
                                    
                                    
                                    </div>
								</div>
							</div>
							<div class="gen-1"></div>
						</div>
					</div>
					<div class="ts-2-3"></div>
					<div class="ts-2-4">&nbsp;</div>
					<div class="ts-2-5">&nbsp;</div>
					<div class="ts-2-6"><img src="images/spacer.gif" width="58" height="1"></div>
					<div class="ts-2-7">
						<div class="ts-7">
							<div class="ts-7-1">
								<img src="images/tanspacer.gif" width="759" height="1">
								<div class="ts-8">
									<div class="ts-8-1">
										<div align="center" class="text_small">
											<img border="0" hspace="5" src="title.gif" width="257" height="30">
											<br>
											<div class="ts-9">
												<div class="ts-9-1">
													<div align="center"></div>
												</div>
												<div class="ts-9-2"></div>
												<div class="gen-1"></div>
											</div>
										</div>
									</div>
									<div class="gen-1"></div>
								</div>
							</div>
							<div class="ts-7-2"><img src="images/spacer.gif" width="58" height="4"></div>
							<div class="ts-7-3">
								<div class="ts-10">
									<div class="ts-10-1">
										<div align="center">
											<a href="home.cfm"><span class="text_small">home</span></a>
											
											<span class="text_small">
												-
												<a href="aboutus.cfm">about us</a>
												-
												<a href="pastorsdesk.cfm">pastor's desk</a>
												-
												<a href="ministries.cfm">ministries</a>
												-
												<a href="forum.cfm">forum</a>
												-
												<a href="calendar.cfm">calendar</a>
												-
												<a href="services.cfm">service times and direction</a>
												-
												<a href="articles.cfm">articles</a>
												-
												<a href="sermons.cfm">sermon notes</a>
												-
												<a href="contacts.cfm">staff</a>
												-
												<a href="gallery.cfm">photo gallery</a>
												-
												<a href="links.cfm">relevant links</a>
												
												<br>
												<a href="register.cfm">register </a>
												-
												<a href="enroll.cfm">get involved</a>
												-
												<a href="comments.cfm">contact us</a>
												-
												<a href="sec/Menu.cfm">admin menu</a>
												-
												<a href="sec/logout.cfm">admin logout</a>
												
												<br>
												<!-- GET LINKS FOR THE MINISTRIES -->
												<br>
												<div align="center"></div>
												<i>Built and Maintained by Bezalel Technologies Intermedia, www.btintermedia.com<br>Powered and Enabled by The Kingdom at Hand Project, www.kingdomathand.com<br>Isn't it time professionals took care of you too? solutions@bezaleltech.com</i>
												
											</span>
											<div align="center">
												<div align="center"></div>
											</div>
										</div>
									</div>
									<div class="gen-1"></div>
								</div>
							</div>
							<div class="ts-7-4">&nbsp;</div>
							<div class="gen-1"></div>
						</div>
					</div>
					<div class="ts-2-8"><img src="images/spacer.gif" width="163" height="1"></div>
				</div>
			</div>
			<div class="gen-1"></div>
		</div>
		<p>&nbsp;</p>
	</body>
</html>

Open in new window

Comment
Watch Question

Commented:
At any time you can go to http://jigsaw.w3.org/css-validator/ and validate your css code. Currently you have 5 errors. You can also check your html code here http://validator.w3.org/. You currently have 46 errors. Fix the errors first and then you should have a better chance of narrowing down your problem.
Thee important points
(1) you can style table elements -- TABLE, TR, TD etc with CSS just as well as a DIV structure, and it works very well in CSS.  
(2) and most important for your site, you need to keep the tables outside the DIV structure, and if at all possible keep any DIV structure outside the tables.  It is not the tables that are "blowing up" the page, it is mixing up DIV and tables in the same hierarchy.  Don't do it, you will get X-browser compatibility problems.
(3) If you want an expanding layout, you use % widths in tables and DIVs, so that as the browser window is resized, the elements expand to fit the page.  

Remember, % height is meaningless in tables, as tables, by design, ALWAYS expand to fit their content and never chop it off.  In contrast, % height in DIVs does mean something, they can limit their size to absolute numbers irrespective of content.