homepage Welcome to WebmasterWorld Guest from 54.205.168.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Anchor Width not inheriting LI width
Problem when mouse over and background color
Alternative Future




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

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

 

D_Blackwell




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

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.

D_Blackwell




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

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;
}

Alternative Future




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

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

swa66




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

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)

Alternative Future




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

Thanks swa66

Some other useful tips there...

Again much appreciated :)

-gs

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved