Help me with CSS lists and width/float
July 23, 2004 7:17 AM Subscribe
More CSS lists!
I have a tree-like navigation done with an unordered list, CSS and JavaScript. on IE, the bullet itself responds to the onclick event (haven't worked out whether it should or not, but it's what I want it to do...).
Stick it inside a div. Still works.
Specify either width or float for the div. It doesn't work.
I can get round it by putting a redundant div inside the one with float and width, but that seems a little messy to me. Any ideas?
Correction - the redundant div doesn't work... just forgot to clear my cache...
I have a tree-like navigation done with an unordered list, CSS and JavaScript. on IE, the bullet itself responds to the onclick event (haven't worked out whether it should or not, but it's what I want it to do...).
Stick it inside a div. Still works.
Specify either width or float for the div. It doesn't work.
I can get round it by putting a redundant div inside the one with float and width, but that seems a little messy to me. Any ideas?
Correction - the redundant div doesn't work... just forgot to clear my cache...
Response by poster: Here you go. All very rough at the moment - I'm converting someone else's pages. The doctype is invalid (it's there so teh w3c validator picks it up as what I'm aiming for...) - I though it might be that but it's no different with any other doctype/quirks mode thing.
When float and width are commented in the css, the plus signs are clickable... (they also pick up the hand cursor from the css)
posted by monkey closet at 7:38 AM on July 23, 2004
When float and width are commented in the css, the plus signs are clickable... (they also pick up the hand cursor from the css)
posted by monkey closet at 7:38 AM on July 23, 2004
I don´t know a lot of javascript but:
if(kids[i].style.display=="block") {
Is it possible that specifying the float and width changes the "display" attribute? Do you explicitly set it to "block"?
posted by signal at 8:25 AM on July 23, 2004
if(kids[i].style.display=="block") {
Is it possible that specifying the float and width changes the "display" attribute? Do you explicitly set it to "block"?
posted by signal at 8:25 AM on July 23, 2004
How bizarre. Just as a general guiding principle, IE is really, really bad at rendering floats. It may be possible to solve this problem, but from personal experience I've found that avoiding floats as much as possible is the safer bet.
To see what's going on, I added the following code to your page:
This will highlight the current element. As you can see, if you take the
However, this is only the case with the
...
I'd say the remedy, if you don't find a fix for this problem, is to either a) not float the
posted by Khalad at 8:34 AM on July 23, 2004
To see what's going on, I added the following code to your page:
var oldColor;
function blink(element)
{
oldColor = element.currentStyle.backgroundColor;
element.style.backgroundColor = '#FCC';
}
function blank(element)
{
element.style.backgroundColor = oldColor;
}
</script>
</head>
<body onload="init()" onmouseover="blink(event.srcElement)" onmouseout="blank(event.srcElement)">This will highlight the current element. As you can see, if you take the
float or width rules out, each list item is highlighted individually. But if you add either one in, as you've found, IE completely ignores them and treats the containing div as the current element. If you set the items to display: inline then IE treats them correctly.However, this is only the case with the
lis. The anchors are clickable, as are the "Search for...", "Possible Explanations", and "Consider the following conditions:" lines. And that's puzzling, since those are block elements....
I'd say the remedy, if you don't find a fix for this problem, is to either a) not float the
div, or b) not use the list bullets like this. You could, for example, use the plus/minus signs as background images and add left padding to each of the list items, and then just remove the bullets entirely.posted by Khalad at 8:34 AM on July 23, 2004
Sorry if I missed something in a quick skimming here, but it's a should-be-working moment. Here's the js I wrote to do the same thing a while back:
oExpandImage = new Image; oExpandImage.src = "[path to your image]";
oCollapseImage = new Image; oCollapseImage.src = "[path to your image]";
function expandNavigation(sBoxId, sImgId)
{
if (document.getElementById) {
oNavBox = document.getElementById(sBoxId).style;
oImage = document.getElementById(sImgId);
if (oNavBox.display == "none" || oNavBox.display == "NULL") {
changeDisplayState(sBoxId);
oImage.src = oExpandImage.src;
} else {
changeDisplayState(sBoxId);
oImage.src = oCollapseImage.src;
}
}
}
This would require you to put the plus/minus image on the page (and give it an id to be the second param of the function), but you could modify it to just pass the id of the bullet and change the display and background. I don't see why you need to float anything, especially since you already have unordered lists. Just define the CSS for the lists without float and only with widths if it applies to your design, like
ul {top-level css}
ul ul {display: none;}
posted by yerfatma at 9:55 AM on July 23, 2004
oExpandImage = new Image; oExpandImage.src = "[path to your image]";
oCollapseImage = new Image; oCollapseImage.src = "[path to your image]";
function expandNavigation(sBoxId, sImgId)
{
if (document.getElementById) {
oNavBox = document.getElementById(sBoxId).style;
oImage = document.getElementById(sImgId);
if (oNavBox.display == "none" || oNavBox.display == "NULL") {
changeDisplayState(sBoxId);
oImage.src = oExpandImage.src;
} else {
changeDisplayState(sBoxId);
oImage.src = oCollapseImage.src;
}
}
}
This would require you to put the plus/minus image on the page (and give it an id to be the second param of the function), but you could modify it to just pass the id of the bullet and change the display and background. I don't see why you need to float anything, especially since you already have unordered lists. Just define the CSS for the lists without float and only with widths if it applies to your design, like
ul {top-level css}
ul ul {display: none;}
posted by yerfatma at 9:55 AM on July 23, 2004
Ah, it would probably help if I included the referenced function:
function changeDisplayState(sBoxId)
{
if (document.getElementById) {
oBox = document.getElementById(sBoxId).style;
if (oBox.display == "none" || oBox.display == "NULL") {
oBox.display = "block";
} else {
oBox.display = "none";
}
}
}
posted by yerfatma at 9:57 AM on July 23, 2004
function changeDisplayState(sBoxId)
{
if (document.getElementById) {
oBox = document.getElementById(sBoxId).style;
if (oBox.display == "none" || oBox.display == "NULL") {
oBox.display = "block";
} else {
oBox.display = "none";
}
}
}
posted by yerfatma at 9:57 AM on July 23, 2004
Well, yerfatma, I don't think the problem is in not knowing how to do it, but rather that monkey closet's way of doing it clashes with a quirk in IE. Personally, I think mc's idea is really clever, and as far as I can tell it would work fine in Mozilla if the JS code were fixed up a bit to work with non-IE browsers. Mozilla, at least, fires the onclick event handler with or without the
posted by Khalad at 10:47 AM on July 23, 2004
float and width rules.posted by Khalad at 10:47 AM on July 23, 2004
Response by poster: Cheers all.
khalad's background image idea seems nice, but it has exactly the same problem. I've scrapped the float and absolutely positioned the right column, and that seems much better...
Now I can get on with making it work in other browsers...
posted by monkey closet at 1:13 AM on July 26, 2004
khalad's background image idea seems nice, but it has exactly the same problem. I've scrapped the float and absolutely positioned the right column, and that seems much better...
Now I can get on with making it work in other browsers...
posted by monkey closet at 1:13 AM on July 26, 2004
This thread is closed to new comments.
posted by Khalad at 7:32 AM on July 23, 2004