Welcome to WebmasterWorld Guest from 54.145.64.172

Forum Moderators: not2easy

Message Too Old, No Replies

css pop-out menu

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

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

New User

5+ Year Member

joined:Feb 13, 2009
posts: 35
votes: 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
6:19 pm on Mar 13, 2009 (gmt 0)

New User

5+ Year Member

joined:Feb 13, 2009
posts: 35
votes: 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">

<div id="lsb">
<ul id="lsbnav">
<li><a href="">Home</a></li>

<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="">Gift &amp; Wood</a></li>
</ul>
</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 &amp; Wood Prices</a></li>
</ul>
</li>

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

<ul>
<li><a href="">What's New?</a></li>

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

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

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

<ul>
<li><a href="">Past Art</a></li>

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

<li><a href="">Desert Stories</a></li>
</ul>
</li>
</ul>
</div><!-- end of lsbnav -->
-----------------------------------

#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;
}

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

New User

5+ Year Member

joined:Feb 13, 2009
posts:35
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members