<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/index.html">http://dreaming.uni.cc/dev/3.DiD/index.html</a><!-- m -->
stylesheets:
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/styles/index.css">http://dreaming.uni.cc/dev/3.DiD/styles/index.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/styles/ie.cssIt">http://dreaming.uni.cc/dev/3.DiD/styles/ie.cssIt</a><!-- m --> seems that when I decrease the width of the viewport in IE the <div> #main and everything inside it (besides #top) shrink shrink in width.
I'm so confused...
Also: You can see that I have a dropdown menu implamented using CSS and double-lists (<ul> inside another <ul> and making the second <ul> appear by using :hover on the <li> inside the containing <ul>). I couldn't get this to work in IE using the suckerfish solution. Does anyone know of any other solution?
In advance: Thanks.The xxxxing solution:
src='http://www.webdeveloper.com/forum/archive/index.php/logo_ie.png', sizingMethod='scale',enabled="true"What the...? On FreeNode and EFnet everyone was stumpted (either that or nobody cared)! You fixed it on one try. Good show! =D ThanksPure deduction, mister Watson!
Next problem: Check the same url and see how I removed the bottom-border from #topnav. The <li> is missing the bottom border that is set for #topnav li:hover ul in index.css (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/styles/index.css">http://dreaming.uni.cc/dev/3.DiD/styles/index.css</a><!-- m -->) (again: IE problem only).As for the suckerfish solution, you have forgotten to include the JavaScript file!Yeah but I removed suckerfish cause it refused to work. I'll include it just to humor you tho (just let me find it first and upload it).
Status: [Done]
It's uploaded. Check it out (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/">http://dreaming.uni.cc/dev/3.DiD/</a><!-- m -->)IE doesn't understand #topnav li:hover ul so ignores it.
The menu list displays correctly in IE, all things considered.So I wrote border-bottom:1px solid black; in #topnav li. Shouldn't it work in IE then (or...)? Also how do I get the bottom <ul> to position it self just under the first <ul> (to be horizontaly symmetrical I think (Sorry -- I'm not that good in English))?Display sub-menu in IE, add this to index.html:
IEhover = function() {
var sm = document.getElementById('topnav').getElementsByTagName('li');
for (var i=0; i<sm.length; i++) {
if(sm.childNodes.length>2) { // do top level only
sm.onmouseover=function() {
this.childNodes[2].style.display='block';
}
sm.onmouseout=function() {
this.childNodes[2].style.display='none';
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", IEHover);
and in ie.css delete behavior and add:
#topnav ul ul {
padding-top:4px;
position: absolute;
top: 1em;
left:0;
}Would this solution be much better than my own? It looks ok but i want all the scripts to be outside of the HTML (don't want to bother mozilla or mozilla users with any extra lines)?
Well it's worth a try. How do you add that script to index.html or add it externaly? I must admit I don't use scripts often.<!--[if IE]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ie.css">
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"ie_menu_hover.js"></script>
<![endif]-->http://dreaming.uni.cc/dev/4.DiD/Seem to be having more problems now. I can't get the script to run. I get this "IEHover is undefined" error in IE's script error message.Ok change the line back to:
<!--[if IE]><link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ie.css"><![endif]-->
Add the behevior in ie.css
body {
font-family: Arial, Helvetica, sans-serif;
behavior: url(csshover.htc);
}
Create the file csshover.htc
<PUBLIC:ATTACH EVENT="onload" ONEVENT="IEhover" />
<script type="text/javascript">
<!--
function IEhover() {
var sm = document.getElementById('topnav').getElementsByTagName('li');
for (var i=0; i<sm.length; i++) {
if(sm.childNodes.length>2) { // do top level only
sm.onmouseover=function() {
this.childNodes[2].style.display='block';
}
sm.onmouseout=function() {
this.childNodes[2].style.display='none';
}
}
}
}
//-->
</script>Doesn't work I'm afraid =( Hope I haven't done anything wrong to slow down the processBack to conditional statement.
I haven't included index.cssDoesn't seem to work. This one (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/">http://dreaming.uni.cc/dev/4.DiD/</a><!-- m -->) is exactly like yours (with the exceptios of my re-routing of the .js (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/scripts/csshover.js">http://dreaming.uni.cc/dev/4.DiD/scripts/csshover.js</a><!-- m -->) file).
Both the Default (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/styles/index.css">http://dreaming.uni.cc/dev/4.DiD/styles/index.css</a><!-- m -->) and the Internet Explorer (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/styles/ie.css">http://dreaming.uni.cc/dev/4.DiD/styles/ie.css</a><!-- m -->) look correct (to my eyes atleast).
But I already had it working with the first script I tried. Dun even know why I tried your script... "guess you knew best" I thought (not to say that I'm unappreciative of your help, I really am thankfull for your help).
This one (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/">http://dreaming.uni.cc/dev/3.DiD/</a><!-- m -->) works fine tho (dispite the bottom-border on the top <li>s that won't work).
urls {
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/">http://dreaming.uni.cc/dev/3.DiD/</a><!-- m -->
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/">http://dreaming.uni.cc/dev/4.DiD/</a><!-- m -->
}
stylesheets:
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/styles/index.css">http://dreaming.uni.cc/dev/3.DiD/styles/index.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/styles/ie.cssIt">http://dreaming.uni.cc/dev/3.DiD/styles/ie.cssIt</a><!-- m --> seems that when I decrease the width of the viewport in IE the <div> #main and everything inside it (besides #top) shrink shrink in width.
I'm so confused...
Also: You can see that I have a dropdown menu implamented using CSS and double-lists (<ul> inside another <ul> and making the second <ul> appear by using :hover on the <li> inside the containing <ul>). I couldn't get this to work in IE using the suckerfish solution. Does anyone know of any other solution?
In advance: Thanks.The xxxxing solution:
src='http://www.webdeveloper.com/forum/archive/index.php/logo_ie.png', sizingMethod='scale',enabled="true"What the...? On FreeNode and EFnet everyone was stumpted (either that or nobody cared)! You fixed it on one try. Good show! =D ThanksPure deduction, mister Watson!
Next problem: Check the same url and see how I removed the bottom-border from #topnav. The <li> is missing the bottom border that is set for #topnav li:hover ul in index.css (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/styles/index.css">http://dreaming.uni.cc/dev/3.DiD/styles/index.css</a><!-- m -->) (again: IE problem only).As for the suckerfish solution, you have forgotten to include the JavaScript file!Yeah but I removed suckerfish cause it refused to work. I'll include it just to humor you tho (just let me find it first and upload it).Status: [Done]
It's uploaded. Check it out (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/">http://dreaming.uni.cc/dev/3.DiD/</a><!-- m -->)IE doesn't understand #topnav li:hover ul so ignores it.
The menu list displays correctly in IE, all things considered.So I wrote border-bottom:1px solid black; in #topnav li. Shouldn't it work in IE then (or...)? Also how do I get the bottom <ul> to position it self just under the first <ul> (to be horizontaly symmetrical I think (Sorry -- I'm not that good in English))?Display sub-menu in IE, add this to index.html:
IEhover = function() {
var sm = document.getElementById('topnav').getElementsByTagName('li');
for (var i=0; i<sm.length; i++) {
if(sm.childNodes.length>2) { // do top level only
sm.onmouseover=function() {
this.childNodes[2].style.display='block';
}
sm.onmouseout=function() {
this.childNodes[2].style.display='none';
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", IEHover);
and in ie.css delete behavior and add:
#topnav ul ul {
padding-top:4px;
position: absolute;
top: 1em;
left:0;
}Would this solution be much better than my own? It looks ok but i want all the scripts to be outside of the HTML (don't want to bother mozilla or mozilla users with any extra lines)?
Well it's worth a try. How do you add that script to index.html or add it externaly? I must admit I don't use scripts often.<!--[if IE]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ie.css">
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"ie_menu_hover.js"></script>
<![endif]-->http://dreaming.uni.cc/dev/4.DiD/Seem to be having more problems now. I can't get the script to run. I get this "IEHover is undefined" error in IE's script error message.Ok change the line back to:
<!--[if IE]><link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ie.css"><![endif]-->
Add the behevior in ie.css
body {
font-family: Arial, Helvetica, sans-serif;
behavior: url(csshover.htc);
}
Create the file csshover.htc
<PUBLIC:ATTACH EVENT="onload" ONEVENT="IEhover" />
<script type="text/javascript">
<!--
function IEhover() {
var sm = document.getElementById('topnav').getElementsByTagName('li');
for (var i=0; i<sm.length; i++) {
if(sm.childNodes.length>2) { // do top level only
sm.onmouseover=function() {
this.childNodes[2].style.display='block';
}
sm.onmouseout=function() {
this.childNodes[2].style.display='none';
}
}
}
}
//-->
</script>Doesn't work I'm afraid =( Hope I haven't done anything wrong to slow down the processBack to conditional statement.
I haven't included index.cssDoesn't seem to work. This one (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/">http://dreaming.uni.cc/dev/4.DiD/</a><!-- m -->) is exactly like yours (with the exceptios of my re-routing of the .js (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/scripts/csshover.js">http://dreaming.uni.cc/dev/4.DiD/scripts/csshover.js</a><!-- m -->) file).
Both the Default (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/styles/index.css">http://dreaming.uni.cc/dev/4.DiD/styles/index.css</a><!-- m -->) and the Internet Explorer (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/styles/ie.css">http://dreaming.uni.cc/dev/4.DiD/styles/ie.css</a><!-- m -->) look correct (to my eyes atleast).
But I already had it working with the first script I tried. Dun even know why I tried your script... "guess you knew best" I thought (not to say that I'm unappreciative of your help, I really am thankfull for your help).
This one (<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/">http://dreaming.uni.cc/dev/3.DiD/</a><!-- m -->) works fine tho (dispite the bottom-border on the top <li>s that won't work).
urls {
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/3.DiD/">http://dreaming.uni.cc/dev/3.DiD/</a><!-- m -->
<!-- m --><a class="postlink" href="http://dreaming.uni.cc/dev/4.DiD/">http://dreaming.uni.cc/dev/4.DiD/</a><!-- m -->
}