4 replies [Last post]
nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 5 years 52 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

hi, i am making the website and almost finish doing it...and then i try to validate it in w3c validator, and then i got errors (4 errors) which is in my navigation part.
and the error msg is :

#go here
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
#end at here

so i am sure it is because of my navigation,
because i have div id and then span, and then again class(.nav_special) inside it,
because i wish after the navigation title, i have the description text underneath it.
from the error msg i got,i guess i should not do it in this way, if so, what tag should i use?

if anyone who knows please guide me or let me know what is the problem so that i could continue doing it! thanks!

i put the problem link and the html, css code here:

html code:(deleted the non relevant part)



problem's css










css code: (deleted non relevant part,#nav span is at line 95 and .nav_special is at line 115)

/* Body
---------------------------------------------------------------------- */
body {
margin: 0;
font-size: 11px;
font-family: Arial;
color: #000066;
background: #ffffff url(../images/common/bg.gif) repeat-y;
}
#wrapper {
width: 720px;
text-align: left;
position: relative;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Links
---------------------------------------------------------------------- */
a {
text-decoration: none;
color: #000066;
}
a img {
border: 0;
}
a:hover {
color: #ff6666;
}

/* Header
---------------------------------------------------------------------- */
#header {
width: 700px;
height: 80px;
padding-left: 10px;
color: #ffffff;
background: url(../images/common/headerbg.jpg) right no-repeat;

}
#header img {
margin-top: 33px;
}

/* Page Body
---------------------------------------------------------------------- */
#pagebody {
width: 700px;
padding-left: 10px;
}
#pagebody:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

/* Navigation
---------------------------------------------------------------------- */
#nav {
margin-top: 10px;
float: left;
padding: 0;
width: 140px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
margin: 0;
padding: 10px 0;
border-bottom: 1px dotted #000066;
font-size: 12px;
font-weight: bold;
}
#nav span, #nav a {
display: block;
line-height: 1.4;
padding: 0 0 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
#nav span {
border-left-color: #ff6666;
color: #ff6666;
}
#nav a {
border-left-color: #000066;
text-decoration: none;
color: #000066;
}
#nav a:hover {
border-left-color: #ff6666;
color: #ff6666;
}
.nav_special {
font-size: 9px;
font-weight: normal;
}

the link to problem is :
http://www.nanaku4design.com/problem/work.html (html)
http://www.nanaku4design.com/problem/css/base.css (css)

thank very much in advance!

***i dunno what happen to my post, it has many blue lines when i mouse over the msg below it!!!!! did i make something strange???? so sorry!***

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You can't put block level

You can't put block level elements (eg divs) inside inline elements (anchors or spans). You need to apply the :hover to the li, not the anchor inside it. That won't work for IE6 though because it doesn't understand :hover on non-anchor elements, so you'll need to use the whatever:hover.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 5 years 52 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

hi Tyssen, thanks for your

hi Tyssen, thanks for your response!
i have no idea that there is whatever:hover thingy! now i know!
also,i know that i should not put anchors or spans inside divs, thanks for the information!
I tried the whatever:hover,yes,it works. but i dint use it in my current problems because i accidentally can solve it,but by using
(cos i wish the nav title underneath it has some description).

i dint use the whatever:hover thing,but maybe i will use it for next time.but i just curious, when i tried to use it, when i use FF to view it,it is fine.
when i use IE6, i can view it, but i have to 'allow pop up' , but my page doest have any pop up window.is it bcos of the whatever:hover thingy? thanks!

second,is it a right way to use
in my navigation?because i heard my friend said
using
is not cool ?(i think my friend mean professional here)
here's the simple code:

once again! thanks for your help!

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

No, you don't need the <br>

No, you don't need the <br> - making the span display: block will accomplish the same thing.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 5 years 52 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

SOLVED!

hi Tyssen!!
thanks!!!
i am now using without

and use display:block
it works!
thanks a lot !!!

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com