SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy So close! Looks perfect in FF, IE throws weird banner around...

    Hey guys. I'm working on a site for my company. I can't link you to it because it's internal, but if push comes to shove and you need screenshots, let me know.

    Anyway, I have a template set up where the navigation is on the left hand side and the main content is to the right of it.

    At the top of the main content area, I have a few table cells. The top cell is a kind of "login" area that connects to another site. The next cell has has some text inside of a <div> and then an image placed into the background, aligned to the right and non-repeating in the cell. It's used to notify users what page they are on. The third cell is a space for secondary navigation and the fourth cell is where the bulk of the content goes.

    Anyway, the first two cells need to match up to the height of the logo immediately to the left of them. The logo is 71px high with 10px padding on the top and bottom controlled by the style sheet. Thus equalling 91px high.

    The second of the two cells needs to be 61px high because that's how tall the secondary image is. The remaining details should be clear by this point

    Anyway, it looks fine in Firefox, but for some weird reason, IE throws white space around the <div> with the text in it and I can't get rid of it! If I try to adjust things, it throws off the balance and then the first two cells don't seem to match in height to the logo even though all the height dimensions in the style sheet add up!

    I think it must have something to do with how IE is interpreting the CSS but I don't know what it is! I've included the code for the page and the style sheets that control everything - there are 3.

    Please help!

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/customer_center.dwt.cfm" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- InstanceBeginEditable name="title" -->
    <title>Allied Insurance - Customer Center - Overview</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="style_sheets" -->
    <link href="../style_sheets/all_pages_hybrid.css" rel="stylesheet" type="text/css" />
    <link href="../style_sheets/main_navigation.css" rel="stylesheet" type="text/css" />
    <link href="../style_sheets/customer_center.css" rel="stylesheet" type="text/css" />
    <!-- InstanceEndEditable -->
    
    
    
    </head>
    <!-- InstanceBeginEditable name="scripting" -->
    <!-- InstanceEndEditable -->
    <body>
    
    <div class="containerall">
    	<table class="all" width="100%"  border="0" cellspacing="0" cellpadding="0">
    		<tr>
    			<td class="containernav">
    				<div class="logo">
    					<a href="../default.cfm"><img src="../images/all_pages/logo.gif" alt="Home" width="150" height="71" border="0" /></a>
    				</div>
    				<div class="navigation">
    					<!--   BEGIN MENU ITEMS -->
    				  <div class="products">
    					<div class="products1"></div>
    					<div class="products2">PRODUCTS</div>
    					  <a class="products" href="../products/auto/default.cfm">Auto</a> | 
    					  <a class="products" href="../products/home/default.cfm">Home</a> | 
    					  <a class="products" href="../products/business/default.cfm">Business</a> | 
    					  <a class="products" href="../products/farm/default.cfm">Farm/Ranch</a>
    				  </div>
    				  <div class="find">
    					<div class="find1"></div>
    					<div class="find2">FIND AN AGENT</div>
    				      <a class="find" href="../find_agent/find_an_agent.cfm">Find an Agent</a> 
    				  </div>			
                      <div class="career">
    					<div class="career1"></div>
    					<div class="career2">CAREER</div>
    					  <a class="career" href="../careers/working_at_allied/default.cfm">Working at Allied</a> |  
    					  <a class="career" href="../careers/college_recruiting/default.cfm">College Recruiting</a> |<br />
    					  <a class="career" href="https://www.nwposting.com/eexallied/EPostingView2.jsp" target="_blank" >Search Jobs</a> |
    					  <a class="career" href="../careers/application_01.cfm" > Application</a></div>
    				  
    			      <div class="info">
                          <div class="info1"></div>
                          <div class="info2">INFO</div>
                        <a class="info" href="../info/about_us.cfm">About Us</a> | 
    					<a class="info" href="../info/community.cfm">Community</a> | 
    					<a class="info" href="../info/diversity.cfm">Diversity</a> | 
    					<a class="info" href="../info/locations.cfm">Locations</a> | 
    					<a class="info" href="../info/our_companies.cfm">Our Companies</a> | 
    					<a class="info" href="../info/nationwide/default.cfm">Nationwide</a> |	
    					<a class="info" href="../info/contact_us.cfm">Contact Us</a></div>
    					<div class="customercenter">
    					<div class="customercenter1"></div>
    					<div class="customercenter2">CUSTOMER CENTER</div>
    					  <a class="customercenter" href="default.cfm">Overview</a> |<br />
    					  <a class="customercenter" href="https://www.myalliedpolicy.com/templates/register.cfm" target="_blank">New Users</a> | 
    					  <a class="customercenter"href="https://www.myalliedpolicy.com/templates/index.cfm" target="_blank">Returning Users</a> </div>			
                        <div class="agents">
                        <div class="agents1"></div>
                        <div class="agents2">AGENTS</div>
                        <a class="agents" href="../agents/become_an_agent/default.cfm">Become an Agent</a> | 
    					<a class="agents" href="../agents/trusted_choice.cfm">Trusted Choice</a> | 
    					<a class="agents" href="../agents/contacts/default.cfm">Contacts</a> | 
    					<a class="agents" href="https://aac.alliedinsurance.com/agencyctr/welcome.cfm" target="_blank" >Agent Center </a> 
    					</div>
    				  <div class="translation">
                          <div class="translation1"></div>
                          <div class="translation2">ESPA&Ntilde;OL</div>
                        <a class="translation" href="../spanish_default.cfm">Espa&ntilde;ol</a> 
    				  </div>
    	
    					<div class="claims">
    					<div class="claims1"></div>
    					<div class="claims2">24/7 CLAIMS</div>
    					  <a class="claims" href="../24_7_claims/reporting_a_claim.cfm">How to Report a Claim</a> |<br />
    					  <a class="claims" href="../24_7_claims/on_your_side_card.cfm"><em>On Your Side </em> Card </a>
    				  </div>			
    			  </div>
    			</td>
    			<!-- InstanceBeginEditable name="main_body" -->
    			<td class="containermain">
    				<table width="100%"  border="0" cellspacing="0" cellpadding="0">
    					  <tr>
    						<td class="containercustomercenter"><strong>CUSTOMER CENTER LOGIN</strong> :: <a href="https://www.myalliedpolicy.com/templates/register.cfm" target="_blank">New Users</a> :: <a href="https://www.myalliedpolicy.com/templates/index.cfm" target="_blank">Returning Users</a></td>
    					  </tr>
    					  <tr>
    						<td id="header" class="customer_center"><div id="headerimage">OVERVIEW</div></td>
    					  </tr>
    					  <tr>
    						<td class="subnavcontainer">
    						</td>
    				  </tr>
    					  <tr>
    						<td id="copy">
    						<div class="voice"><img src="images/default.jpg" width="150" height="150" class="alignleft" />Save time. <br />
    						  Do it online.</div>
    						Allied&rsquo;s online customer center gives you easy, 24/7 access to all of your personal lines policy-related needs.
    						<ul>
                              <li> Online payment options and account history </li>
                              <li> Personalized coverage information and claims status </li>
                              <li> An online copy of your policy and other detailed information </li>
                              <li> FAQs to help answer billing, claims or policy questions </li>
    						  </ul>
    						If you&rsquo;re already a registered user, simply sign on to our <a href="https://www.myalliedpolicy.com/templates/index.cfm" target="_blank">Customer Center</a>. New users can click <a href="https://www.myalliedpolicy.com/templates/register.cfm" target="_blank">here</a> to create an account.</td>
    					  </tr>
    			  </table>
    			</td>
    			<!-- InstanceEndEditable -->
    		</tr>
    		<tr>
    		  <td colspan="2" class="containerbottomnav">
    				<div class="trusted_choice">				  <a href="http://www.trustedchoice.com" target="_blank"><img src="../images/all_pages/trusted_choice.gif" alt="Trusted Choice" width="47" height="50" border="0" /></a>
    				</div>
    				<div class="truste">
    					<a href="../privacy_terms_conditions/privacy/default.cfm"><img src="../images/all_pages/trust_e.jpg" alt="TRUSTe" width="116" height="31" border="0" /></a>
    				</div>
    				<a href="../privacy_terms_conditions/privacy/default.cfm">PRIVACY STATEMENT</a> | <a href="../privacy_terms_conditions/terms_conditions/default.cfm">TERMS AND CONDITIONS</a><br />
    			  <strong>Allied Insurance, a Nationwide&reg; company - On Your Side // Copyright &copy; 2002 - 2005 Allied Insurance</strong><br />
    			  <em>On Your Side</em> is a service mark of Nationwide Mutual Insurance Company.  
    		  </td>
    		</tr>
    	</table>
    </div>
    
    </body>
    <!-- InstanceEnd --></html>
    Code:
    /* BEGIN ALL PAGES STYLES */ 
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #525051;
    	text-decoration: none;
    	margin: 0px;
    	padding-top: 10px;
    	background-image: url(../images/all_pages/background_gradient.jpg);
    	background-repeat: repeat-x;
    	background-position: bottom;
    }
    sup {
    	font-size: 7px;
    }
    a {
    	color: #000;
    }
    a:hover {
    	text-decoration: none;
    }
    a:visited {
    	color: #525051;
    }
    .containerall {
    	width:760px;
    	position:absolute;
    	left:50%;
    	margin-left:-380px;
    	display: block;
    }
    table.all {
    	width: 100%;
    	border-collapse: collapse;
    	padding: 0px;
    	margin: 0px;
    	border: 0px;
    }
    .containernav {
    	width: 253px;
    	background-color: #F1EAD8;
    	vertical-align: top;
    }
    .containercustomercenter {
    	color: #FFFFFF;
    	background-color: #255d82;
    	height: 20px;
    	padding: 7px 0px 7px 5px;
    	border: 0px;
    	margin: 0px;
    }
    .containercustomercenter a{
    	color: #FFFFFF;
    }
    .containercustomercenter a:hover{
    	text-decoration: none;
    }
    .containercustomercenter a:visited{
    	color: #fff;
    }
    .containermain {
    	height: 533px;
    	width: 507px;
    }
    .containerbottomnav {
    	font-size: 9px;
    	text-align: right;
    	padding: 10px;
    }
    .truste {
    	float: left;
    	padding-left: 10px;
    	padding-top: 10px;
    }
    .trusted_choice {
    	float: left;
    	padding-left: 10px;
    }
    #main_page_display_table {
    	width: 507px;
    	height: 507px;
    	border: 0px;
    }
    #main_page_display_table td img {
    	width: 254px;
    	height: 254px;
    	border: 0px;
    }
    #main_page_display_table .rule {
    	height: 3px;
    	border: 0px;
    	background-color: #0076CC;
    }
    
    /* END ALL PAGES STYLES */
    Code:
    /* BEGIN NAVIGATION STYLES */ 
    .logo {
    	background-color: #C6B176;
    	padding: 10px 0px 10px 20px;
    }
    .navigation {
    	padding: 10px 10px 10px 20px;
    }
    
    	/* BEGIN MENU ITEM STYLES */ 
    	
    
    	/* BEGIN MENU ITEM STYLES PRODUCTS*/ 
    	.products {
    		margin-bottom: 15px;
    	}
    	a.products {
    	text-decoration: none;
    	}
    	a.products:hover {
    		color: #807930; text-decoration: underline;
    	}
    	a.products:active {
    		color: #807930; 
    	}
    	.products1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #807930;
    	}
    	.products2 {
    		border-bottom: 1px solid #807930;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES PRODUCTS*/ 
    	
    	
    	/* BEGIN MENU ITEM STYLES AGENTS*/ 
    	.agents {
    		margin-bottom: 15px;
    	}
    	a.agents {
    	text-decoration: none;
    	}
    	a.agents:hover {
    		color: #A83C0F; text-decoration: underline;
    	}
    	a.agents:active {
    		color: #A83C0F;
    	}
    	.agents1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #A83C0F;
    	}
    	.agents2 {
    		border-bottom: 1px solid #A83C0F;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES AGENTS*/ 
    	
    
    	/* BEGIN MENU ITEM STYLES CAREER*/ 
    	.career {
    		margin-bottom: 15px;
    	}
    	a.career {
    	text-decoration: none;
    	}
    	a.career:hover {
    		color: #392563; text-decoration: underline;
    	}
    	a.career:active {
    		color: #392563;
    	}
    	.career1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #392563;
    	}
    	.career2 {
    		border-bottom: 1px solid #392563;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES CAREER*/ 
    	
    
    	/* BEGIN MENU ITEM STYLES CUSTOMER CENTER*/ 
    	.customercenter {
    		margin-bottom: 15px;
    	}
    	a.customercenter {
    	text-decoration: none;
    	}
    	a.customercenter:hover {
    		color: #083C5E; text-decoration: underline;
    	}
    	a.customercenter:active {
    		color: #083C5E;
    	}
    	.customercenter1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #083C5E;
    	}
    	.customercenter2 {
    		border-bottom: 1px solid #083C5E;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES CUSTOMER CENTER*/ 
    	
    
    	/* BEGIN MENU ITEM STYLES INFO*/ 
    	.info {
    		margin-bottom: 15px;
    	}
    	a.info {
    	text-decoration: none;
    	}
    	a.info:hover {
    		color: #085D63; text-decoration: underline;
    	}
    	a.info:active {
    		color: #085D63;
    	}
    	.info1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #085D63;
    	}
    	.info2 {
    		border-bottom: 1px solid #085D63;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES INFO*/ 
    	
    
    	/* BEGIN MENU ITEM STYLES QUICK LINKS*/ 
    	.quicklinks {
    		margin-bottom: 15px;
    	}
    	a.quicklinks {
    	text-decoration: none;
    	}
    	a.quicklinks:hover {
    		color: #A1B5BF; text-decoration: underline;
    	}
    	a.quicklinks:active {
    		color: #A1B5BF;
    	}
    	.quicklinks1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #A1B5BF
    	}
    	.quicklinks2 {
    		border-bottom: 1px solid #A1B5BF;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES QUICK LINKS*/ 
    	
    	
    	/* BEGIN MENU ITEM STYLES CLAIMS*/ 
    	.claims {
    		margin-bottom: 0px;
    	}
    	a.claims {
    	text-decoration: none;
    	}
    	a.claims:hover {
    		color: #7B0A19; text-decoration: underline;
    	}
    	a.claims:active {
    		color: #7B0A19;
    	}
    	.claims1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #7B0A19;
    	}
    	.claims2 {
    		border-bottom: 1px solid #7B0A19;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES CLAIMS*/ 
    
    	/* BEGIN MENU ITEM STYLES FIND AN AGENT*/ 
    	.find {
    		margin-bottom: 15px;
    	}
    	a.find {
    	text-decoration: none;
    	}
    	a.find:hover {
    		color: #085D26; text-decoration: underline;
    	}
    	a.find:active {
    		color: #085D26;
    	}
    	.find1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #085D26;
    	}
    	.find2 {
    		border-bottom: 1px solid #085D26;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	/* END MENU ITEM STYLES FIND AN AGENT*/ 
    	
    	.translation {
    		margin-bottom: 15px;
    	}
    	a.translation {
    	text-decoration: none;
    	}
    	a.translation:hover {
    		color: #0076CC; text-decoration: underline;
    	}
    	a.translation:active {
    		color: #0076CC;
    	}
    	.translation1 {
    		float: left;
    		width: 15px;
    		height: 15px;
    		background-color: #0076CC;
    	}
    	.translation2 {
    		border-bottom: 1px solid #0076CC;
    		padding-left: 20px;
    		font-weight: bold;
    	}
    	
    	/* END MENU ITEM STYLES */
    Code:
    .containermain {
    	vertical-align: top;
    	background-color: #FFF;
    	border-left: 1px solid #083C5E;
    }
    #header {
    	height: 61px;
    	padding: 0px;
    	margin: 0px;
    	border: 0px;
    }
    #headerimage {
    	width: 396px;
    	height: 41px;
    	border: 0;
    	text-align: right;
    	vertical-align: bottom;
    	font-size: 24px;
    	font-weight: bold;
    	color: #FFF;
    	background-color: #083C5E;
    	padding: 16px 4px 4px 0px;
    }
    #header.customer_center {
    	background-image:url(../customer_center/images/header.jpg);
    	background-repeat: no-repeat;
    	background-position:right;
    }
    .subnavcontainer {
    	display: block;
    	height: 20px;
    	background-color: #6D9AB7;
    	border-bottom: 1px solid #083C5E;
    
    }
    #copy {
    	padding: 10px;
    }
    #copy img.alignleft {
    	float: left;
    	border: 1px solid #083C5E;
    	width: 150px;
    	height: 150px;
    	margin-right:20px;
    }
    #copy .voice {
    	color: #083C5E;
    	font-weight: bold;
    	font-size: 33px;
    	height: 150px;
    	margin-bottom: 10px;
    	vertical-align: middle;
    }

  2. #2
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologies for bumping this - I know it's not good ettiquite. But I really need help with this as it is for a corporate client, my employer, and I don't know where else to turn for a resource.

    Is it a matter of giving too much information? How can I rephrase the problem to get a little help. I really just need a pair of fresh eyes on this thing and have no resources within my department.

    Help!

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would it be possible for you to somehow upload a copy of this page so that we can see it properly - you know it's difficult to get the whole picture without the images (besides which, it's just more convenient).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •