...

View Full Version : header and footer not aligned in IE. Please help.



mbe
06-28-2010, 04:23 PM
Hi, I'm working on a website right now. It looks great on most browsers except IE.

The site is closed for maintenance but you can see what I'm talking about on our admin log-in page.

http://www.shopchosengirl.com/admin

The header and footer area are extended on left and right side and not aligned with the body.

On IE 7, it is less noticeable, but using IE 6, you can see around extra 20px on each side of the header and footer.

Can anyone tell me what I'm doing wrong? Any advice would be much appreciated. Thanks!

Here's the css code if it would help: http://uavwx.wcwgy.servertrust.com/v/vspfiles/templates/109/css/template.css

SB65
06-28-2010, 05:17 PM
Your page does not start with the doctype - I'm not sure whether this is a result of the maintenance mode or not. It's conceivable that this alone could cause IE problems. However, your post implies it's a problem anyway, so it may not be that, in which case...

...your problem is not so much that the header and footer are out of line, but that #content is too narrow. Try setting the width of your table in #content to 965px explicitly - this may fix IE.

mbe
06-28-2010, 07:17 PM
Thank you for your input.

The content is set to 965px already, so I'm not sure what's causing the problem.

What do you mean by doctype? I tried opening the store, but it doesn't solve it still.

Can I put any code on either html or css to fix this? Sorry I'm a newbie in css/html. Thanks!

Here's the html code of the site:

<!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">
<head>

<!--
DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HERE
DO NOT ADD YOUR OWN META TAGS, ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG
-->

<link href="vspfiles/templates/109/css/Imports.css" rel="stylesheet" type="text/css" />

</head>

<body id="body">
<!-- ==================== HEADER ==================== -->
<div id="header">
<h1 id="display_homepage_title" class="colors_homepage_title"><img src="/clear1x1.gif" style="height: 26px; width: 350px;" border="0" /></h1>

<!-- ==================== Top Nav ==================== -->
<ul id="top_nav">
<li><a href="/"><img src="http://www.shopchosengirl.com/v/vspfiles/newtemplate/freeship.gif" border="0"></a></li><br>
<li><a href="Config_FullStoreURLmyaccount.asp"><img src="http://www.shopchosengirl.com/v/vspfiles/newtemplate/account.jpg" border="0"></a></li><li><a href="Config_FullStoreURLwishlist.asp"><img src="http://www.shopchosengirl.com/v/vspfiles/newtemplate/wish.jpg" border="0"></a></li><li><a href="Config_FullStoreURLshoppingcart.asp"><img src="http://www.shopchosengirl.com/v/vspfiles/newtemplate/bag.jpg" border="0"></a></li> <br>

<li><a href="/">Lookbook</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/">Press</a></li>
<li><a href="/">Contact Us</a></li>
<li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li>
<li><a href="Config_FullStoreURLhelp.asp">Help</a></li>
<li><a href="/">Contest</a></li>
<li><a href="/">Music</a></li>


</ul>

<!-- ==================== Horizontal Nav Menu ==================== -->
<div id="horz_nav">

</div>
</div>

<!-- ==================== Content ==================== -->
<div id="content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="left_nav">

<!-- ==================== Search ==================== -->
<div id="display_search_box">
<form action="/SearchResults.asp" method="get" name="SearchBoxForm">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top">
<input type="text" maxlength="20" value="" name="Search"/>
<img src="vspfiles/templates/109/images/Template/btn_go.gif" alt="Go" border="0" style="cursor: pointer;" onclick="document.forms['SearchBoxForm'].submit();" />
</td>
</tr>
</table>
</form>
</div>

<!-- ==================== Left Navigation Menus ==================== -->
<div id="first_nav" class="nav_section">
<img src="http://www.shopchosengirl.com/v/vspfiles/newtemplate/shopnow.jpg">
<div id="display_menu_1">Display_Menu 1</div>
</div>

<div id="second_nav" class="nav_section">
<h3 style="color: Menu2_Title_TextColor; background-color: Menu2_Title_BgColor;">Menu2_Title</h3>
<div id="display_menu_2">Display_Menu 2</div>
</div>

<div id="third_nav" class="nav_section">
<h3 style="color: Menu2_Title_TextColor; background-color: Menu3_Title_BgColor;">Menu2_Title</h3>
<div id="display_menu_3">Display_Menu 2</div>
</div>

<!-- ==================== Promotions ==================== -->
<div id="display_promotions_999">Display_Promotions</div>
</td>

<!-- ==================== Content Area ==================== -->
<td id="content_area" valign="top">content_area</td>
</tr>
</table>
</div>

<!-- ==================== Footer ==================== -->
<div id="footer">
<div id="footer_top">
<ul>
<li><a href="Config_FullStoreURLaboutus.asp">Company Info</a></li>
<li><a href="Config_FullStoreURLpindex.asp">Product Index</a></li>
<li><a href="Config_FullStoreURLcindex.asp">Category Index</a></li>
<li><a href="Config_FullStoreURLaffiliate_info.asp">Become an Affiliate</a></li>
<li><a href="Config_FullStoreURLhelp.asp">Help</a></li>
<li><a href="Config_FullStoreURLterms.asp">Terms of Use</a></li>
</ul>
</div>

<div id="footer_bottom">
<a href="Config_FullStoreURLterms.asp">Copyright &copy; <script type="text/javascript">document.write((new Date()).getFullYear());</script>&nbsp; Config_CompanyNameLegal. All Rights Reserved.</a>

<!--
===========================================================================================
VOLUSION LINK - BEGIN
===========================================================================================
Customer has agreed per Volusion's Terms of Service (http://www.volusion.com/agreement_monthtomonth.asp) to maintain a text hyperlink
to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion.
Removing this link breaches the Volusion agreement.
-->
Shopping Cart Powered by <a href="http://www.volusion.com" title="Shopping Cart Software" target="_blank">Volusion</a>. Design by <a href="http://ellestudio.carbonmade.com" target="_blank">Elle</a>.
<!--
===========================================================================================
VOLUSION LINK - END
===========================================================================================
-->
</div>
</div>

</body>
</html>

SB65
06-28-2010, 07:53 PM
I know you have the width of #content set to 965px. What I'm saying is try setting the width of the table inside it explicitly to 965px:


<div id="content">
<table border="0" cellspacing="0" cellpadding="0" width="965">


Have a look here (http://www.alistapart.com/articles/doctype/) for doctypes.

mbe
06-28-2010, 09:59 PM
Sorry about that.. and thank you so much for your help, it worked!

Really appreciate it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum