I have the layout of the following code how I wish it to display.
The problem is that it does not validate because of the <br> tags within the <ul> element.
It appears that only <li> tags can be used within the <ul> tags.
Is there a CSS solution I can use instead of the <br>?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> HTML5 page </title>
<!– link rel=”stylesheet” href=”common.css” media=”screen” –>
<style type=”text/css”>
ul { padding-left:10px; }
li { padding-bottom:1px; }
.liDate { display:inline-block; width:8em; list-style-type:none; font-weight:bold; }
.liTime { display:inline-block; width:3em; list-style-type:none; }
.liHead { display:inline-block; width:9em; list-style-type:none; font-weight:bold; }
.liBody { display:inline-block; width:9em; list-style-type:none; }
.liHeadDays { display:inline-block; width:9em; text-decoration:underline;
list-style-type:none; font-weight:bold; }
.wkSep { color:lime; }
fieldset { width: 950px; }
</style>
</head>
<body>
<ul id=”liHead”>
<li class=”liDate”><button id=”Wk2Sem”>Week to<br>Semester</button></li>
<li class=”liTime”>Time</li>
<li id=”Mon1″ class=”liHeadDays”>Monday</li>
<li id=”Tue2″ class=”liHeadDays”>Tuesday</li>
<li id=”Wed3″ class=”liHeadDays”>Wednesday</li>
<li id=”Thu4″ class=”liHeadDays”>Thursday</li>
<li id=”Fri5″ class=”liHeadDays”>Friday</li>
<li id=”Sat6″ class=”liHeadDays”>Saturday</li>
</ul>
<p style=”font-weight:bold; color:green;”>Typical Week</p>
<ul id=”tbody0″>
<li class=”liDate”><button id=”TypWkClr”>Clear</button></li>
<li class=”liTime”>AM</li>
<li class=”liHead”> <input id=”tw0″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw1″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw2″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw3″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw4″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw5″ type=”text” value=””> </li>
<br>
<li class=”liDate”> </li>
<li class=”liTime”>PM</li>
<li class=”liHead”> <input id=”tw6″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw7″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw8″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw9″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw10″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw11″ type=”text” value=””> </li>
<br>
<li class=”liDate”> </li>
<li class=”liTime”>Eve</li>
<li class=”liHead”> <input id=”tw12″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw13″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw14″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw15″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw16″ type=”text” value=””> </li>
<li class=”liHead”> <input id=”tw17″ type=”text” value=””> </li>
</ul>
</fieldset>
</body>
</html>