Page 1 of 1

[SOLVED] Help with making my header work in IE.

Posted: Thu Apr 23, 2009 6:10 pm
by kyle21
See this page http://cornerstoneprocessing.com/index.php

Displays fine in FF but in IE there's a gap between the table for my header and the menu.

Code for the template I'm using, I replaced the default header code with a table.  The only CSS I have on that DIV is a height of 120px, which is the image height.

Code: Select all

{Statistics}
{process_pagedata}
<!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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

<head>

<link rel="canonical" href="{if isset($canonical)}{$canonical}{else}{$content_obj->GetURL()}{/if}" />

<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}



{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(100%));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}


</head>

</__body>

<div id="pagewrapper">

    {* start accessibility skip links *}
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    {* end accessibility skip links *}


    <hr class="accessibility" />
    {* Horizontal ruler that is hidden for visual browsers by CSS *}

<div id="headertop">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" bgcolor="#FFFFFF">
  <tr>
    <td width="50%" align="left" valign="top">
<a href="index.php">
    <img border="0" src="uploads/images/logo.jpg"  style="border:0px;"></a></td>
    <td width="50%" align="right" valign="top">
    <p align="right">
    <img border="0" src="uploads/images/right_grade.jpg" ></td>
  </tr>
</table>
</div>

   {* Start Navigation *}
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
      {menu template='simple_navigation.tpl' number_of_levels='1'}
   <hr class="accessibility" />
   </div>
   {* End Navigation *}


   {* Start Search *}
   <div id="search">
          {search}
   </div>
   {* End Search *}

   {* Start Breadcrumbs *}
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   {* End Breadcrumbs *}


   {* Start Content (Navigation and Content columns) *}
   <div id="content">

      {* Start Sidebar *}
      <div id="sidebar">

      {* Start Sub Navigation *}
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>

          {* NB! The <ul><li> below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list *}
          <ul><li><p style="font-family: arial,helvetica,sans-serif;margin:1mm;display:block;background: url(images/cms/menu_grade.jpg)  center repeat-x;font-weight:bold;align:center;padding:.5mm;color:#01628F;border: 1px solid #cccccc" align="center">In This Section</p>{menu template='simple_navigation.tpl' start_level='2' collapse='1'}</li></ul>
      <hr class="accessibility" />
      </div>
      {* End Sub Navigation *}

{global_content name='left-content'}



      </div>
      {* End Sidebar *}


      {* Start Content Area *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true pdf=true src_img=uploads/images/pdf_button.png}</div>
         <div style="float: right;">{print showbutton=true script=true  src_img=uploads/images/print_button.png}</div>
         <h2>{title}</h2>
         {content} <br />

         {* Start relational links *}
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Top'}</p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous" label="Previous page: "} <br />
            {cms_selflink dir="next"}</p>
         </div>
         {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
	 {* End relational links *}

      <hr class="accessibility" />
      </div>
	  {* End Content Area *}


   </div>
   {* End Content *}


   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="footer">
      {global_content name='footer'}
   </div>   
   {* End Footer  *}


</div>{* end pagewrapper *}
<__body>
</__html>
Any help would be great :] .

Re: Help with making my header work in IE.

Posted: Fri Apr 24, 2009 12:08 am
by tyman00
Try replacing your "headertop" div in your template with this:

Code: Select all

<div id="headertop">
    <img src="uploads/images/logo.jpg"  alt="Logo">
</div>
Then in your css stylesheet edit your headertop css with this:

Code: Select all

#headertop {
  height: 120px;
  background-image: url('bgdesert.jpg');
  background-repeat: no-repeat;
  background-position: top right;
}

Using CSS for layouts makes for a cleaner page source. Plus it is much more "accessible".

Re: Help with making my header work in IE.

Posted: Fri Apr 24, 2009 12:46 am
by Dr.CSS
Most likely it is from the statistics tag call at the top, when I view source in ff it gives me an error of no doctype which youy do have but you have stuff above it which no browser wants to see anything there so it is running in some crazy quirks mode or something, put that tag at the bottom or ? and you should be good to go...

Re: Help with making my header work in IE.

Posted: Fri Apr 24, 2009 3:00 am
by tyman00
Good catch Mark.

Should still go with a div layout though vs. table.

Re: Help with making my header work in IE.

Posted: Fri Apr 24, 2009 3:44 am
by Dr.CSS
Hey whatchu got agin tables don u eat at 1 every night?...

Re: Help with making my header work in IE.

Posted: Fri Apr 24, 2009 3:46 am
by tyman00
Naw I replaced it with a cubicle DIVider

Re: Help with making my header work in IE.

Posted: Fri Apr 24, 2009 3:51 pm
by kyle21
Thanks a lot guys, works great now :)  ty for teaching me something new.

Re: [SOLVED] Help with making my header work in IE.

Posted: Fri Apr 24, 2009 4:15 pm
by tyman00
Anytime. If you haven't checked it out... visit www.w3schools.com&nbsp; it's a must read.