 Need Help Wite Viewing Site In Ie, Navigation fails to work in internet exploder |
|
|
|
|
  |
 Jun 26 2006, 07:27 AM
Post
#1
|
|
|
Premium Member  Group: Members Posts: 178 Joined: 26-June 05 Member No.: 8,699  |
Well guys most of the time I like to at least try to figure stuff out my self however I have been fighting with this navigation problem for a long time and its really starting to bug me. The problem is that I got it working fine... or so I thought because I was using firefox however when I tested it in IE it failed to work at all. Maybe you guys could be some help.
Place where I originally got the Navigation: http://www.alistapart.com/articles/horizdropdowns/ However Im using the Javascript found here: http://www.nickrigby.com/article/11/drop-d...ntal-style-pt-2 Now here is the problem In IE if I dont link to the Javascript you can see it but it dosnt go out to the side like in firefox however if you DO use the javascript link you cant see it at all. Any way Im tottaly stumped Any help would be awesome. With Out Link to the javascript menu: http://www.teamtake.trap17.com/nav.htm With Link: http://www.teamtake.trap17.com/nav1.htm CSS style sheet im linking to: CODE .navigation { background-color: #0000FF; } <style> /* Fix IE. Hide from IE Mac */ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; top: 0; display: none; } ul li a { display: block; text-decoration: none; link color:#FFFFFF; vlink color:#F2D00D; color: #FFFFFF; FONT-SIZE: 25px; background: #000099; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } li:hover ul, li.over ul { display: block; } .style7 {font-size: 24px} .style8 {font-size: 20px} .style9 {font-size: 22px} li:hover ul ul, li.over ul ul { display:none; } li:hover ul, li li:hover ul, li.over ul, li li.over ul { display: block; } /* The magic * </style> Any help regarding why this is not working in IE would be awesome. Thanks in advance. This post has been edited by zach101: Jun 26 2006, 07:30 AM |
 |
 
|
|
Jun 26 2006, 01:17 PM
Post
#2
|
|
|
Privileged Member Group: Members Posts: 630 Joined: 12-August 05 From: Melbourne, Australia Member No.: 10,624 |
Hmm... it looks like the javascript file referred to in nav1.htm...
CODE <script type="text/javascript" src="drop_down.js"> doesn't exist! Could this be the problem? Also, did you include this piece of Javascript to make it work in IE like it says at http://www.alistapart.com/articles/horizdropdowns/ ? I can't see it anywhere. CODE OK, OK, so that darn IE/Win has to ruin everything and not do as it’s told. IE/Win only allows the :hover pseudo-class to be applied to a link — so the li:hover that makes the sub-menus appear means nothing to IE.
A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.): startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace» (" over", ""); } } } } } window.onload=startList; |
|
|
|
|
Jun 26 2006, 10:17 PM
Post
#3
|
|
|
Premium Member Group: Members Posts: 178 Joined: 26-June 05 Member No.: 8,699 |
Okay Updates I got the navigation to work in all browsers However the sub menus seem to be centered and dont drop direcetly down from the main menu there hovered from. Seems complicated but when you look at it you will see what I mean because its very ugly and I cant seem to make it just drop straight down from the link there hovered over here is the page:
http://www.teamtake.trap17.com/main.htm I included all the css right there on the main page so its ez to view. And I got all the information and everything just from the a list apart horizontal drop downs PART ONE so dont go looking at part two and three because that will just confuse and complicate the issue because it SHOULD just work fine with what css is listed on part one. Part two and three are for multple drop down tiers. Source: http://www.alistapart.com/articles/horizdropdowns This post has been edited by zach101: Jun 26 2006, 10:19 PM |
|
|
|
|
Jun 26 2006, 10:35 PM
Post
#4
|
|
|
Premium Member Group: Members Posts: 178 Joined: 26-June 05 Member No.: 8,699 |
Okay nevermind I got it working lol I forgot this:
CODE ul li { position: relative; } Now my next question is wheter or not this is the area in which I style the menu and make it look nice: CODE ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } It is isnt ? If so I was wondering about a few things First I found out adding Font-Size 25px; will enlarge it and stuff but how can I make the links appear differnt when there visited vs non? Because its a drop down type of thing it is kinda being difficult and the other thing I was wondering is if you click on say Domain names under the services option do just domain names look visted or services to? But then again on a menu Like this should I even have a visited link color? Lastly How do I get the red hover effect he had on his last menu when your cursor goes over a link. |
|
|
|
|
Jun 27 2006, 01:39 AM
Post
#5
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing.  Group: [MODERATOR] Posts: 4,300 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787  myCENT:46.50 |
Try adding this to your css file:
CODE ul li a:visited { color: 000#; background: #f0f; } ul li a:hover { color: 000#; background: #f00; } Place these definitions after the [ ul li a ]. The order is important. Links, then visited, then hover and active rules in that order or they don't behave properly. LVHA. |
|
|
|
|
Jun 27 2006, 03:12 AM
Post
#6
|
|
|
Premium Member Group: Members Posts: 178 Joined: 26-June 05 Member No.: 8,699 |
Ya that works but its not what I meant because on his when you hover over it just the text highlights red not the entire cell. Making it look alot cleaner and less bulky
nvm im an idiot I just needed to take off the bg color This post has been edited by zach101: Jun 27 2006, 04:41 AM |
|
|
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 22nd November 2008 - 05:46 PM |