Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    mbe
    mbe is offline
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    header and footer not aligned in IE. Please help.

    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...s/template.css
    Last edited by mbe; 06-28-2010 at 04:28 PM. Reason: additional info

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • #3
    mbe
    mbe is offline
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by mbe; 06-28-2010 at 07:19 PM. Reason: additional info

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    <div id="content">
      <table border="0" cellspacing="0" cellpadding="0" width="965">
    Have a look here for doctypes.

  • #5
    mbe
    mbe is offline
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that.. and thank you so much for your help, it worked!

    Really appreciate it.


  •  

    Posting Permissions

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