Ok, I have a ul inside of another ul (I'm using suckerfish, if you know what that is), and I need to define the height of the first ul for it to look right, but I want the ul that is within the first one to stretch, depending on the content. However, the second ul is inheriting the height value from the first ul, and the content overflows it. How do I stop the second ul from inheriting the attributes from the first ul? Thanks,
-Danjust overwrite it:
ul li ul{
height:auto;
}Ah, thank you kindly
I had tried that before, but my LI's were set to float: left, so it didn't stretch with the LI's. All fixed now!OK, I thought I'd just expand on this thread, rather than starting a new one because it's realated to the original topic.
As I said earlier, I am using Suckerfish Dropdowns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->), and I have gotten it working smoothly in browsers, but it's real screwed up in IE. Here's an example:
<!-- m --><a class="postlink" href="http://rhea.dr2.net/~dandaman/sf/">http://rhea.dr2.net/~dandaman/sf/</a><!-- m -->
Any ideas how to fix this?
-DanI'm not familar with suckerfish, but I noticed you have a script tag who's src is scripts.js, but that file isn't on your server (at least in the directory the browser is looking)Oops, forgot to upload that! I'll do that right now. Although, it is the exact same in IE without it uploaded
But, for it to work, it needs the script, so I'll put it up right now.
-DanThe problem is here:
navRoot = document.getElementById("nav");
The id its looking for there is the ul's id, not the container div's id.Ah, thank you Sam! That got the menu working! But I'm still in the dark about what is going on with the layout... also, when the dropdown menus come up in IE, the aren't positioned directly below the headers... any ideas? Thanks,
-DanGive it a doctype. I tried XHTML 1.0 Strict, and it worked like a charm in IE & Firefox.OK, thanks! There's still that problem with the positioning of the dropdown menus in IE....
-Danreally? fixed here...
Here's my CSS (I think all I changed was the ul to list-style-type:none and I got rid of the display:inline from the li's):
<style type="text/css">
#nav {
border: 1px solid #999;
border-left: 0;
border-right: 0;
background-color: #ddd;
width: 100%;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 0;
}
#nav ul {
background-color: #eee;
border: 1px solid #999;
list-style-type:none;
width: 580px;
border-top: 0;
height: 1.5em;
line-height: 1.5em;
margin: 0 auto;
padding: 0;
}
#nav ul li {
color: #000;
list-style: none;
font-family: tahoma;
text-align: center;
float: left;
width: 145px;
padding: 0;
margin: 0;
}
#nav ul li a {
color: #000;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
#nav ul li ul {
width: 145px;
margin-left: -1px;
display: none;
}
#nav ul li > ul {
top: auto;
left: auto;
}
#nav ul li:hover ul, #nav ul li.over ul {
position: absolute;
height: auto;
display: block;
background: #eee;
}
#nav ul li:hover ul li, #nav ul li.over ul li {
float: none;
}
#nav ul li:hover ul li:hover, #nav ul li.over ul li.over {
background: #ddd;
}
</style>Weird.... I have the same... except for a few border modifications, which didn't fix it when I removed them.... we're both talking about IE6, right?yeah... is the most recent version uploaded? I'll check it out if so...Yes, recent versions are uploaded (I edited them right in the FTP client)... screenshot in attatchment...Did you change the markup? my css isn't working on it any more and I didn't back up...Originally posted by Sam
Did you change the markup? my css isn't working on it any more and I didn't back up...
All I did was change the name of the #nav div so it wouldn't screw with the #nav ul... but I changed my CSS to work with that, too
nevermind, I figured it out. You have to apply text-align:center to the anchors instead of the li's. Here's my final css
#navcont {
border: 1px solid #999;
border-left: 0;
border-right: 0;
background-color: #ddd;
width: 100%;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 0;
}
#navcont ul {
background-color: #eee;
border: 1px solid #999;
list-style-type:none;
width: 580px;
border-top: 0;
height: 1.5em;
line-height: 1.5em;
margin: 0 auto;
padding: 0;
}
#navcont ul li {
color: #000;
font-family: tahoma;
float: left;
width: 145px;
padding: 0;
margin: 0;
}
#navcont ul li a {
color: #000;
text-decoration: none;
text-align: center;
display: block;
width: 100%;
height: 100%;
}
#navcont ul li ul {
width: 145px;
margin-left: -1px;
display: none;
}
#navcont ul li > ul {
top: auto;
left: auto;
}
#navcont ul li:hover ul, #navcont ul li.over ul {
position: absolute;
height: auto;
display: block;
background: #eee;
}
#navcont ul li:hover ul li, #navcont ul li.over ul li {
float: none;
}
#navcont ul li:hover ul li:hover, #navcont ul li.over ul li.over {
background: #ddd;
}You're my hero!
Thanks!Glad to help, as always. Too bad IE doesn't work... it would make everyone's life easier.Originally posted by Sam
Too bad IE doesn't work... it would make everyone's life easier.
Yeah... at least it's discontinued, so the world will gradually see the light. I wonder if this also means that M$ will start including standards browsers with the next versions of Windows.....Originally posted by Daniel T
Yeah... at least it's discontinued, so the world will gradually see the light. I wonder if this also means that M$ will start including standards browsers with the next versions of Windows.....
I thought it wasn't discontinued, but that the next version won't be out until Windows Longhorn OS is out (like 2005 or 2006?). I can hardly await their next broken browser. My only hope is that MS will start charging money to purchase their browser separately, and then Mozilla will catch on with the masses.Originally posted by TomDenver
I thought it wasn't discontinued
Well, I'm not positive myself, but I've heard several times that there won't be anymore. Personally, if they DO come out with a new one, I hope they DONT fix it. Why? Because it would likely still have several bugs, and then we would have to make it work with the new one, the old one, and browsers.
-Danjust overwrite it:
ul li ul{
height:auto;
}Ah, thank you kindly
I had tried that before, but my LI's were set to float: left, so it didn't stretch with the LI's. All fixed now!OK, I thought I'd just expand on this thread, rather than starting a new one because it's realated to the original topic.As I said earlier, I am using Suckerfish Dropdowns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->), and I have gotten it working smoothly in browsers, but it's real screwed up in IE. Here's an example:
<!-- m --><a class="postlink" href="http://rhea.dr2.net/~dandaman/sf/">http://rhea.dr2.net/~dandaman/sf/</a><!-- m -->
Any ideas how to fix this?
-DanI'm not familar with suckerfish, but I noticed you have a script tag who's src is scripts.js, but that file isn't on your server (at least in the directory the browser is looking)Oops, forgot to upload that! I'll do that right now. Although, it is the exact same in IE without it uploaded
But, for it to work, it needs the script, so I'll put it up right now.-DanThe problem is here:
navRoot = document.getElementById("nav");
The id its looking for there is the ul's id, not the container div's id.Ah, thank you Sam! That got the menu working! But I'm still in the dark about what is going on with the layout... also, when the dropdown menus come up in IE, the aren't positioned directly below the headers... any ideas? Thanks,
-DanGive it a doctype. I tried XHTML 1.0 Strict, and it worked like a charm in IE & Firefox.OK, thanks! There's still that problem with the positioning of the dropdown menus in IE....
-Danreally? fixed here...
Here's my CSS (I think all I changed was the ul to list-style-type:none and I got rid of the display:inline from the li's):
<style type="text/css">
#nav {
border: 1px solid #999;
border-left: 0;
border-right: 0;
background-color: #ddd;
width: 100%;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 0;
}
#nav ul {
background-color: #eee;
border: 1px solid #999;
list-style-type:none;
width: 580px;
border-top: 0;
height: 1.5em;
line-height: 1.5em;
margin: 0 auto;
padding: 0;
}
#nav ul li {
color: #000;
list-style: none;
font-family: tahoma;
text-align: center;
float: left;
width: 145px;
padding: 0;
margin: 0;
}
#nav ul li a {
color: #000;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
#nav ul li ul {
width: 145px;
margin-left: -1px;
display: none;
}
#nav ul li > ul {
top: auto;
left: auto;
}
#nav ul li:hover ul, #nav ul li.over ul {
position: absolute;
height: auto;
display: block;
background: #eee;
}
#nav ul li:hover ul li, #nav ul li.over ul li {
float: none;
}
#nav ul li:hover ul li:hover, #nav ul li.over ul li.over {
background: #ddd;
}
</style>Weird.... I have the same... except for a few border modifications, which didn't fix it when I removed them.... we're both talking about IE6, right?yeah... is the most recent version uploaded? I'll check it out if so...Yes, recent versions are uploaded (I edited them right in the FTP client)... screenshot in attatchment...Did you change the markup? my css isn't working on it any more and I didn't back up...Originally posted by Sam
Did you change the markup? my css isn't working on it any more and I didn't back up...
All I did was change the name of the #nav div so it wouldn't screw with the #nav ul... but I changed my CSS to work with that, too
nevermind, I figured it out. You have to apply text-align:center to the anchors instead of the li's. Here's my final css#navcont {
border: 1px solid #999;
border-left: 0;
border-right: 0;
background-color: #ddd;
width: 100%;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 0;
}
#navcont ul {
background-color: #eee;
border: 1px solid #999;
list-style-type:none;
width: 580px;
border-top: 0;
height: 1.5em;
line-height: 1.5em;
margin: 0 auto;
padding: 0;
}
#navcont ul li {
color: #000;
font-family: tahoma;
float: left;
width: 145px;
padding: 0;
margin: 0;
}
#navcont ul li a {
color: #000;
text-decoration: none;
text-align: center;
display: block;
width: 100%;
height: 100%;
}
#navcont ul li ul {
width: 145px;
margin-left: -1px;
display: none;
}
#navcont ul li > ul {
top: auto;
left: auto;
}
#navcont ul li:hover ul, #navcont ul li.over ul {
position: absolute;
height: auto;
display: block;
background: #eee;
}
#navcont ul li:hover ul li, #navcont ul li.over ul li {
float: none;
}
#navcont ul li:hover ul li:hover, #navcont ul li.over ul li.over {
background: #ddd;
}You're my hero!
Thanks!Glad to help, as always. Too bad IE doesn't work... it would make everyone's life easier.Originally posted by Sam Too bad IE doesn't work... it would make everyone's life easier.
Yeah... at least it's discontinued, so the world will gradually see the light. I wonder if this also means that M$ will start including standards browsers with the next versions of Windows.....Originally posted by Daniel T
Yeah... at least it's discontinued, so the world will gradually see the light. I wonder if this also means that M$ will start including standards browsers with the next versions of Windows.....
I thought it wasn't discontinued, but that the next version won't be out until Windows Longhorn OS is out (like 2005 or 2006?). I can hardly await their next broken browser. My only hope is that MS will start charging money to purchase their browser separately, and then Mozilla will catch on with the masses.Originally posted by TomDenver
I thought it wasn't discontinued
Well, I'm not positive myself, but I've heard several times that there won't be anymore. Personally, if they DO come out with a new one, I hope they DONT fix it. Why? Because it would likely still have several bugs, and then we would have to make it work with the new one, the old one, and browsers.