homepage Welcome to WebmasterWorld Guest from 54.197.94.241
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css pop-out menu
worked in IE7 before tidy, now it doesn't work
Artsyrat




msg:3869755
 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




msg:3869864
 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">

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

Artsyrat




msg:3869962
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved