css pop-out menu

Forum Moderators: not2easy

Message Too Old, No Replies

css pop-out menu

worked in IE7 before tidy, now it doesn't work

Artsyrat

4:06 pm on Mar 13, 2009 (gmt 0)

Hi,
I'm making a pop-out menu with css only. Been learning to and working on it for two days now, finally looked and worked to my satisfaction, worked in four browsers, even IE7. I put the code through html tidy, validated my css, made the corrections and the pop-out now does not work in IE 7. It works in FF, Opera and Safari. I do not know any javascript for pop-outs or I would use it. I'm intermediate in css/xhtml.
Thanks,
Artsyrat

Artsyrat

6:19 pm on Mar 13, 2009 (gmt 0)

Oops my bad...Here's the code... I had a different DOCTYPE but 'html tidy' changed it to this.
<html xmlns="http://www.w3.org/1999/xhtml">

<li>
<a href="">Galleries</a>

<ul>
<li><a href="">Desert Paintings</a></li>

<li><a href="">Tropical Paintings</a></li>

<li><a href="">Flower Paintings</a></li>

<li><a href="">Impressionist Paintings</a></li>

<li>
<a href="">Prices</a>

<ul>
<li><a href="">Prices</a></li>

<li><a href="">Desert Prices</a></li>

<li><a href="">Tropical Prices</a></li>

<li><a href="">Flower Prices</a></li>

<li><a href="">Impressionist Prices</a></li>

<li><a href="">Gift & Wood Prices</a></li>
</ul>
</li>

<li>
<a href="">Special Features</a>

<li><a href="">Impressionist
Art</a></li>

<li><a href="">New Desert Stories</a></li>
</ul>
</li>

<li>
<a href="">About Us</a>

<li><a href="">Our Faith</a></li>

<li><a href="">Desert Stories</a></li>
</ul>
</li>
</ul>
</div>
-----------------------------------

#lsb {
width:100%;
}

ul#lsbnav, ul#lsbnav ul {
width:11em;
background-image: url(''); background-repeat:repeat;
background-color: #a3caf1;
margin-left: 0;
margin-top: 1em;
padding-left: 0;
}
ul#lsbnav li {
list-style-type: none;
width:10.2em;
height: 25px;
background-image: url(''); background-repeat:repeat;
background: #a3caf1;
margin-bottom: 3px;
padding: 1px;
position: relative;
}
ul#lsbnav li ul { display: none; } /* hide from IE 6/5 */
ul#lsbnav li > ul {
display: none;
position: absolute;
top: -10px;
left: 170px;
}

ul#lsbnav li > ul li { height: 25px; }
ul#lsbnav li:visited{
background: #7ab3eb;
border:3px outset #a3caf1;
width:10.2em;
color: #993300;
}
ul#lsbnav li:visited > ul { display: block; }
ul#lsbnav li a {
display: block;
width: 10.2em;
background: #7ab3eb;
border:3px outset #a3caf1;
color: #993300;
text-decoration: none;
}

ul#lsbnav li > ul li { height: 25px; }
ul#lsbnav li:hover{
background: none;
color:#fef2d8;
}
ul#lsbnav li:hover > ul { display: block; }
ul#lsbnav li a {
display: block;
width: 10.2em;
background: #a3caf1;
text-decoration: none;
}
ul#lsbnav li a:hover { background:#ffbc62;
border:3px outset #ffd59b;
color:#fef2d8; }
ul#lsbnav li:hover > a { background:#ffbc62;
border:3px outset #ffd59b;
color:#fef2d8; }

ul#lsbnav li > ul li { height: 25px; }
ul#lsbnav li:active{
background: #7ab3eb;
border:3px outset #a3caf1;
width:10.2em;
color: #993300;
}
ul#lsbnav li:active > ul { display: block; }
ul#lsbnav li a {
display: block;
width: 10.2em;
background: #7ab3eb;
border:3px outset #a3caf1;
color: #993300;
text-decoration: none;
}

Artsyrat

8:23 pm on Mar 13, 2009 (gmt 0)

I got it...it was the DOCTYPE changed by 'html tidy'. I added back what they removed and it works now. I guess I better do some reading on DOCTYPE, I don't really understand what it's all about. Obviously it has an impact on the page.

css pop-out menu

worked in IE7 before tidy, now it doesn't work

Artsyrat

Artsyrat

Artsyrat

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week