suckerfish positioning off

[bluewalrus]

So i tried adding the suckerfish from a list apart but its postioning the one element i want all the way to the left. i tried removing the float left but that throws the rest of the elements under this to the left also the page displays differentley in each browser so i assume its more than one thing. I have the old page avalible as well to see how it was.
Current Page with Error:http://www.travelinchucks.com/index.html
Old Page None Error:http://www.travelinchucks.com/bio.html
Css:http://www.travelinchucks.com/css.css
Theres alot of css and html with those so i haven't included it but you can see it there.

[TheJoshMan]

I would recommend putting ALL of your menu links within the <ul> and listing them as <li>s rather than JUST the Blogs link

[bluewalrus]

that makes the width double almost and the scrolldown of the suckerfish not work. its set as that right now as an example for help though. I believe i coded it as you said unless you meant to move the css into the menu a code?

[bluewalrus]

changed some more things and its 85% there. Now effect is the only thing messing it up. Its dropping it down a line and then another line after that so i think i need a display inline somewhere but i dont know where. also will this go over the image when its working correct or do i need to z-index somewhere?

[TheJoshMan]

i would use this...



#menu li ul {
position:absolute;
left:-999em;
}
#menu li:hover ul {
position:absolute;
left:auto;
background:#fff;

}


instead of using "display:none;" and "display:block;"



Be warned however, that li:hover will not work in IE 6 and under. To make it work you would have to use a little bit of javascript and a conditional statement.

[bluewalrus]

Ok so I got it to work kind of the mouse over on the links that come up under it arent always active. Also would this be the conditional statement for ie 6 cause i got this from that article and assumed that it did it. I don't have ie 6 i'm on a mac:

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

Link:http://www.travelinchucks.com/index.html

[bluewalrus]

Ok I've got 97% of this coded right theres only 1 possible problem now which I think is pretty easy. http://www.travelinchucks.com/
The blogs drop down has an extra padding-left of 20px is looks like to me and i don't know where its getting it from.

Also if someone could tell me if the conditional statement above makes the hover work in ie6 I'd appreciate it.

Thanks for your time.

[bluewalrus]

Nothing? See above message.

[TheJoshMan]

Ok so I got it to work kind of the mouse over on the links that come up under it arent always active. Also would this be the conditional statement for ie 6 cause i got this from that article and assumed that it did it. I don't have ie 6 i'm on a mac:

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

Link:http://www.travelinchucks.com/index.html


That isn't a "conditional statement", that's merely a script. If you are running that script on your site without a conditional statement wrapped around it, then you are putting a lot of unnecessary strain on IE 7.

This would be how it would look wrapped in a conditional statement:



<!--[if IE lte 6]>
<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>
<![endif]-->

[bluewalrus]

OO thanks do you know how to get rid of, or see the like extra 20px of left padding on the blogs drop down. http://www.travelinchucks.com/

Thanks for you help.