I'm working on creating a drop down based off vladdy's (http://www.vladdy.net/Demos/CSSNav.html), but I can't get the 4th level to appear. CSS and XHTML are valid (except for the behavior thing) so I figure its just a stupid mistake. any ideas?
(I realize this doesn't work in IE yet, and that I should use em/ex instead of px, which I will start doing once I get the basic functions down.)
Thanks in advanced.
Jona
03-04-2004, 10:05 PM
Do you have this online anywhere?
[J]ona
Sam
03-05-2004, 12:01 AM
oops, forgot... that would help...
here it is (http://www.medford.k12.or.us/default3.asp)
Vladdy
03-05-2004, 07:24 AM
Have not gotten to the problem yet, but there are few things in the code that can use improvement (and make "bug chasing" easier).
1. The IE hover fix that I did has some limitations when it comes to nesting. Make sure that you can make the 3 level menu work in IE before proceeding further.
2. Instead of styling all your <li> items as class="levN", apply the class to the parent <ul> and then change the selector definition to:
ul.levN li
3. Those logo images are part of presentation, not content - put them in the background of <a> element:
<a href="..." style="background-image: url()">
Vladdy
03-05-2004, 08:00 AM
Just threw some extra code in my demo (http://www.vladdy.net/Demos/CSSNav.html) to show that multiple nesting levels are achievable.
Good luck.
Sam
03-05-2004, 11:41 AM
thanks for the advice, I'll do that first thing today
tonyh
03-10-2004, 12:07 AM
Originally posted by Vladdy
Just threw some extra code in my demo (http://www.vladdy.net/Demos/CSSNav.html) to show that multiple nesting levels are achievable.
Good luck.
I just made some minor modifcations to Vladdy's menu to create one more to my liking. Basically all I've done is change it's style:
New Demo Site (http://people.uleth.ca/~tony.hughes/CssNav/VladdyCSSNav.html) New Demo External CSS (http://people.uleth.ca/~tony.hughes/CssNav/nav.css) (Updated)
But Vladdy, I don't fully understand how this is implemented, so could you explain a fix to why I can't mouse over to the next submenu in my demo? I know it's because the cursor is moving off the link, but other than padding the links with spaces, is there another way?
It was my understanding that IE only allows .hover to be applied to anchors <a>, how did you get them to apply to lists <li>? Theortically, could we just adjust the .htc for any tag?
Vladdy
03-10-2004, 07:46 AM
You are right in your analisys that you can not move the mouse over the child lists because they are disconnected from the parent element.
When you set element position to absolute it is removed from the normal flow. When top/left/bottom/right properties are not specifed the absolutely positioned element is placed relative to it's parent. Gecko places it right under the parent element (as it would be with the position:static and display: block), and IE screwes it up and places the absolutely positioned element to the right of it's parent.
In my demo the desired position of the popping list relative to it parent is set using margins (which can be both positive and negative). I use the child selector hack to set separate margins for Gecko and IE:
Again, to avoid your problem you need to set margins so that elements overlap. When you set your top margin to 10em it pushes the pop-up ul element far down and you have to leave the parent li element you are hovering over to reach it:
#nav li>ul.sub1,
#nav li>ul.sub2,
#nav li>ul.sub3 {
margin: 10em 10px 10px 10em;
}
I'm not sure why you want to push the child lists so far down, as it seems to be confusing to navigate, but if you have to do that, use the top padding.
One more thing about your html: the <xml> declaration on top will throw IE in quirks mode. I suggest you remove it. The doctype I have in my demo is legal and will validate without causeing problems.
Finally the way htc works is explained here: www.vladdy.net/Demos/IEPseudoClassesFix.html
Good luck.
tonyh
03-10-2004, 01:06 PM
Originally posted by Vladdy
Again, to avoid your problem you need to set margins so that elements overlap. When you set your top margin to 10em it pushes the pop-up ul element far down and you have to leave the parent li element you are hovering over to reach it:
#nav li>ul.sub1,
#nav li>ul.sub2,
#nav li>ul.sub3 {
margin: 10em 10px 10px 10em;
}
I'm not sure why you want to push the child lists so far down, as it seems to be confusing to navigate, but if you have to do that, use the top padding.
Thanx for the tips, after relooking at your code I finally realized how the margins could be used. It's not that I want the child list to be so far down, I just want the first element of the child to line up vertically with it's parent. I adjusted the CSS and updated the links above. I've added borders so that you can see what I mean. I couldn't solve the problem regarding the arrow, so I placed it in front of the link rather than after, thus the parent and child can still overlap.
I added an a:hover to the CSS so that the user can see which link there on in the menus. I tried to add a text color to the li:hover but it wouldn't work, but background does? I'm concerned that the a:hover won't work in older browsers, as it wasn't implemented by NS until recently. But hopefully this text colorization with the arrow pointer will make the menu easier to navigate. Can you take a second look and let me know if it's better?
The other potential problem I see is that this demo uses the same character length for each link. I am curious as to where the child submenu would align itself horizontally, to it's parent or the link with the greatest character length? (ex/ 'First Name' vs 'Last Name') I would prefer that the submenu appear horizontally at the same location regardless of link length, thus the reasoning behind placing the submenu after the arrow. But again, other than padding each link with spaces so each link maintains the same characte length, I'm not sure how to do this? Plus if I did add spaces, if CSS is ignored the links would look odd as white space would be underlined as well.
Vladdy
03-10-2004, 02:58 PM
Arrow is a background image just to indicate the items that have sub menus. It does not affect the size of the elements.
The li color would be overridden by a color so style a:hover if you want to have different color on hover.
sub-menu ul are children of li so the width of a text will not affect the placement.
tonyh
03-10-2004, 05:27 PM
Originally posted by Vladdy
One more thing about your html: the <xml> declaration on top will throw IE in quirks mode.Do you mean this:<?xml version="1.0" encoding="utf-8"?>
I removed it from my "Problems Centering a Div" (http://forums.webdeveloper.com/showthread.php?s=&threadid=29750) thread XHTML example, and it wouldn't center in IE, with it the example works fine. It's the HTML example that I can't resolve.... Are you sure about the declaration?
Originally posted by Vladdy
Arrow is a background image just to indicate the items that have sub menus. It does not affect the size of the elements.I understand this, as I couldn't move the cursor over the image to reach he child. And of course has to set a left margin so the text wouldn't write over the image ;) .
The li color would be overridden by a color so style a:hover if you want to have different color on hover. So I did this correctly then? Is it possible to have a:hover amongst the #nav, or do I have to create a new class if I wanted different anchor effects from the menu? (For example, blue hover to match the blue arrow and say red for the main content.)
sub-menu ul are children of li so the width of a text will not affect the placement.
This was going to be my next question, as I really couldn't tell which was the parent and children. I actually thought the <a> was the child of <li>. As of right now we are controlling the widths of the menu and submenus by margin, rather than width, mind you I don't know if applying 'width' to <ul> would do anything. It's my understanding we're doing this because of 'position: absolute.' However, these margins aren't actually affecting the widths at all in relation to 'overlapping.' It seems that the <a> must overlap and not <ul>, or else my original code would have worked. I'll continue to play with the margins to see if I can get my original implementation to work and update the links again if I can.
Edit - Update: I couldn't do it. No matter what I used for padding or margins I couldn't get the submenus to appear next to the parent menu. The submenu would always appear in relation to the last character of the anchor. It has nothing to do with the <li> or <ul>, unless you can prove otherwise.
However, I have updated the CSS with actual working functionality of my original implementation. I had to apply a 'width' to the anchor style, in this case the nav, sub and <a> are all set to the same width: 10em. I then played with the padding and margins so that everything looks the way I wanted it too. But I am concerned about applying width to an inline element and cross-browser compatibility as mentioned by W3Schools (http://www.w3schools.com/css/pr_dim_width.asp). Now I just have to validate it, and I'm sure that W3C isn't going to like it;) .
Again can you take a look and let me know if you find the navigation too confusing? And give me some advice if it is? Also, I realized that we are using em/ex (I recognize em, but not ex, other than it seems to be a smaller unit) for dimensions, are these calculated the same in each browser?
tonyh
03-12-2004, 03:22 PM
I just ran into a problem and I think it involves the cross-browser compatibility issue I mentioned before. Or maybe it's an IE bug that I've taken advantage of, but is implemented correctly in Netscape. Anyways take a look at these screen shots of the same demo I have linked above:
How the nav is implemented in IE6 is how I would prefer to have the nav appear in all browsers. I've also realized that placing the arrow before the link is better because if there isn't a solution atleast the arrow can be seen in NS.
It's almost as if NS ignores the "width" property altogether. Does anyone have any suggestions on how to have the nav appear like the IE screenshot in NS?
Vladdy
03-12-2004, 03:44 PM
Inline elements do not have width. What you are relying on is IE bug.
To make the same appearance in Moz:
1. Remove padding from ul and li elements, use horizontal padding and line height on the a to achieve desired presentation:
#nav a
{
color: gray;
text-decoration: none;
width: 10em;
padding: 0px 1em;
line-height: 1.5em;
}
2. Shift the position of the child ul be the width of parent ul to the right and by the line height of the a up (extra 0.05 is for the 1 px border - works with most reasonable font sizes):
#nav li>ul.sub1,
#nav li>ul.sub2,
#nav li>ul.sub3 {
margin: -1.55em 0px 0px 10em;
}
tonyh
03-13-2004, 02:39 AM
Vladdy,
First I want to thank you for all your help. This is originally yours and it isn't your responsibility to explain it's use or how it can be modified. Especially for a design as specific as mine, it's greatly appreciated.
Originally posted by Vladdy
Inline elements do not have width. What you are relying on is IE bug.
To make the same appearance in Moz:
1. Remove padding from ul and li elements, use horizontal padding and line height on the a to achieve desired presentation:
#nav a
{
color: gray;
text-decoration: none;
width: 10em;
padding: 0px 1em;
line-height: 1.5em;
} Right away I see a potential problem with this. You just said that "inline elements do not have width" and I'm relying on an IE bug, yet you suggest keeping the width applied to <a> even in NS?
I took the time to create a site with multiple demo examples rangeing from your original to my latest variation. As a note my examples for your original don't do it justice. I copied your style exactly into the external CSS file (nav1) and yet it seems to have a width decrement on the submenus. I looked and looked, but couldn't figure out why. If you can see what the mistake is, please let me know so I can fix it. But the second example does show the behaviour I tried to describe regarding anchor lengths.
Multiple Demo Site (http://people.uleth.ca/~tony.hughes/NewNav/CSSNavDemo.html) Only tested in IE6/NS7.1.
CSS Nav1 (http://people.uleth.ca/~tony.hughes/NewNav/nav1.css)
CSS Nav2 (http://people.uleth.ca/~tony.hughes/NewNav/nav2.css)
CSS Nav3 (http://people.uleth.ca/~tony.hughes/NewNav/nav3.css)
CSS Nav4 (http://people.uleth.ca/~tony.hughes/NewNav/nav4.css)
There is one problem I've noticed with my variations regarding the whitespace after the anchors. I'm not sure if it's because of the padding, width or the block display, but I've tried debugging this CSS (nav4) for a couple of hours and I can't remove it. I understand that using the width property to ensure a consistent width is going to create additional space behind the shorter anchors. What I don't understand is the additional space behind the longest anchor (In this case "Item 1.1.2.300" - 14 chars). I've tried shortening the widths, and although it appears that it would work this extra space wraps to a second line. I've even attempted solutions with margin and padding to no avail (that doesn't mean that I did it right though) and in the end I'm baffled. With the exception of making widths for every submenu, which I'll probably do with a real site, but this unwanted extra space may still remain.
If anyone could suggest how to remove these extra spaces, thus making the menu "tighter", I would appreciate it.
Edit-Udpate: I tested in it NS7.1, Vladdy's suggestions work; however, my newest version is funky in NS, even though it is just a variation of the demo above it. Again here are some screenshots:
These images also show the "extra whitespace" that I mentioned. And will hopefully explain what I mean about making the menu "tighter" width wise in my last demo.
lcscne
03-15-2004, 11:09 AM
Originally posted by Vladdy
my demo (http://www.vladdy.net/Demos/CSSNav.html)
Vladdy, this is awesome. I've been searching a long time for a simple non-java script (or minimal java script) menu. I've even purchased an asp component called slide menu obout.com (http://www.obout.com) which much to my disappointment I learned couldn't output XHTML compliant code, but anyway I really appreciate your sharing this and hope you don't mind me using it. I'm trying to reverse engineer the code and have a question. What does the comma do in the following line:
I understand the concept of changing the ul from 'display: none' to 'display: block' but I'm not sure of the proceedures.
thanks for making life easier.
Darin
Vladdy
03-15-2004, 11:55 AM
Right away I see a potential problem with this. You just said that "inline elements do not have width" and I'm relying on an IE bug, yet you suggest keeping the width applied to <a> even in NS?
The reasoning is the following:
As I explained before Gecko and IE place the absolutely positioned block elements differently.
Per the specification the absolute positioning takes the element out of the flow.
Considering the following tree:
<li><a>...</a>
<ul>....
</ul>
</li>
the child ul element in the normal flow should be placed under the anchor element. Gecko does it correctly and that is where you find the submenu block when you give it absolute position. When you apply the margins they change the position of the submenu ul relative to the bottom left corner of the preceeding a. Therefore in compliant browsers the length of the anchor element does not influence the position of the submenu
Now, IE (once again) gets it wrong and aligns the top left corner of the submenu block with the top right corner of the preceeding a. Therefore if you want all your submenu blocks to align in IE regardless of the length of the anchor text you need to give anchor some width (presumably long enough to fit your longest text item) in ex units (so that the font scaling does not mess alignment)
Leaving width among declarations does not affect Gecko, since it is simply ignored.
it seems to have a width decrement on the submenus. I looked and looked, but couldn't figure out why.
Reason is rather simple (and can be considered a logical screw-up on my part:
The whole navigation is put in a div with styling for the root menu appearance applied to this div rather than root ul. The extra width you see is simply the default padding of div element. To get rid of it move the root styling (border, bg, etc.) to the root ul element.
There is one problem I've noticed with my variations regarding the whitespace after the anchors.
This is caused by margins and padding on anchors and list items. Even when you do not specify them there are some default browser settings that are not necesserily 0.
Furthermore, your stylesheet sets the left and right padding of all anchors to 1em:
#nav3 a {
color: gray;
text-decoration: none;
width: 10em;
padding: 0px 1em;
line-height: 1.5em;
}
If you want to get rid of/minimize the left and right space around the link text set the anchor element padding to 0 (or other value), margin to 0; li padding and margin to 0 and ul padding to 0.
You can control the vertical spacing of link text by changing the line-height definition in the anchor style (you had it set at 1.5em)
lcscne
03-15-2004, 03:20 PM
Vladdy,
I can't tell you how much I appreciate this code. I added
'width: 100%;' style to the '#nav li' selector and it allowed me more flexibility positioning the popout lists as my mouse pointer doesn't have to be positioned over the <a>s but rather the <li>s in order to get the popouts.
your demo modified (http://www.lenawee.org/images/menu.htm)
Vladdy
03-15-2004, 03:43 PM
You are very welcome.
That change you mentioned makes the menu behave better in IE.
You need however to adjust your positioning for compliant browsers (right now it is rather off) - see my explanation why they behave differently.
Also, I recommend removing the line:
<?xml version="1.0" encoding="utf-8"?>
from your code because, due to IE bug, it throws it in quirks mode, which may present some problems.
EDIT:
PS: I do like the styling you used.
tonyh
03-16-2004, 02:50 PM
Originally posted by Vladdy
Leaving width among declarations does not affect Gecko, since it is simply ignored. Thanx again Vladdy. But aren't <ul>, <li>, <span> all inline as well as <a>? Does this mean that all the widths applied will be ignored in Gecko that aren't block elements?
I now just saw lcscne solution and it's almost lexactly what I've tried to accomplish, but simpler (note nav5 below.) But I wonder if using the <span> will affect accessibility? Is applying width to a span a better solution than applying a width to the anchor?
Again here's the demo site with the latest suggestions:
CSS Nav Demo (http://people.uleth.ca/~tony.hughes/NewNav/CSSNavDemo.html)
Nav5 (http://people.uleth.ca/~tony.hughes/NewNav/nav5.css)
Again your suggestions work fine in IE, but it's the most screwed up thus far in NS. Here's the screen shots:
As you can see it seems the submenus are appearing to the left instead of the right in NS. And hear I thought I've simplified the CSS....
Also, I noticed that lcscne removed the following CSS:
#nav5 li>ul.sub1 { } Is the child selector ('>') even necessary? I couldn't ever get it to affect anything in IE, but I've kept it thinking it may be a browser issue. Can it be safely removed with our latest modifications?
Vladdy
03-17-2004, 10:56 AM
ul is displayed as block by default.
li is displayed as list-item by default and I change it to block so that the list item bullets are not displayed.
span is an inline element by default
#nav5 li>ul.sub1 {
margin: -0.5em 0 0 -6em;
}
#nav5 li>ul.sub2 {
margin: -0.5em 0 0 -6.5em;
}
#nav5 li>ul.sub3 {
margin: -0.5em 0 0 -7em;
}
These are offset definitions for Compliant browsers (NS 7.0) that are ignored by IE, since it does not recognize child selectors.
You are shoving the pop-up lists 6 to 7 em to the left from the left bottom conner - no wonder they are misplaced.
These child selectors are necessary to provide two different offsets for IE and compliant browsers.
Vladdy
03-17-2004, 11:11 AM
*** DEMO UPDATED ***
I took another look at the problem with different positioning of submenu in IE and compliant browsers.
Apparently there is a simpler workaround for IE stupidity.
If you set the anchor "display" property to "block" and it's "width" to "100%" it will make IE behave right. (:mad: How come no one told me about it before :mad:;) )
Then you do not need two margin definitions.
Hope this helps.
lcscne
03-17-2004, 01:27 PM
Originally posted by Vladdy
How come no one told me about it before
When you figure out how to do a brain synchronization let me know, lol.
I updated my "modifiedVladdyDemo" making cosmetic changes only to get a working model in both ie and gecko (ns not tested). This thread has been a jewel much appreciated, now comes the work of writing an asp script to populate it from an Access db.
lcscne
03-18-2004, 04:05 PM
Ok samij586, tonyh, Vladdy and whoever,
Any of you willing to be a guinea pig and attempt this? I've created the ASP/Access interface to even further the ease of use. Instructions included here (http://www.lenawee.org/images/menu.htm).
tonyh
03-18-2004, 10:38 PM
Originally posted by lcscne
Ok samij586, tonyh, Vladdy and whoever,
Any of you willing to be a guinea pig and attempt this? I've created the ASP/Access interface to even further the ease of use. Instructions included here (http://www.lenawee.org/images/menu.htm).
Sorry Icsne, I don't have the resources to implement your interface, although it looks promising. Besides the reason I was attracted to Vladdy's solution was it's (apparent) ease of use and lack of scripting. I know you're using Server Side, and I can see it's potential for dynamic use, but for the time being I'm looking for a simple accessible menu without JS.
Which leads to my current problem. And I apologize for not providing a site demo this time, it's still a work in progress and needs to be tested in NS. The problem I'm now having is with the <li> and it's hover. How do we differentiate from the <li> that implement the '.hassub' class and standard <li>?
If you remember from my previous demo's I was using the .hassub and hover to implement a make shift image rollover on the arrows. With Vladdy's update the li.hover is being applied to all <li> including those that do not have a submenu. Thus I'm still getting a blue arrow appearing in the last (third, but in my case 2nd) submenu.
I believe it's because the standard <li>s are encapsulated within <li class="hassub"> thus the hover is being applied to the children as well. Except that the gray arrow is only applied to the <li> with submenus, where the blue arrow is applied to all. I've tried several solutions and have had little success. I did have some limited success by creating a second anchor class hover and applying it to all the anchors withinin the final submenus (later only applied to anchors within <li class="hassub">.) This solution worked fine in IE, but in Gecko the blue arrow would "flicker" as if it was fighting between the <li> and <a> hovers.
Since the grey arrows are only being applied to <li> utilizing the .hassub class I know that it is working properly. And the blue arrows are being applied to all <li> because the hover is being applied to the element rather than a class. Therefore, by my logic I want the blue arrow to appear as a hover on only <li class="hassub"> and a seperate hover to apply to all remaining <li>. Thus the CSS should look something like this:
#nav li {
display: block;
list-style: none;
padding: 0.1em 0;
}
.hassub {
background: url('grayArrow.gif') no-repeat right center;
}
.hassub:hover,
.hassub.hover {
background: url('blueArrow.gif') no-repeat right center;
} But the hover applied to .hassub is ignored. I even tried "#nav li.hassub {}, #nav li.hassub:hover {}" which would do the opposite and override "#nav li:hover {}." No matter what I've tried I can't get these two hovers to work in cohension. I even thought that it may have something to do with the JS within the .htc, but had no success with it as well.
If anyone has any suggestions I'd appreciate it.
Edit: I forgot to mention that after my attempt at using a second 'a.hover' as a solution and failed in NS, I tried it with a second class of <li>. That is "li.nosub {}, li.nosub.hover {}" as well as a seperate class called ".nossub". Again I had similar results as above. One or the other would work, but never both.
Vladdy
03-19-2004, 08:45 AM
Tony,
I looked at the problem you presented and at the moment have a solution that works for Gecko and a partial fix for IE.
1. if you specify the selector for the .hassub class as follows:
#nav li.hassub
{ background: url('grayArrow.gif') no-repeat right center;
}
the grey arrow will not disappear when the item is hovered upon.
Due to IE bug with multiple class definitions, that is as far as it can be taken without modifications to .htc file
2. for compliant browsers (Gecko) the following selector definitions will apply different image to background on hover:
#nav li.hassub:hover,
{ background: url('blueArrow.gif') no-repeat right center;
}
I uploaded the demo update with these changes. If having the same functionality in IE is important to you, I can tell you how to make modifications to .htc file.
lcscne, I do not currently have time to be a guinea pig, put I'll try to help you with any problems that might arise.
tonyh
03-19-2004, 03:57 PM
Thanx Vladdy,
You know I tried the exact same thing earlier, only I hadn't tested it in NS (for the record I do all my development at home, then test it in NS at the University) and since that blue arrow kept appearing in IE I simply assumed it would in NS as well. Now I know that the menu appears and functions EXACTLY the way I intended in Gecko.
Makes me think that I've had all the wrong mentality since the get go: get it to work in compliant browsers first, then get it to work the same in IE. Rather than the other way around. It's just difficult to think that way because 90% of surfers are using IE, thus it's always build for IE, then the other 10%.
So yes, it is important that I have the menu function in IE the same as in Gecko. So if you could supply the .htc fix you mentioned I would greatly appreciate it. And once I have the menu functioning in both browsers and finish rearranging the link order, I'll post the finished "reworld" menu. Then you can tell me if it was worth all the trouble;) .
tonyh
03-21-2004, 04:32 PM
Sorry for the double post.
Vladdy,
Just so you know that I'm trying to contribute to this solution I've been searching for the .htc fix myself. Thus far the most helpful link I've found is at msdn (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/scripting_elements_collections.asp) but I don't know how to put it all together with the behaviour.
My logic may be wrong here, but I'll try anyway. The reason why the li.hassub:hover is overriding li:hover is because of inheritance. The <li> encapsulated in <li class="hassub"> is inheriting the properties of hassub. Which is a simple repetition of above. So my logic is to remove the inherited properties of hassub from <li>. So we can use a conditional to determine which hassub have <li> children by using "contains" and forcefully set the background property to equal the li:hover background. Of course this may be way too complex;) .
The other problem is I still haven't been able to figure out how to access the pseudo-class properties with JS. Except to alter the "onmouseover" and "onmouseout" events. Thus I don't know where all this additional code would go within the .htc?
Edit: I've been meaning to ask, what is the advantage of using .htc over .js? Because .htc is only compatible with IE5+, anyone using lower would see an extended list as if CSS was disabled. And since .htc is using JS, if JS is disabled, will the behaviour still function?
Edit: On further research, and I may be grasping at straws, another article at msdn (http://msdn.microsoft.com/workshop/author/om/doc_object.asp) explains that DOM Event Handlers "bubble" up to their parent and recursively to to the document object. This would better explain my "inheritance" above. So rather than trying to reset the :hover properties, as it is near impossible to access them, we determine the hassub children and cancel their events (li:hover) using "window.event.cancelBubble = true". Like I said, I may be grasping at straws, so I don't know if this will work because it may cancel the entire cascading functionality or even if cancelBubble applies in IE5+ (http://msdn.microsoft.com/workshop/author/dhtml/overview/recalc.asp). And if it will work, how to apply it in the .htc?
Edit: I can't f@cking believe this. I had it working on two seperate occassions. Using setExpression, removeExpression and a conditional. I removed the comments and now the bloody thing won't work. This is the code with comments removed:
<SCRIPT LANGUAGE="JScript">
var elTag = element.tagName;
var elClass = element.className.replace(' ', '');
function RestoreActive() {
element.className = element.className.replace(/\bactive\b/,'');
}
</SCRIPT>
Vladdy
03-22-2004, 08:54 AM
Tony,
As I mentioned in my last post the origin of the problem in IE is its inability to recognize subset class selectors (http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html). I made a little demo (http://www.vladdy.net/Demos/iemcbug.html) to illustrate the problem.
Since we can not have a list item in IE that has two classes (.hassub.hover), the solution is to combine the declaration in a single class (.hassubhover) and modify the .htc functions to test for existing class and branch execution.
I uploaded the demo update (http://www.vladdy.net/Demos/CSSNav.html) which uses a separate HTC file (http://www.vladdy.net/Demos/CSSNavIEHover.htc) to create the desired hover functionality of ".hassub" list items in IE.
Hope that helps.
tonyh
03-22-2004, 01:09 PM
LOL. A very sick LOL....
I was so frusturated with everything I did yesterday, I mean I spent about 12 hours researching and coding and as you proved it was all way to complicated. I knew it would be something simple:D .
You have no idea how much I appreciate this, the gratitude for all your help.
I'm glad it worked out for you.
I appreciate your willingness to see it though, as it certainly helped in finding and fixing problems with the original demo that I posted.
tonyh
03-23-2004, 01:18 AM
Originally posted by Vladdy
When CSS is enabled in IE but scripting is not, only the root tier menu is available (since the lower tier blocks are given display:block by default). If that is a problem, I assume a different (linear vertical) styling can be applied to the menu in IE by default and then the regular styling is set dynamically by the script onload (I think it can be put in the HTC as well); This is definately something that should be looked into. It wouldn't do any good to have the menu completely inaccessible if JS is disabled. (I know I discovered this first hand while developing my own menu;)).
Would it be simpler just to have the the menu appear as an unordered list? Just strip the CSS if JS is disabled? Or have a seperate default CSS for IE and rewrite it with JS, thus if JS is disabled IE will always use the default, but if JS is enabled it will automatically update the CSS to implement the multi-menu?
Actually, I think you just said that... that's what happens when you type as you think:D .
lcscne
03-26-2004, 08:39 AM
Vladdy,
I tried to change the cursor for the hassub to default so that the functionality of the hassub class of <li> wasn't mistaken as an actual link but as a pop-out only. Like so:
.hassubhover a {
cursor: default;
}
however this changes all links in the sub ul. This was a surprise to me in that I thought only the hassub classes' names were being changed by the htc. Any ideas on this?
lcscne
03-26-2004, 08:43 AM
Sorry, evidently gecko doesn't suppor the cursor style and so I'm going to can this idea and let the arrow.gif serve the purpose.
Vladdy
03-26-2004, 08:51 AM
If in your menu realization the list item element that has a submenu does not point to any page, but used only to envoke the submenu block, why using anchor in the HTML source???
Gecko supports default cursor styles but does not support custom cursors.
tonyh
04-03-2004, 06:24 PM
Originally posted by tonyh
Speaking of which, will images set in the 'background' CSS property resize with the element? Or should the images be placed in the element via <img> with set height and width? Which is more accessible considering the 'alt' attribute?Originally posted by Vladdy
Chances are this will be added in CSS3.
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties1
I've discovered that in order for images to resize they cannot be placed within the background property. CSS3 is too late, besides if IE isn't willing to support CSS2 (instead incorporating XSL), why would they support CSS3?
I changed the font-size in my nav from 12px to 1em, and found a couple of new problems. Mainly the issues regarding IE Scaling Font-Sizes (http://forums.webdeveloper.com/showthread.php?s=&threadid=31689). Which also brings up an issue regarding span and div tags in Gecko.
After applying the hack provided in that thread, I discovered the same problem (the text wraps) with the em width of the nav and submenus. I don't understand why IE requires additional width when it's the same number of characters regardless of font-size. Atleast Gecko gets it right.
The next problem was with the arrow background, since it does not resize with the text it uses the same dimensions at the smaller font-sizes. This makes the arrow overlap the characters and/or text wrap because of the larger line-height. I am currently experimenting with applying an image floated to the right in the markup itself. Although this does work and the image resizes, I have yet to figure out how to apply the image swap on li.hassubhover to the image. The other is that if CSS is disabled the arrow still appears in the list because it IS part of the markup, in this case on the far right of the screen.
So here's the questions: how do you apply the hover to the arrow images if they are not backgrounds? If CSS is disabled how to prevent the arrow from appearing in the unstyled list?
Vladdy
04-03-2004, 07:15 PM
I would simply set min-height: to the height of the graphic in pixels.
In IE you can use width: expression to emulate min-height.
tonyh
04-03-2004, 08:46 PM
Originally posted by Vladdy
I would simply set min-height: to the height of the graphic in pixels.
In IE you can use width: expression to emulate min-height.
Thanx Vladdy, and in my ignorance I though that 'expression' was JScript, when it's just a MS properiety CSS method ;) .
But this doesn't resolve the issue regarding the hover. Of course KISS would say, forget the arrow hover, one arrow with the anchor hover will be enough. The reason why I pushed for the arrow hover in the first place is so that the user could see the color association with the anchor hover and which submenu they are in. In my case blue anchor = blue arrow, thus blue arrow highlights which submenu(s) is currently active. It's really not that big of an issue, I just feel it makes the navigation more accessible. And since the images are no longer backgrounds, each must be supplied with an <alt> which will get annoying very quickly. Unless there is a way to prevent the 'tooltip' from poping up?
Is it possible to set the src value of the image tag with CSS? If so, then JS could be used with the anchor hover to change the src value of the arrow. Can <img> have it's own id as well? And on the topic of id, I was the one that changed the CSS to include '#nav' prior to all the tags (elements). I believed that all the children of the 'id=nav' would inherit this id as well. Thus, seperate id or classes could be created for each tag. But I discovered durring my attept to find the htc solution that these children did not have this id, the id was actually 'undefined'. In order for these children to have the 'nav' id, must it be explicitly stated in the markup?
This also doesn't resolve the problem if CSS is disabled. Since we are now discussing applying the arrow as an image rather than a background, we must contend with this issue. If the CSS property float is not recognized, where will the image be postioned in relation to the list?
For example:
<li>
<a href="#">The World Of</a>
<img style="float: right;" src="grayArrow.gif" />
</li>
Will place the image to the right, but on a line break.
<li>
<a href="#">The World Of</a>
<img src="grayArrow.gif" />
</li>
Again places the image on a line break, but on the left.
<li>
<img style="float: right;" src="grayArrow.gif" />
<a href="#">The World Of</a>
</li>
This works correctly, as it places the arrow on the same line and to the right.
However, if CSS is disabled the third example place the arrow on the left and the anchor is placed below via line break like example 2. So it doesn't even keep the image inline without CSS, so having li display block isn't even an issue. Is there a way to resolve this semantically rather than with styles in XHTML 1.0 Strict?
Or as asked earlier, prevent the image from appearing if CSS is disabled?
Vladdy
04-03-2004, 08:51 PM
I'm not sure I follow you with the hover problem... Can you explain it from the very beginning...
tonyh
04-03-2004, 09:02 PM
Originally posted by Vladdy
I'm not sure I follow you with the hover problem... Can you explain it from the very beginning...
I'm glad you asked, I was just going to edit the last post anyways :D .
Okay, currently we have:
#nav li.hassub {
background: url('grayArrow.gif') no-repeat right center;
}
#nav li.hassub:hover,
#nav li.hassubhover {
background: url('blueArrow.gif') no-repeat right center;
}
Now, we've changed the arrow from a background to an actual image. Use my above coded examples to understand how I'm doing the same without the background property. And the problems I'm having if CSS is disabled.
The question is, how do I get the grayArrow in the markup to swap to the blueArrow when the submenu becomes activated?
In the last post I suggested using JS on the anchor hover, but it could be done on the li.hassubhover as well, provided we can call a JS function from this CSS. But I realized that each arrow may potentially need it's own id or className, or an index would be needed if the arrows are returned as a collection.
Like I've said before, I tend to complicate things :( .
Vladdy
04-03-2004, 09:08 PM
Ok, but I thought the reason you wanted to use <img> instead of background was the hiding of arrow image when font sizes get very small.
I've shown you how to solve this problem with CSS. Is there any other reason why the graphic can not be part of CSS (which I strongly believe it should, because it is a presentational element)?
tonyh
04-03-2004, 09:32 PM
Originally posted by Vladdy
Ok, but I thought the reason you wanted to use <img> instead of background was the hiding of arrow image when font sizes get very small.
No, I'm using <img> so that the arrow resizes with the text's relative units. The background property doesn't resize the image, thus the image appears too large with smaller text or to a lesser extent too small with larger text.
I've shown you how to solve this problem with CSS. Is there any other reason why the graphic can not be part of CSS (which I strongly believe it should, because it is a presentational element)?
If I could get the image to resize with relative units using CSS I'd be on cloud nine. Yes, the arrow is purely presentational, but now it's become a necessary component for an accessible multi-level menu. Just to clarify, this is the example Menu (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/BGCNav.html) before making the relative unit transition.
I could remake the menu without the arrow completely, but then transversing the menu would become (more) confusing. And I'm not saying I won't because I will if it's the best solution. In fact I've already attempted this using borders, but for some reason the borders don't align the same at medium (100%) font-sizes with smaller or larger text :confused: .
Vladdy
04-03-2004, 09:37 PM
I think right now you have an arrow graphic with a size that looks good within a reasonable range of font sizes, especially once you limit the min-width.
"Good enough is good enough, while perfect is always a pain in the @ss and often not worth the effort anyway"
- Tom Clancy
:D :D :D
tonyh
04-03-2004, 09:54 PM
Originally posted by Vladdy
I think right now you have an arrow graphic with a size that looks good within a reasonable range of font sizes, especially once you limit the min-width.
Thanx, I think....
I know, oh God do I ever know, that I should be keeping this simple. It's the reason why I wanted to use your menu in the first place.
When I was rereading this page in case I had missed something or misinterpreted something, I think I might have.
[...] especially once you limit the min-width.
Where exactly do I apply this 'min-height/width'? Do I apply it to the hassub class or do I apply it to the <img>? If I can apply it to the hassub class it would solve all my problems, but I don't know if min-* can be applied to a background? Or how to have the min-* match the current font-size, would it simply be the em value? Ie, 24px*12px = ~ 1.5emx0.75em?
If I apply it to the <img> I still have the same problem with positioning as stated above:
For example:
This works correctly, as it places the arrow on the same line and to the right.
However, if CSS is disabled the third example place the arrow on the left and the anchor is placed below via line break like example 2.
And since the 'align' attribute has been deprecated in XHTML Strict I don't know how to float the image to the right semantically.
Edit: Is floating the image semantically even a concern? I mean how many graphic browsers exist in mainstream use that don't support CSS? I already know that this (my site) will not function in IE4 and most likely NN4.x as well. But it does in IE5+, NS6+, Moz FF 0.8, Opera 7.3 and Safari 1.2, that should be enough right?
Vladdy
04-03-2004, 10:03 PM
You apply min-height to the element that has the image in the background (.hassub and .hassubhover). It assures that this element height is equal or greater than the height of an image you used for background (assuming you set min-height to the pixel height of the bg image), so that it is never clipped when font size is getting too small.
tonyh
04-03-2004, 10:25 PM
Your one heck of a guy Vladdy, but it's extremely frusturating that you don't supply examples :D .
Are you saying this:
#nav li.hassub {
background: url('grayArrow.gif') no-repeat right center;
min-width: 1.5em;
min-height: 0.75em;
width: expression(1.5em);
height: expression(0.75em);
}
}
Or this:
#nav li {
display: block;
list-style: none;
padding: 0.1em 0;
min-width: 1.5em;
min-height: 0.75em;
width: expression(1.5em);
height: expression(0.75em);
}
BTW I don't know how to use the 'expression' method, so I'm just guessing above.
I also realize that min-width applied above is only the width of the arrow, not the actual <li>. So how do you apply a min-width/height to the image so that it retains shape when it becomes a bgimage? Use both my examples, but only apply the min-width to the hassub* class, but min-height to the element (li), since the class should inherit it?
Vladdy
04-03-2004, 10:59 PM
LOL
I played with it a bit and here is my tested suggestion (*** Demo is Updated***):
Since IE has only 5 font size settings, design graphics and set font size so that li height is equal or greater than background graphic height on the "smallest" font setting. Then you do not have to worry about height: expression() at all.
Then all is left to do is set min-height for real browsers:
#nav li
{ min-height: 15px; /* the pixel height of your bg*/
}
tonyh
04-03-2004, 11:54 PM
Originally posted by Vladdy
Since IE has only 5 font size settings, design graphics and set font size so that li height is equal or greater than background graphic height on the "smallest" font setting. Then you do not have to worry about height: expression() at all.I know it's getting late, we've been at this for well over an hour already, but I'm glad you've persevered this long ;) .
I'm not sure I understand this either, but since my arrow has a height of 12px, I set the min-height to 0.75 em, assuming 1em = 16px. I also applied the IE default font-size fix from ALA, and it's fixed some of it. But I'm still having a problem with the 'smallest' text size. And it's not just this menu, it's everything, but that's for another already existing thread.
I thought I'd provide yet another demo of what I'm talking about:
Relative Menu (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/BGCNavRelative.htm)
Relative Menu CSS (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/navRelative.css)
It also demonstrates the border problem mentioned earlier.
And in your demo, why do you have #nav li stated twice (I did the same)? Why not just apply the behaviour and the rest of the properties in one? And what does '#nav->li' do? What's this additional padding for? why isn't it just applied to '#nav li'? Is it something I should be using to?
tonyh
04-04-2004, 12:03 AM
Originally posted by Vladdy
Since IE has only 5 font size settings, design graphics and set font size so that li height is equal or greater than background graphic height on the "smallest" font setting. Then you do not have to worry about height: expression() at all.I know it's getting late, we've been at this for well over an hour already, but I'm glad you've persevered this long ;) .
I'm not sure I understand this either, but since my arrow has a height of 12px, I set the min-height to 0.75 em, assuming 1em = 16px. But the 'smallest' font size is 9px, are you implying I redesign the arrow with a height of 9px? That would be very small.... I also applied the IE default font-size fix from ALA, and it's fixed some of it. But I'm still having a problem with the 'smallest' text size and width. And it's not just this menu, it's everything, but that's for another already existing thread.
I thought I'd provide yet another demo of what I'm talking about:
Relative Menu (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/BGCNavRelative.htm)
Relative Menu CSS (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/navRelative.css)
It also demonstrates the border problem mentioned earlier.
And in your demo, why do you have #nav li stated twice (I did the same)? Why not just apply the behaviour and the rest of the properties in one? And what does '#nav->li' do? What's this additional padding for? why isn't it just applied to '#nav li'? Is it something I should be using to?
twistedsociety
04-04-2004, 12:23 AM
This is what I had really needed all along I believe. :D Just wondering if I should use the setup from this page or not though..
http://www.vladdy.net/Demos/CSSNav.html
Along with the CSS codes in header of it..? But just make a CSS file containing the codes for menu and draw it up via header? Like: <link rel="stylesheet" type="text/css" href="nav.css" />
Basically like this guy here did it:
http://people.uleth.ca/~tony.hughes/BGC/BGCNav/BGCNav.html#
Cause I'm really in the need of a menu system like this, that works in all or most browsers. :) Thanks in advanced.
Twisted
Vladdy
04-04-2004, 10:15 AM
Tony,
The height of my graphic is 15 px and with 1em font size it does not get overlapped when IE is set to the smallest font size.I checked your last demo and it does not overlap in IE on the smallest font either, so I'd say you got IE covered.
For real browsers you set the min-height in pixels to match the height of your graphic.
#nav->li sets a margin for real browsers (IE does not recognize child selectors) so that text does not overlap the graphic at the smaller font size setting.
Twisted, if you have more than one page it makes sense to put CSS in external file.
tonyh
04-04-2004, 02:22 PM
Originally posted by Vladdy
I checked your last demo and it does not overlap in IE on the smallest font either, so I'd say you got IE covered.
For real browsers you set the min-height in pixels to match the height of your graphic.
#nav->li sets a margin for real browsers (IE does not recognize child selectors) so that text does not overlap the graphic at the smaller font size setting.
I updated the last demo and I'd love to know what browsers you're using. I only have IE6 and NS7.1 to test with, and I use i/ieCapture for screenshots of other browsers.
In IE6 the arrow overlaps the <li>s "Production Notes" and "Supporting Characters" at text size smallest. In NS7.1 the 100% zoom must be larger than IE's medium (but it actually appears smaller on screen) because the arrow sits right on the edge of "Production Notes", thus with ANY zoom smaller than 100% the arrow overlaps worse than IE on both <li>s already mentioned. And I applied "#nav->li" and it doesn't seem to affect NS7.1 at all, I even tried various px widths without success.
Here's some screenshots:
IE6 Medium Text Size (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/RelativeIEmedium.gif)
NS7.1 100% Text Zoom (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/RelativeNSpercent100.gif)
IE6 Smallest Text Size (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/RelativeIEsmallest.gif)
NS7.1 90% Text Zoom (http://people.uleth.ca/~tony.hughes/BGC/BGCNav/RelativeNSpercent90.gif)
I don't understand why your demo works fine, even without ALA's fix, and mine doesn't :( .
The only way I've ever been able to fix IE smallest width problem is by increasing the width and it was worse before I applied the ALA fix. So the overlapping is prevented in IE6 if I incease the width on #nav from 9.5 to 10.5, and adding another 1em to sub1 will probably fix the problem with 'Supporting Characters' as well. But I need as much width as possible with my design, so I need to minimize where I can. And this IE box model problem is irritating the heck out of me because I can't :mad: .
And I know I must be irritating the heck out of you because from your POV there's nothing wrong ;) .
twistedsociety
04-04-2004, 02:28 PM
Vladdy,
Everything seems fine except for the little arrow images. I tried using background-color: transparent; for most of nav and even in site index file in hopes of being able to view them hehe. But...I am using a background image for the nav table itself...maybe this is what is throwing things off...mmm....is there away to add my own images for those arrows and in before the links themselves.? Something like this:
And then have a background image being in the CSS file just for the nav not that main table itself in site index file..? Thanks in advance for your opinions and suggestions. :)
Twisted-
Vladdy
04-04-2004, 02:40 PM
Tony,
I was talking about vertical overlapping. Horizontal is easier to deal with, just increase the width of your lists.
Twisted, I think you need to catch up on what CSS is and how it works. spacer.gif is so outdated it is not even funny. Then have a page that shows what exactly your problem is.
tonyh
04-04-2004, 06:11 PM
Originally posted by Vladdy
Tony,
I was talking about vertical overlapping. Horizontal is easier to deal with, just increase the width of your lists.
Sigh... if that is the only solution because that is exactly what I've been trying to avoid. Like I said earlier, I don't understand why additional width is needed when it's the same number of characters. The space needed should never change because it's all scaled :confused: .
Originally posted by twistedsociety
But...I am using a background image for the nav table itself...maybe this is what is throwing things off...mmm....is there away to add my own images for those arrows and in before the links themselves.?
Twisted,
Why are you using tables? Is it tabular data? If not replace it with divs. I know this can be a pain in the butt, (just try to place elements inline ;)), but aparently absolutely or floated divs is the way of the future.
Take a look at his: Creating efficient CSS designs (http://forums.webdeveloper.com/showthread.php?s=&threadid=30383)
If you have a background image on the div you are using for your nav AND want to place a second background image for the arrow you might want to consider using z-index to place your list on top of the div with the background. Or maybe splice up the background image and incorporate the arrow in them. Just keep in mind that background images DO NOT resize with relative font units or precentages. Check out W3Schools (http://www.w3schools.com/) for some tutorials on CSS.
One other thing to keep in mind is that Vladdy's menu will not function if JS (javascript) is disabled because MS won't support CSS2. This means that you're going to have to provide two different styles for the menu, one to style the unordered list and the second for the multi-menu. This is why I use external style sheets. Since you only need to apply the second CSS if JS is enabled I intend to use a JS document.write() in the head after the first CSS link. Since CSS is cascadable and inheritable the second CSS will overwrite the previous. Theoritically, this will fix the JS problem :) .
Edit: IE6 is really begining to P!ss me off. Everytime I got to edit a post and hit backspace it make me loose focus and it's like I've hit a fast key for the back button. This is why I have two of the same post above and Lord knows how many on this one :mad: .
And now for the real edit: I think I finally uderstand why I need the extra space on 'smallest.' It's because it isn't scaled, IE won't allow the font size to decrease below 9px, as stated earlier, unless other keywords such as 'smaller, x-small or xx-small' are applied. If the font size was truly scaled by percentage, as Gecko does, then the font size would be 8px, and since there is a 1px difference on each character it needs extra space. So if I set the font size to 9px to test how much space is needed in px I should be able to apply a min-width to the #nav and submenus in pixels. Can width: expression() be applied if width: 9.5em already exists?
twistedsociety
04-04-2004, 09:36 PM
Well....the spacer2.gif is just an image...not to make a space or nothing lmao... I just happened to be lazy one day and named it that to keep it apart from other image names I had.
I do know some about CSS and like it better then having to name everything a font color this or bgcolor that....or whatever up and down through the whole damn site index file...(Note: Before someone replies with a smart ass reply..I do have alot of that throughout my site files..hahaha..however though...I do use alot of the css for most part..) but from what Im gathering from these boards is that the websites aren't made up of tables no more or something..?? I see tons of sites with tables and such...I don't really go the div way cause it seems to be more of a pain in the ass then trying to get the site layout and image...and whatever else of it right to start with... <sigh> <Thinks to self>.....what are sites made of these days..chinese language symbols or something...? Damn!! LOL!! My as well.....just make a background color black....put the <br> symbol there and slap text and links from top to bottom and just have the </body></html> tag to end it off. Little something like this site here: www.sidetalking.com and be done with it lmao....
Also...tried damn iframes and such...but I was told that is a BAD!! BAD!! thing to do...browsers evidently don't see what is in them or something, same goes for certain search engines..mmm...would be nice if the govt banned all browsers but IE...that would be awesome..hehe... Then If had a font size setting of <font size="40,000,000">Text</font> (I know that isn't the right coding but just to be a smart ass for a second thats all.)..mmmmm...it would say..mmm....well I'll just show that how I think the person looking at it wants to see it...yeah...thats what I'll do..
Twisted-:D
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.