[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 537
  • Last Modified:

problems with css menu in IE7 after transforming xml into xhtml using xslt.

I have an xml file that is transformed into xhtml using xslt.  The menu is not working properly in internet explorer when used in the xsl file.  The menu is working just fine in all html files though.
I have included the css file for the menu as well as the xml and xsl files as well.
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="chart.xsl"?>

<stocks>
	<stock>
  	        <name>3M</name>
            <revenue>23.123B</revenue>
            <netincome>3.193B</netincome>
            <tax>1.388B</tax>
			<eps>4.52</eps>
			<shares>706M</shares>
			<joined>Aug.30,1976</joined>
			<main_image file="/images/mmm.gif" />
    </stock>


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/>
<xsl:template match="/">

<html>
      <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <link href="/main.css" rel="stylesheet" type="text/css" />      
        <link href="/menu.css" rel="stylesheet" media="all" type="text/css" />
	    <link href="charts.css" rel="stylesheet" media="all" type="text/css" />
        <title>longrundata.com</title>
      </head>
   <body>
  

  <div class="menu">
<ul>
<li><a href="/">HOME</a></li>
<li><a>HISTORICAL DATA<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a class="drop" href="#x" >STOCK EXCHANGES &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
            <li><a>NORTH AMERICA &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="/exchanges/djia/djia.php">DOW JONES INDUSTRIALS</a></li>
					<li><a href="/exchanges/sp500/sp500.php">SP 500</a></li>
					<li><a href="/exchanges/nasdaq/nasdaq.php">NASDAQ</a></li>
					<li><a href="/exchanges/tsx/tsx.php">TORONTO STOCK EXCHANGE</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a>EUROPE &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="#x">LONDON STOCK EXCHANGE</a></li>
					<li><a href="#x">GERMAN DAX</a></li>
					<li><a href="#x">PARIS CAC 40</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#x">ASIA/PACIFIC &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="/exchanges/nikkei/nikkei.php" >NIKKEI</a></li>
					<li><a href="#x">SHANGHAI </a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
		</li>
	  <li><a href="/buscycles/buscycles.php">BUSINESS CYCLES</a></li>
	  <li><a href="/spearnings/spearnings.php">SP 500 EARNINGS</a></li>
	  <li><a href="/chart.xml">STOCK CHARTS</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	
</li>
<li><a href="#x">CONTACT US</a></li>
</ul>
</div> <!-- end of info --> 
   
        <br /><br />
        <h2>40 Year Historical Stock Charts (DJIA)</h2>
        <div id="chart">
         
              <xsl:apply-templates select="stocks/stock">
              </xsl:apply-templates>
           
        </div>
   </body>
</html>
</xsl:template>

<xsl:template match="stock">
<p><xsl:value-of select="name"/></p>
<table id="table" border="1">			
<tr>
<th>(2009) Revenue</th>
<td><xsl:value-of select="revenue"/></td></tr><tr>
<th>Net Income</th>
<td><xsl:value-of select="netincome"/></td></tr><tr>
<th>Income Tax</th>
<td><xsl:value-of select="tax"/></td></tr><tr>
<th>EPS</th>
<td>$<xsl:value-of select="eps"/></td></tr><tr>
<th>Shares</th>
<td><xsl:value-of select="shares"/></td></tr><tr>
<th>Joined Dow</th>
<td><xsl:value-of select="joined"/></td></tr>
</table>		
<xsl:apply-templates select="main_image"/>	
<hr />	
</xsl:template>


<xsl:template match="main_image">
 <img>
  <xsl:attribute name="src"><xsl:value-of select="./@file"/></xsl:attribute>
 </img>
</xsl:template>

</xsl:stylesheet>



	
		/* style the outer div to give it width */
.menu {
/* margin-left - to center the menu */
width:500px; 
font-size: .85em;
padding-bottom: 20px;
cursor: hand;
text-align: center;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float: left;
width:150px;
position:relative;

}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
font-family: sans-serif;
text-decoration:none; 
color:#fff; 
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#758279; 
padding-left:10px; 
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

Open in new window

0
dmalovich
Asked:
dmalovich
  • 4
1 Solution
 
ronan1979Commented:
you have an error in your XML file. You miss the end of stocks tag '</stocks>' at the end of the file. FireFox must have fixed it.

Internet Explorer 6.0 Error Message :
The following tags were not closed: stocks. Error processing resource ...
0
 
dmalovichAuthor Commented:
I actually do have </stocks> at the end of my xml file.  I just missed it when I copied/pasted the code to experts exchange.
0
 
käµfm³d 👽Commented:
What exactly is the problem? Using Superpreview, the attached image is what I saw in IE 8 & 6.
Untitled.jpg
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
dmalovichAuthor Commented:
Thanks for the response.  If you use the css file included for the menu, the Historical Data link doesn't work in ie, but is working in firefox.
0
 
dmalovichAuthor Commented:
I may have narrowed the problem down to 'Text - Empyt Text Node' using web developer in ie8. This shows up in the <a> attributes of the menu.
0
 
dmalovichAuthor Commented:
I have found out that i needed to add <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > for it to work in ie7.      
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now