PDA

View Full Version : UL Stretched Out In IE



alexjewell
04-10-2006, 10:37 PM
I got a very awesome script on here from someone in the forums. They were very nice and their script works...which is much more than I can say about the one I wrote before...
It's for a drop down menu, www.flamehtmlstudios.com/amanda/beta
Now, I don't even need the js in Mozilla...
But I do in IE...
And in IE, it stretches out the UL that the links are in.
Now, I don't know why.
I'm curious as to whether or not anyone can look at the following code and give me the reason? Thanks a ton!

JavaScript:


if (document.getElementById)
this.onload = function() {
var className = 'over',
pattern = new RegExp('(^|\\s+)' + className + '(\\s+|$)'),
navigation, elements;

function showSubmenu() {
if (!pattern.test(this.className))
this.className += ' ' + className;
}
function hideSubmenu() {
this.className = String(this.className).replace(pattern, ' ');
}
function hasSubmenu(element) {
var nodes;

if ((nodes = element.childNodes))
for (var i = 0, n = nodes.length; i < n; ++i)
if (nodes[i].tagName == 'UL')
return true;
return false;
}

if ((navigation = document.getElementById('nav'))
&& navigation.getElementsByTagName) {
elements = navigation.getElementsByTagName('li');

for (var i = 0, n = elements.length; i < n; ++i)
if (hasSubmenu(elements[i])) {
elements[i].onmouseover = showSubmenu;
elements[i].onmouseout = hideSubmenu;
}
}
navigation = elements
= null;
};



And here's the CSS (or at least what applies to the ul):


#nav{
clear: both;
background: #cc9999;
height: 25px;
margin-bottom: 2px;}

#nav ul{
padding: 0;
margin: 0;
list-style: none;}

#nav li{
margin: 0;
padding-top: 3px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #fff;
float: left;
background: #ccc;
position: relative;}

#nav li ul{
display: none;
position: absolute;
top: 1em;
left: 0;
z-index: 100;
margin: 10px auto auto auto;}

#nav li ul{
width: 100px;
height: auto;
background: #ccc;}

#nav li ul li{
display: block;
clear: both;
border-width: 0px;
width: 100px;}

#nav li ul li a{
width: 100%;
height: 100%;}

#nav li ul li a:hover{
color: black;}

#nav li ul li:hover{
background: #ddd;}

#nav li ul li.space:hover{
background: #ccc;}

.space{
height: 10px;}

.arrow{
width: 7px;
height: 8px;
background: transparent url(images/arrow.gif) no-repeat;}

li>ul{
top: auto;
left: auto;}

#nav li:hover ul, #nav li.over ul{
display: block;}

#nav a{
height: 25px;
width: auto;}

#nav a:link, #nav a:active, #nav a:visited{
color: #000;}

#nav a:hover{
color: #fff;}



And, finally the html:


<div id="nav">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About Me">About Me</a></li>
<li><a href="#" title="Portfolio" class="over">Portfolio</a>
<ul>
<li class="space"></li>
<li><a href="#" title="Portfolio / Photography">Photography</a></li>
<li><a href="#" title="Portfolio / Graphic Art">Graphic Art</a></li>
<li><a href="#" title="Portfolio / Poetry">Poetry</a></li>
</ul></li>
<li><a href="#" title="Faith" class="over">Faith</a>
<ul>
<li class="space"></li>
<li title="Faith / Scriptures"><a href="#">Sciptures</a></li>
<li title="Faith / Rants"><a href="#">Rants</a></li>
</ul></li>
<li><a href="#" title="Music">Music</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="Links">Links</a></li>
</ul>
</div>

Rohan72
04-11-2006, 01:19 AM
Seems to me it has nothing to do with the menu. I noticed the title above the menu changes place too. So i guess it has something to do with the values of the header or logo div's.