Welcome to WebmasterWorld Guest from 54.145.144.101

Forum Moderators: not2easy

Message Too Old, No Replies

Anchor Width not inheriting LI width

Problem when mouse over and background color

   
2:17 pm on Oct 20, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Greetings to the forum

I am having another one of these nightmares with the display block element i think. Anyway without further a do here is the code:
style.css


body{
margin:0;
padding:0
}
#jsddm {
margin: 0;
padding:0 0 0 0;
background: #4775D1;
width:100%
}
#jsddm li {
list-style: none;
font: 14px Arial;
position:relative;
padding: 5px 2px 5px 2px;
}
#jsddm li a {
display: block;
padding: 2px 10px;
border: 1px solid #fff;
text-decoration: none;
color: white;
white-space: nowrap
}
#jsddm li a:hover {
background: #49A3FF
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EAEFFA;
color: #000
}
#jsddm li ul li {
display:block;
margin: 0;
padding: 0;
}
#jsddm li ul li a {
display:block;
padding: 5px;
border:0;
color: #000;
}
#jsddm li ul li a:hover {
background-color: #49A3FF;
color: #fff;
}
#jsddm li:hover ul, #jsddm li.sfhover ul {
visibility:visible;
}

ltr.css


#jsddm {
float:left;
}
#jsddm li {
float: left;
}
#jsddm li ul {
left:1px;
}
#jsddm li ul li {
float: left;
text-align:left;
clear: both;
}

index.html

<html>
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="ltr.css" rel="stylesheet" type="text/css">
<!--link href="rtl.css" rel="stylesheet" type="text/css"-->
<script language="javascript1.2" src="jscript.js"></script>
</head>
<body>
<ul id="jsddm">
<li title="mainmenu"><a href="#">Navigate</a>
<ul>
<li title="submenu"><a href="#">Go Home</a></li>
<li title="submenu"><a href="#">Go To Installation</a></li>
</ul>
</li>
<li title="mainmenu"><a href="#">WCC</a>
<ul>
<li title="submenu"><a href="#">Request WCC Standard</a></li>
<li title="submenu"><a href="#">Request WCC All Fields</a></li>
<li title="submenu"><a href="#">Request WCC Implementable</a></li>
</ul>
</li>
<li title="mainmenu"><a href="#">SCC</a>
<ul>
<li title="submenu"><a href="#">Request SCC 1</a></li>
<li title="submenu"><a href="#">Request SCC 2</a></li>
</ul>
</li>
<li title="mainmenu"><a href="#">TICC</a>
<ul>
<li title="submenu"><a href="#">Request TICC</a></li>
</ul>
</li>
<li title="mainmenu"><a href="#">Workpack</a>
<ul>
<li title="submenu"><a href="#">Request Workpack</a></li>
</ul>
</li>
</ul>
</body></html>

jscript.js


sfHover = function() {
var sfEls = document.getElementById("jsddm").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
if(sfEls[i].title=="mainmenu")sfEls[i].onmouseover=function() {
this.className+=" sfhover";
this.childNodes[0].style.backgroundColor="#49A3FF";
}
if(sfEls[i].title=="mainmenu")sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
this.childNodes[0].style.backgroundColor="#4775D1";
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

I have it working for arabic using my ltr.css which basically just replaces the left alignment with right alignment etc.

Any help with getting the anchor tag background color on hover to expand to the complete width of the LI will be of great help :)

TIA

-Gs

6:50 pm on Oct 20, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A quick look and I can help with part of the problem. Time does not allow to fix for IE. I'll come back to it and take another look if still open question.

1)

...display block element i think...

ul {
display: block; color: #000;
}

ul is the selector.

display: block; is a declaration within the declaration block.

display is the property.

block is the value.
........................................

2) The problem is that the <li> of the inner <ul> is not extending the full width of the <ul>. In the sub-menus where the text is of equal width, you cannot see the problem. It only shows itself with <li> of unequal length.

3) Adding {width: 100%;} fixes the problem in Firefox and Opera, but not IE (at least not IE7).

#jsddm li ul li {
display: block;
width: 100%;
margin: 0;
padding: 0;
}

4) A fix for IE is still needed. Can't say yet whether a slight edit will fix for all, or if conditional comment for IE is needed.

7:12 pm on Oct 20, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



BTW - The first obvious fix is to set width on the inner <ul> and <li>. 100% won't work; use em.

Declaring a width long enough to contain the longest <li> will work in FF, Opera, and IE7,8.

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
width: 15em;
border: 1px solid #000;
background-color: #eaeffa;
color: #000
}

#jsddm li ul li {
display: block;
width: 15em;
margin: 0;
padding: 0;
}

If the width is unsightly for inner <ul> with shorter <li> lengths, two options spring to mind.

~ ~ ~ 1) Create additional classes and call a specific width for each inner <ul> and <li>.

~ ~ ~ 2) Less effort, but possibly less attractive would be {text-align: center;} on the <a>.

#jsddm li ul li a {
display: block;
padding: 5px;
border: 0;
color: #000;
text-align: center;
}

8:17 am on Oct 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi D_Blackwell

Thanks for the detailed explanation :) I have went along and used the second option you gave this should help for the short term - then i'll have another look at it as the ideal solution would be to have the widths of the inner list items only extend to the width of the text within.

Thanks again for your help it is really appreciated :)

-gs

8:45 am on Oct 21, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Just a few remarks:

You're using the descendant selector (E F) , not the child selector (E>F)
So what you apply in "#jsddm li" propagates also to your second level menu, unless you reset it there in the more specific rule. It's not obvious from the code you know this (repeating settings in the more specific rule).

Since you need scripting to solve the lack of :hover support in IE6 anyway, why not go for IE7.js and get support for child selectors and use them.

"visibility: hidden;" and switching it to visible on :hover in Opera never worked for me in the past ... (might be an Opera on mac thing, don't know)

9:47 am on Oct 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks swa66

Some other useful tips there...

Again much appreciated :)

-gs

 

Featured Threads

Hot Threads This Week

Hot Threads This Month