PDA

View Full Version : XSLT: CSS DIV positioning works well in Firefox 2.0 but screwup in IE


emyaku
04-11-2007, 03:40 AM
Dear All,

Could someone help me with the subject matter of this thread. Though the positioning works well on any other platform not xslt.

The xslt code is thus; the url display is at http://search.iita.org (http://search.iita.org/)

<xsl:template name="my_page_header">
<!-- *** replace the following with your own xhtml code or replace the text
between the xsl:text tags with html escaped html code *** -->
<xsl:text disable-output-escaping="yes">
&lt;html&gt;&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;&lt;/meta&gt;
&lt;title&gt;IITA official website:- Google Search page&lt;/title&gt;
&lt;link rel="stylesheet" href="http://www.iita.org/styles/iita_google.css" type="text/css" /&gt;
&lt;script language="javascript" src="http://www.iita.org/jscript/iita_jscript.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad="document.form1.q.focus();"&gt;
&lt;div id="border"&gt;
&lt;div id="global_holder"&gt;
&lt;form action="" name="form1" method="post" onSubmit="return validQ();"&gt;
&lt;div id="masthead"&gt;
&lt;div id="globalNav"&gt;
&lt;div id="globecss"&gt;
&lt;div id="whoFocus"&gt;&lt;a href="http://www.iita.org/cms/details/who_details.aspx?a=75&amp;z=48"&gt;Who we are&lt;/a&gt;&lt;/div&gt;
&lt;div id="r4dnew"&gt;&lt;a href="http://www.iita.org/cms/details/research_summary.aspx?a=86&amp;z=63"&gt;Research for development&lt;/a&gt;&lt;/div&gt;
&lt;div id="libnew"&gt;&lt;a href="http://www.iita.org/cms/details/library_summary.aspx?a=87&amp;z=74"&gt;Library&lt;/a&gt;&lt;/div&gt;
&lt;div id="newsnew"&gt;&lt;a href="http://www.iita.org/cms/details/news_summary.aspx?a=95&amp;z=81"&gt;News&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div align="right" style="padding-right:5px;"&gt;&lt;a href="http://www.iita.org/index.aspx"&gt;home&lt;/a&gt; :: &lt;a href="http://outlook.iita.cgiar.org/exchange" target="_blank"&gt;mail&lt;/a&gt; :: &lt;a href="http://intranet.iita.org/index.aspx"&gt;intranet&lt;/a&gt;&lt;/div&gt;
&lt;div id="search2"&gt;
&lt;input name="q" type="text" id="q"&gt;
&lt;input type="submit" name="Submit" value=" Site " id="innerbutton" onClick="siteSearch();"&gt;
&lt;input type="submit" name="Submit" value="Google" id="innerbutton" onClick="googleSearch();"&gt;
&lt;input name="search" type="hidden"&gt;
&lt;input name="domains" type="hidden" value="iita.org"&gt;
&lt;input name="sitesearch" type="hidden" checked&gt;
&lt;input name="sa" type="hidden" value="Google Search"&gt;
&lt;/div&gt;
&lt;div class="headergmini"&gt;
&lt;div class="logo"&gt;&lt;img src="http://www.iita.org/new_mast/who.gif" width="219" height="104" border="0" usemap="#Map"&gt;&lt;/img&gt;
&lt;map name="Map"&gt;
&lt;area shape="rect" coords="11,10,187,95" href="http://www.iita.org/index.aspx" alt="IITA Research to Nourish Africa logo" title="IITA Research to Nourish Africa logo" /&gt;
&lt;/map&gt;
&lt;/div&gt;
&lt;div class="right"&gt;
&lt;div align="right"&gt;&lt;img src ="http://www.iita.org/img/who/about.jpg" border="0" Width="541" Height="104" alt="Random images related to International Agricultural Research" title="Random images related to International Agricultural Research"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;div class="featureback"&gt;
&lt;div id="featureContentx"&gt;
&lt;div id="contentbody_gmini"&gt;
&lt;div dir="ltr" align="left"&gt;
&lt;div align="left"&gt;
</xsl:text>
</xsl:template>

<xsl:template name="my_page_footer">
<span class="p">
<xsl:text disable-output-escaping="yes">
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</xsl:text>
</span>
</xsl:template>

The CSS stype positioning is thus;

#border {border:0;width:794px;height:522px;background:url( '../new_mast/bg10.png') no-repeat;margin:0 auto}

#global_holder {width:760px;margin:0 auto;text-align:left}

#globalNav {float:left;padding-left:5px;margin:20px 0 0;white-space:nowrap}
html>body #globalNav {float:left;width:400px;margin:18px 0 0;padding-left:5px;}
#globalNav img {display:block}

.header1{width:760px;height:104px;margin:-10px 0 0 0;voice-family:inherit}
html>body .header1{margin-top:-1px;margin-bottom:15px;float:right}

#masthead {width:760px}
#masthead img {margin-bottom:0}

#globecss {width:395px;position:relative;height:31px;padding :0 0 5px}

#whoFocus {width:92px;border-top:2px solid #d95c05}
#r4dnew{width:167px;border-top:2px solid #2f7a45}
#libnew{width:57px;border-top:2px solid #6f3f6e}
#newsnew{width:49px;border-top:2px solid #036}

#search2 {float:right;width:auto;padding:0px 5px 0px 0px;margin:2px 0 0 0;}
html>body #search2 {float:right;width:auto;padding:0px 5px 5px 0px;margin:2px 0 5px 0;}


#featureContentx {background:#f9f9f9;width:733px;padding:3px 10px 5px 15px;margin:-5px 1px 0 0;float:right}

#contentbody_gmini {clear:both;padding:5px 0 0;width:740px;position:relative;font-size:12px}


I appreciate any one that can help me out
Thank you.