We help IT Professionals succeed at work.
Get Started

HTML to CSS Conversion question

btintermedia
btintermedia asked
on
337 Views
Last Modified: 2012-05-09
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
This problem has been solved!
Unlock 2 Answers and 2 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE