Hello,
I'm new to the forums but hopefully you guys won't mind helping me out a bit.
I have created a horizontal CSS/DHTML menu as described in this article:
<!-- m --><a class="postlink" href="http://www.seoconsultants.com/css/menus/tutorial/">http://www.seoconsultants.com/css/menus/tutorial/</a><!-- m -->
When I created it in a local directory it worked fine in Firefox and IE (with code fixes). We published it to our webserver for testing and an interesting problem came up. Whenever someone was using IE, the menu would not "activate" when you hovered the cursor over a menu element. It is interesting to note that if you refresh the page, the hover action will work for that particular page but then the problem occurs on the next page you visit. If the page stays cached on your machine, you don't have to worry about this hover problem, but if you clear your cache the problem persists. So in other words, the menu won't work unless you refresh the page.
Here are the links to the menu html and css files for your reference:
<!-- m --><a class="postlink" href="http://www.world-data.net/_borders/newmenu.css">http://www.world-data.net/_borders/newmenu.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.world-data.net/_borders/top.htm">http://www.world-data.net/_borders/top.htm</a><!-- m -->
Is this an IE problem (is there an IE fix for this?) or do we need to fix something with our server settings?
I'd greatly appreciate your help!
-BrillIt worked on FF and IE6 for me without refresh. I did notice that your missing a DOCTYPE and some of your style tags are in the body and should be in the head but thats all I can look at at the moment.I just tried it in IE6 and it still was producing the problem. Maybe visiting the site as a whole will help.
<!-- m --><a class="postlink" href="http://www.world-data.net">http://www.world-data.net</a><!-- m -->
The index page works fine, but then try going to Products>>Servers>>Dell, wait for the page to load and then try the menu. For some reason the hover action isn't registering and thus the menu won't dropdown for the options/links. Thanks for your help though!I'm not sure, it still worked for me in the Dell sectionAdd this to the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And move this into the head section:
<style type="text/css">@import "newmenu.css";</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
Then validate the XHTML (<!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m -->) and the CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator</a><!-- m -->) and then fix the problems that may arise from those.-The CSS file validates.
-The HTML file doesn't validate, but most of the errors were just needing a close tag like this "/>"
-Moving the second snippet of code made the menus not appear, so I'm going to play around with that.A couple of more things I guess I should mention:
-we are using Front Page and it's shared borders component (I wanted to switch to .asp files to using includes, but my boss was concerned with visibility getting hit)
-all <head></head> information located in the shared border is stripped on page load, thus I'm not able to insert the above code into the header section.
This is really starting to frustrate me.so the solution was pasting
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
at the top of every page. I thought the shared border took care of that, but apparently not. Too bad we have 400+ pages. So I'm glad it worked, thanks for your help!alright, so it HELPED, but it didn't solve it. The problem seems to be really intermittent. It doesn't happen on all of the pages, and it intermittently is a problem on the same page. It happens on some pages, but not all pages.OK. I just checked your site in IE and saw no problems with the menu. Having said that, I just looked at the code of this page - <!-- m --><a class="postlink" href="http://www.world-data.net/services_leasing.htm">http://www.world-data.net/services_leasing.htm</a><!-- m --> - and you really have to do what Bathurst Guy said. You have to have a valid DTD at the top of your page and you have to put the style in your head. I'm not surprised you're having problems with your pages coded like that.
You say the problem is that you're using FrontPage. Well, as they say - "don't do that then." FrontPage is a piece of garbage that really shouldn't be used for making websites - shouldn't be used for anything really except maybe erm... erm... no - nothing.
You have a lot of pages to fix - I can see how that would be a problem and I feel sorry for you, but you have work to do.
Have you considered using a php template? (You'd need to learn how to do this - software won't do it for you - unless you use some kind of CMS). Here's a good article on A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/phpcms/">http://www.alistapart.com/articles/phpcms/</a><!-- m -->).What connection speed do you have? Maybe it is just taking some time for your browser to Download the stylesheet. But if it's in the head section it will be loaded before the body starts to load and this may fix your problem. I have a quick connection so it could just be working for me because of that?I am forced to work within FrontPage because that is what my boss insists on using. It is what he has used for years and is comfortable in it. My company also doesn't like spending money on new software. If I had it my way, I'd use something like TextPad exclusively. Our server is on an IIS box, so we use ASP for DB pages. My boss does not what to convert any "non-DB" pages to ASP because he is afraid of losing google visibility with a change in the file extension.
I am going to try to put the menu CSS code in the style tags for each page. Maybe that will solve some things. I was also linking to two style sheets, that may be an issue as well. Any other thoughts would be greatly appreciated, thanks!Yes, as has been mentioned a few times - you need a valid DTD.Well, I combined the two CSS files into one import statement in the header and added the DTD statement. Everything is working correctly. I think the problem stemmed from the menu CSS file not loading fast enough before the page was displayed as the "second import statement". Thanks for all of your help guys.
I'm new to the forums but hopefully you guys won't mind helping me out a bit.
I have created a horizontal CSS/DHTML menu as described in this article:
<!-- m --><a class="postlink" href="http://www.seoconsultants.com/css/menus/tutorial/">http://www.seoconsultants.com/css/menus/tutorial/</a><!-- m -->
When I created it in a local directory it worked fine in Firefox and IE (with code fixes). We published it to our webserver for testing and an interesting problem came up. Whenever someone was using IE, the menu would not "activate" when you hovered the cursor over a menu element. It is interesting to note that if you refresh the page, the hover action will work for that particular page but then the problem occurs on the next page you visit. If the page stays cached on your machine, you don't have to worry about this hover problem, but if you clear your cache the problem persists. So in other words, the menu won't work unless you refresh the page.
Here are the links to the menu html and css files for your reference:
<!-- m --><a class="postlink" href="http://www.world-data.net/_borders/newmenu.css">http://www.world-data.net/_borders/newmenu.css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.world-data.net/_borders/top.htm">http://www.world-data.net/_borders/top.htm</a><!-- m -->
Is this an IE problem (is there an IE fix for this?) or do we need to fix something with our server settings?
I'd greatly appreciate your help!
-BrillIt worked on FF and IE6 for me without refresh. I did notice that your missing a DOCTYPE and some of your style tags are in the body and should be in the head but thats all I can look at at the moment.I just tried it in IE6 and it still was producing the problem. Maybe visiting the site as a whole will help.
<!-- m --><a class="postlink" href="http://www.world-data.net">http://www.world-data.net</a><!-- m -->
The index page works fine, but then try going to Products>>Servers>>Dell, wait for the page to load and then try the menu. For some reason the hover action isn't registering and thus the menu won't dropdown for the options/links. Thanks for your help though!I'm not sure, it still worked for me in the Dell sectionAdd this to the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And move this into the head section:
<style type="text/css">@import "newmenu.css";</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
Then validate the XHTML (<!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m -->) and the CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator</a><!-- m -->) and then fix the problems that may arise from those.-The CSS file validates.
-The HTML file doesn't validate, but most of the errors were just needing a close tag like this "/>"
-Moving the second snippet of code made the menus not appear, so I'm going to play around with that.A couple of more things I guess I should mention:
-we are using Front Page and it's shared borders component (I wanted to switch to .asp files to using includes, but my boss was concerned with visibility getting hit)
-all <head></head> information located in the shared border is stripped on page load, thus I'm not able to insert the above code into the header section.
This is really starting to frustrate me.so the solution was pasting
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
at the top of every page. I thought the shared border took care of that, but apparently not. Too bad we have 400+ pages. So I'm glad it worked, thanks for your help!alright, so it HELPED, but it didn't solve it. The problem seems to be really intermittent. It doesn't happen on all of the pages, and it intermittently is a problem on the same page. It happens on some pages, but not all pages.OK. I just checked your site in IE and saw no problems with the menu. Having said that, I just looked at the code of this page - <!-- m --><a class="postlink" href="http://www.world-data.net/services_leasing.htm">http://www.world-data.net/services_leasing.htm</a><!-- m --> - and you really have to do what Bathurst Guy said. You have to have a valid DTD at the top of your page and you have to put the style in your head. I'm not surprised you're having problems with your pages coded like that.
You say the problem is that you're using FrontPage. Well, as they say - "don't do that then." FrontPage is a piece of garbage that really shouldn't be used for making websites - shouldn't be used for anything really except maybe erm... erm... no - nothing.
You have a lot of pages to fix - I can see how that would be a problem and I feel sorry for you, but you have work to do.
Have you considered using a php template? (You'd need to learn how to do this - software won't do it for you - unless you use some kind of CMS). Here's a good article on A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/phpcms/">http://www.alistapart.com/articles/phpcms/</a><!-- m -->).What connection speed do you have? Maybe it is just taking some time for your browser to Download the stylesheet. But if it's in the head section it will be loaded before the body starts to load and this may fix your problem. I have a quick connection so it could just be working for me because of that?I am forced to work within FrontPage because that is what my boss insists on using. It is what he has used for years and is comfortable in it. My company also doesn't like spending money on new software. If I had it my way, I'd use something like TextPad exclusively. Our server is on an IIS box, so we use ASP for DB pages. My boss does not what to convert any "non-DB" pages to ASP because he is afraid of losing google visibility with a change in the file extension.
I am going to try to put the menu CSS code in the style tags for each page. Maybe that will solve some things. I was also linking to two style sheets, that may be an issue as well. Any other thoughts would be greatly appreciated, thanks!Yes, as has been mentioned a few times - you need a valid DTD.Well, I combined the two CSS files into one import statement in the header and added the DTD statement. Everything is working correctly. I think the problem stemmed from the menu CSS file not loading fast enough before the page was displayed as the "second import statement". Thanks for all of your help guys.