Problem with div and spry

HTML & CSS
1

I built a web page with 6 div sections using Dreamweaver CS4: the container that everything fits into, and then it’s divided into a header, a left side bar, a right side bar, and main content and a footer.

The header just has an image in it. The right side bar has 4 images in it, and the footer some text.

The left side bar has a menu: a vertical spry menu. All but one of them are just single items, the other opens up into 6 more options.

The main content panel has spry tabs in them, If I delete these tabs or remove just one section of the tabs, there is a problem with my vertical spry menu: I can’t access the second level of the menu: it’s like it’s no longer there. When I look at the code, everything is just fine. I compared the two codes (before and after I did the edit), and there is nothing changed.

Here is the original page: http://www.fixit2sellit.com/test-index-page-for-html5_with%20conetent.html
And here it is with one section of the spry tabs removed: http://fixit2sellit.com/new-look-index.html

Now I know there are tons of things wrong with these two pages, but I only want to get this vertical menu fixed.

2

Limoges_designer,

The CSS code is different for your two pages.

On the page where the menu bar works, you have this:

ul.MenuBarVertical ul {
border: 1px solid #CCC;
background-color: #FFF;
width: auto;
}

ul.MenuBarVertical ul {
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
background-color: #FFF;
}

And on the page where it doesn’t work you have this,

ul.MenuBarVertical {
border: 1px solid #CCC;
background-color: #FFF;
width: 14.8em;
}

ul.MenuBarVertical {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 75%;
cursor: default;
width: 14.8em;
background-color: #FFF;
}

Notice the missing ul (among many other differences) in the code for the page where the menu doesn’t work. I would suspect that this is your issue.

Hope that helps,

Shawn

3

Thanks! I decided to take a different approach: I started kind of from scratch, and the problem went away.
so now it looks good - at least it works the way I want it to:

fixit2sellit.com

I was wondering if anyone knew where I could find some good slideshow javascripts where I could have images changing in a box on my sidebar: I want to have a database of pictures that get poured into a box. Any ideas?

4

Limoges,

There are lots of scripts around the web that will do this for you. You just have to add your own images.

Here is an example,

and another,

Hope that helps,

Shawn