WebProWorld Part of WebProNews.com
Page One Link To Us Edit Profile Private Messages Archives FAQ RSS Feeds  
 

Go Back   WebProWorld > Site Design > Graphics & Design Discussion Forum
Subscribe to the Newsletter FREE!


Register FAQ Members List Calendar Arcade Chatbox Mark Forums Read

Graphics & Design Discussion Forum Post your graphics design questions/comments/ideas in here. Ask questions, post tutorials, discuss trends and best practices. Sub-forum for website accessibility and usability.

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 11-24-2005, 12:06 PM
WebProWorld New Member
 

Join Date: Dec 2003
Location: US
Posts: 24
candlese RepRank 0
Default CSS HOVER-IE

Hello I am tryig to get a menu done using css. Below is the code. I can see it on Firefox- but not IE. Seems weird to me. Could someone check and see what I have in the code that should not be there or what I am missing.

<script type="text/javascript"><![CDATA[//><!--
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&raquo;
(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>

<STYLE TYPE="text/css">
<!--
body {
font-family:arial,verdana,tahoma,helvetica;
font-size:12px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;

}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.50em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
float : left;
left:-111em;
margin-left : 11.05em;
margin-top : -1.35em;
display:none
}


#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : #FFFFCC;
font-weight : bold;
text-decoration : none;
background-color : #7799CC;
border : 1px solid maroon;
padding : 0 0.5em;
}

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


#nav li a:hover {
color : #FFFFCC;
background-color : maroon;
}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto;
}

#content {
margin-left : 12em;
}
# nav ul, li, li a {box-sizing:content-box; vertical-align:bottom;}


H1 { text-align: center; text-decoration: none;}

H2 { text-align: left; color:#4682B4; font-size:large; text-decoration: none;}
H3 { text-align: justified; color:#maroon; font-size:large; text-decoration: none;}
H6 { text-align: center; color:#FFFFCC; font-size:small; text-decoration: none;}

CDATA {font-family: sans-serif, verdana ; font-size:large;}
CDATA {font: 110% sans-serif;}
--></STYLE>

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 90%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.2em/0.4em arial, verdana, sans-serif;
}
</style>
<![endif]-->
</HEAD>

I would very much appreciate any help. Thank you
Reply With Quote
  #2 (permalink)  
Old 11-29-2005, 08:34 PM
WebProWorld New Member
 

Join Date: Dec 2003
Location: US
Posts: 24
candlese RepRank 0
Default PLEASE HELP ME- GOING CRAZY!!!

OK I have changed it a bit and taken out some code that should not have been there but I am still having trouble with IE. I can see everything with others just not with ie.

<STYLE TYPE="text/css">
<!--

body {
font-family:arial,verdana,tahoma,helvetica;
font-size:14px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
display:block;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
float : left;
left:-111em;
margin-left : 11.05em;
margin-top : -1.35em;
display:block;
}
nav li:hover ul ul,nav li.over ul ul { display:none; } nav li:hover ul, nav li li:hover ul, nav li.over ul,nav li li.over ul { display: block; }

#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : #FFFFCC;
font-weight : bold;
text-decoration : none;
background-color : #7799CC;
border : 1px solid maroon;
padding : 0 0.5em;
}
#nav li a name{
width: 11em;
w\idth : 10em;
display : block;
color : #FFFFCC;
font-weight : bold;
text-decoration : none;
background-color : #7799CC;
border : 1px solid maroon;
padding : 0 0.5em;
}



#nav li a:hover {
color : #FFFFCC;
background-color : maroon;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : 12em;
}

<!--[if gte IE 5]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
ul.makeMenu li { /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */



H1 { text-align: center; text-decoration: none;}

H2 { text-align: left; color:#4682B4; font-size:x-large; text-decoration: none;}
H3 { text-align: left; color:#660000; text-decoration: none;}
H6 { text-align: center; color:#FFFFCC; font-size:small; text-decoration: none;}

CDATA {font-family: sans-serif, verdana ; font-size:large;}
CDATA {font: 110% sans-serif;}
--></STYLE>



<script type="text/javascript"><![CDATA[//><!--
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;

//--><!]]></script>


</HEAD>
In bold I know I have several submenu hovers but which one do I use - and if I use more than one which one takes precedence ??
If someone out there who has used css can help me- I would be ever so grateful!
I am also trying to figure out the IEmen file. I have my script there but what else ? The fix above comes from the web- sure some of you will recognize it.

thank you for any help
Reply With Quote
  #3 (permalink)  
Old 11-30-2005, 01:36 AM
dharrison's Avatar
Moderator
WebProWorld Moderator
 

Join Date: May 2005
Location: Essex, UK
Posts: 1,424
dharrison RepRank 3dharrison RepRank 3
Default

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

Altho looking at original, you already have that.

Shooting fish but it probably doesn't like

Quote:
#nav li a name{
These should be separated with a comma. I have had trouble with making[*] into hyperlinks before. I just found another way around it.

HTH
__________________
Deb Harrison
DVH Design
Essex Web Design | Web Design Blog
Reply With Quote
  #4 (permalink)  
Old 12-10-2005, 09:17 AM
WebProWorld New Member
 

Join Date: Dec 2003
Location: US
Posts: 24
candlese RepRank 0
Default DHarrison

Just wanted to say thank you for trying to help. I did figure it out using (li) as submenu and it works great, but I thought I was going to loose my mind. I guess its so new-using css for menu's with a sub menu that no one else could offer any help. Shame as I thought more people were up on these things. Just goes to show you. Thank you again for taking the time to help.
Reply With Quote
Reply

  WebProWorld > Site Design > Graphics & Design Discussion Forum
Tags: ,



Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Search Engine Optimization by vBSEO 3.2.0