8 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 11 years 46 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I'm sure most ppl know that you can't put a <div> in an <ul> (and presumably an <ol> too), but I just discovered it today (when my code had over 200 errors!!! panic stations).

So, I was wondering a)why not? and b)what else can't you put in there?

larmyia

Tags:
Anonymous
Anonymous's picture
Guru

Re: what you can/can't put in &lt;ul&gt;

You can not put a block level element inside of an inline element. Putting an inline inside of a block is fine though.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

what you can/can't put in &lt;ul&gt;

Actually, ul is a block element, but like p, it is limited as to what it may contain by the DTD. li and div, otoh, are block elements that may contain any element.

The html4 DTD for ul,

<!ELEMENT UL - - (LI)+>

says the the ul must have opening and closing tags and must contain one or more lis.

For li and div,

<!ELEMENT LI - O (%flow;)*>
<!ELEMENT DIV - - (%flow;)*>

The li and div elements may hold anything or nothing.

For p,

<!ELEMENT P - O (%inline;)*>

The p element may contain zero or more inline elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Anonymous
Anonymous's picture
Guru

what you can/can't put in &lt;ul&gt;

kk5st wrote:
Actually, ul is a block element
Well, I just didn't know that. I'm sorry for the misinformation.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 1 week ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

what you can/can't put in &lt;ul&gt;

...fancy not knowing everything there is to know about CSS :roll: I don't know - you just can't get the staff nowadays Wink

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 12 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

what you can/can't put in &lt;ul&gt;

Note, howver, that in CSS we can define:
#nav li {display:block; float:left;}
to allow it to contain block elements like:
#nav a {display:block;}
to create things like a list-based horizontal menu.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 1 week ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

what you can/can't put in &lt;ul&gt;

DE - you do not need to declare the <li> as display:block for XHTML 1.0 Transitional. I have a site where I needed line breaks within a horizontal nav bar so I simply did this:

#t-nav li {
	float: left;
	text-align: center;
	line-height: 115%;
	margin: 0;
	padding: 0;
}
#t-nav li a {
	display: block;
	height: 64px;
	text-decoration: none;
	margin: 0;
	border: 0;
}

It works in all browsers and it validates.

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 12 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

what you can/can't put in &lt;ul&gt;

I gather the float: property implicitly creates a block element. I tend to explicitly state the display: property whenever I am changing the default regardless. Interesting that CSS is smarter than we think sometimes.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

seb
Offline
Enthusiast
Last seen: 13 years 27 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

what you can/can't put in &lt;ul&gt;

I think the point that you've missed is that LIs are already block elements, so there's no need to set them as block in the CSS, i think that is what Roy was getting at!