Hi,
I am trying to use the fluid 960 grid. All works out well except for 2 validation errors on the HTML
Here is the source of the problem:
<div class="grid_12">
<ul class="nav main">
<ul><li class="active"><a href="/homepage.html" title="Home page" >HOMEPAGE</a></li>
<li><a href="/treatments.html" title="Treatments" >TREATMENTS</a></li>
<li><a href="/skin_care_products.html" title="Product page" >PRODUCTS</a></li>
<li><a href="/skin_types.html" title="Skin types" >SKIN TYPES</a></li>
<li><a href="/galvanic.html" title="Galvanic" >GALVANIC SPA</a></li>
<li class="last"><a href="/ayurveda.html" title="Ayurveda" >AYURVEDA</a></li>
</ul></ul>
</div>
<div class="clear"></div>
I can t seem to find the code that is causing this problem nowhere in the CSS files that come with this fluid grid. I The <ul> after the <ul clas...> is a <li> in the source code of the authors site, but as said I don t see where to fix this.
Here is the navigation CSS:
/* navigation (horizontal subnavigation)
----------------------------------------------- */
ul.nav,
ul.nav * { margin:0;padding:0;}
ul.nav {
position:relative;
background:#666;
max-width:100%;
height:2.5em;
}
ul.nav li {
cursor:pointer;
float:left;
text-align:center;
list-style-type:none;
font-weight:normal;
}
ul.nav li ul {
cursor:default;
width:100%;
max-width:100%;
position:absolute;
height:auto;
top:2.5em;
background-position:0 0 !important;
left:-9000px;
}
ul.nav li ul li {
padding:0;
border:none;
width:auto;
max-width:none;
}
ul.nav li a {
color:#fff;
background:#666;
font-weight:bold;
text-decoration:none;
display:block;
float:left;
padding:0 1em;
height:2.4em;
line-height:2.5em;
}
ul.nav li ul li a {
position:relative !important; /* ie Mac */
cursor:pointer !important;
white-space:nowrap;
line-height:2em;
height:2em;
font-weight:normal;
color:#666;
background-position:0 50% !important;
}
ul.nav li:hover a,
ul.nav li a:hover,
ul.nav li a:focus {color:#000; background:#ccc;}
ul.nav li a:active {color:#666; background:#fff;}
ul.nav li:hover ul {left:0;z-index:10}
ul.nav li ul,
ul.nav li {background:#ccc !important}
ul.nav li:hover ul li a {color:#444;}
ul.nav li:hover ul li a:hover {color:#000; background:#fff;}
ul.nav li:hover ul li a:active {color:#666; background:#fff;}
ul.nav li.current a {color:#666; background:#fff; cursor:default; font-weight:bold;}
ul.nav li.current ul {left:0;z-index:5}
ul.nav li.current ul,
ul.nav li.current {background:#ccc !important}
ul.nav li.current ul li a {color:#444; background:#ccc; font-weight:normal;}
ul.nav li.current ul li a:hover {color:#000; background:#fff;}
ul.nav li ul li.current a,
ul.nav li ul li.current a:hover,
ul.nav li.current:hover ul li a:active {color:#666; background:#fff;}
/* navigation (vertical subnavigation)
----------------------------------------------- */
ul.nav {
background:#fff;
}
ul.main li {
position:relative;
top:0;
left:0;
}
ul.main li ul {
border-top:0;
}
ul.main li ul li {
float:left;
}
ul.main li a {
height:2.5em;
line-height:2.5em;
border:0;
color:#111;
background:#fff;
}
ul.main li ul li a {
width:12em;
line-height:2em;
height:2em;
text-align:left;
color:#fff;
border-top:1px solid #444;
background:#444;
}
ul.main li a:focus {color:#18d7e8; background:#fff;}
ul.main li ul li a:hover {
color:#2044b9;
background:#fff;
}
ul.main li:hover a {
color:#2044b9;
background:#fff;
}
ul.main li:hover ul li a {color:#111;}
ul.main li:hover ul li a:hover {color:#2044b9; background:#fff;}
ul.main li:hover a:active {background:#fff;}
ul.main li:hover ul li a:active {color:#2044b9; background:#fff;}
ul.main li.active a{color:#2044b9;}
Thanks, Frank.
PS when I do a page preview there is a blurred green image over the whole page, it appears to be the edit icon that should be in the gray bar on top. Somehow that "explodes" over the screen. Maybe related