5 replies [Last post]
gigaart
gigaart's picture
Offline
newbie
Last seen: 9 years 17 weeks ago
Timezone: GMT-5
Joined: 2010-07-18
Posts: 3
Points: 4

My navigation bar does not expand the whole cell in internet explorer but does in google chrome. In IE the nav bar has maybe a 2-4 px space on the right hand side of it. Is there anyway to get the contents of this cell to expand the full cell both in IE and Chrome? Site link and code below. This nav bar uses CSS and Javascript to work. Any assistance is greatly appreciated.

Site: http://webpages.charter.net/gigamosis/template3.html

HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="list.">
<meta name="keywords" content="list, list">
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<script type="text/javascript" src="csshorizontalmenu.js"></script>
</head>
<body class="bordertdcolor">
<div align="center">
  <table width="752" border="0" cellpadding="0" cellspacing="0" bgcolor="white">
          <tr>
		  		<td class="bordertdcolor">&nbsp;</td>
          			<td width="100%" valign="top"><IMG SRC="images/blank.jpg" width="752" height="116" ALT="*"></td>
          		<td class="bordertdcolor">&nbsp;</td>
          </tr>
          <tr>
          		<td class="bordertdcolor">&nbsp;</td>
          		<td width="752" valign="top" bgcolor="black"><div class="horizontalcssmenu">
					<ul id="cssmenu1">
						<li style="border-left: 1px solid #202020;"><a href="http://www.google.com">Home</a></li>
						<li><a href="http://www.google.com" >Clips</a></li>
						<li><a href="http://www.google.com">Packages</a></li>
						<li><a href="#">Resources</a>
				    <ul>
				    	<li><a href="http://www.google.com">10 Reference</a></li>
				    	<li><a href="http://www.google.com">11 Reference</a></li>
				    	<li><a href="http://www.google.com">12 Reference</a></li>
				    </ul>
						</li>
						<li><a href="http://www.google.com">FAQs</a></li>
						<li><a href="#">References</a>
				    <ul>
				    	<li><a href="http://www.google.com">Ref#1</a></li>
				    	<li><a href="http://www.google.com">Ref#2</a></li>
				    	<li><a href="http://www.google.com">Ref#3</a></li>
				    	<li><a href="http://www.google.com">Ref#4</a></li>
				    </ul>
						</li>
					</ul>
					</div>
				</td>
				<td class="bordertdcolor">&nbsp;</td>
		 </tr>
  </table>
</div>
</body>
</html>

CSS Code

.horizontalcssmenu ul{
margin: 0;
padding: 0;
position: relative;
}
 
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
 
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 122; /*Width of top level menu link items*/
padding: 1px 1px;
border: 1px solid #666666;
border-left-width: 0px;
text-decoration: none;
background: url(images/css/menubg.gif) center center repeat-x;
color: black;
font: bold 13px Tahoma;
color: #FFFFFF;
}
 
/*Sub level menu*/
.horizontalcssmenu ul li ul{
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
 
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
 
 
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 1px 1px;
background: url(images/css/menubg.gif) center center repeat-x;
border-width: 0 1px 1px 1px;
}
 
.horizontalcssmenu ul li a:hover{
background: #000000;
}
 
.bordertdcolor{
background: grey;
}
 
.horizontalcssmenu ul li ul li a:hover{
background: #000000;
}
 
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(images/css/menuarrow.gif) no-repeat center left;
}

Javascript Code

var cssmenuids=["cssmenu1"] 
var csssubmenuoffset=-1
 
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
  var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
    	var spanref=document.createElement("span")
			spanref.className="arrowdiv"
			spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
			ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    	ultags[t].parentNode.onmouseover=function(){
					this.style.zIndex=100
    	this.getElementsByTagName("ul")[0].style.visibility="visible"
					this.getElementsByTagName("ul")[0].style.zIndex=0
    	}
    	ultags[t].parentNode.onmouseout=function(){
					this.style.zIndex=0
					this.getElementsByTagName("ul")[0].style.visibility="hidden"
					this.getElementsByTagName("ul")[0].style.zIndex=100
    	}
    }
  }
}
 
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Validate!

Incomplete doctype = IE in Quirks Mode. Fix that up and see if the problem still occurs in IE.

Verschwindende wrote:
  • CSS doesn't make pies

gigaart
gigaart's picture
Offline
newbie
Last seen: 9 years 17 weeks ago
Timezone: GMT-5
Joined: 2010-07-18
Posts: 3
Points: 4

Validated

OK i validated and corrected the Doctype. However, the menu is now overlapping because of this change and does not expand the full TD cell. Please see the site http://webpages.charter.net/gigamosis/template3.html. Thanks for the correction pineapple but it appears i still need some help. Mind giving some incite on the shrinking content issue?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

It looks incredibly

It looks incredibly complicated to me, and I don't know a lot about JS, but it might be easier if you recoded it from the start again, and ditched the tables, as they're unnecessary. Things like:

<td class="bordertdcolor">&nbsp;</td>
                  <td width="100%" valign="top" bgcolor="black"><div class="horizontalcssmenu">
                    <ul id="cssmenu1">
                        <li style="border-left: 1px solid #202020;">

Aren't really helping Wink

Verschwindende wrote:
  • CSS doesn't make pies

gigaart
gigaart's picture
Offline
newbie
Last seen: 9 years 17 weeks ago
Timezone: GMT-5
Joined: 2010-07-18
Posts: 3
Points: 4

OK will do

OK thanks for the help pineapple. I will try it from scratch and see what i can do.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Keep us informed, we'll help

Keep us informed, we'll help you along the way Laughing out loud

If you haven't already, I'd look at http://www.htmldog.com/articles/suckerfish/dropdowns/

Verschwindende wrote:
  • CSS doesn't make pies