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>
ty for teaching me something new.