Problem with background image and unordered list in xhtml strict doc.

liunx · Jan 10, 2008

Hi Everyone, <br />
<br />
Aside from the previous post I made (regarding meta tags in xhtml) I have two questions to ask concerning my code, which is presented below:<br />
<br />
<?xml version="1.0" encoding="UTF-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" /><br />
<meta name="author" content="David Dartnell" /><br />
<meta name="description" content="Assignment 1, Web Development 1, by David Dartnell" /><br />
<meta name="keywords" content="Assignment 2, Web Development 1, David Dartnell's Assignment 2, Assingment 2 Index Page" /><br />
<title>David Dartnell's Assignment 2 Index Page</title><br />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css" /><br />
<style type="text/css"><br />
<![CDATA[<br />
.backgroundpicture<br />
{<br />
background-image: url("background_2.jpg");<br />
background-repeat: repeat;<br />
}<br />
.description<br />
{<br />
color: black;<br />
font-family: 'Aachen Medium', Serif;<br />
font-weight: bold;<br />
text-align: center;<br />
}<br />
.frame_demo<br />
{<br />
border: 2px ridge teal;<br />
color: #009B9B;<br />
position: absolute;<br />
height: 200px;<br />
margin-left: 450px;<br />
margin-top: 390px;<br />
width: 300px;<br />
z-index: 1;<br />
}<br />
.link_demo<br />
{<br />
border: 2px groove purple;<br />
color: #004080;<br />
position: absolute;<br />
height: 200px;<br />
margin-left: 10px;<br />
margin-top: 390px;<br />
width: 300px;<br />
z-index: 1;<br />
}<br />
.list_demo<br />
{<br />
border: 2px groove green;<br />
color: #005900;<br />
position: absolute;<br />
height: 200px;<br />
margin-left: 10px;<br />
margin-top: 10px;<br />
width: 300px;<br />
z-index: 1;<br />
}<br />
.student_information<br />
{<br />
background-image: url("background_1.jpg");<br />
background-repeat:repeat;<br />
border: 2px double blue;<br />
height: 200px;<br />
margin-left: 230px;<br />
margin-right: 200px;<br />
margin-top: 200px;<br />
position: absolute;<br />
width: 300px;<br />
z-index: 2;<br />
}<br />
.table_demo<br />
{<br />
border: 2px ridge red;<br />
color: #804040;<br />
position: absolute;<br />
height: 200px;<br />
margin-left: 450px;<br />
margin-top: 10px;<br />
width: 300px;<br />
z-index: 1;<br />
}<br />
]]><br />
</style><br />
</head><br />
<body class="backgroundpicture"><br />
<div class="student_information"><br />
<h1>Student Information</h1><br />
<ul type="circle"><br />
<li>Name: David Dartnell</li><br />
<li>ID Number: 4644190</li><br />
<li>"I declare that this assignment is my individual work. I have not worked collaboratively nor have I copied from any other student's work or from any other source."</li><br />
</ul><br />
</div><br />
<div class="list_demo"><br />
<h1>List Demo</h1><br />
<h3>Link:   <a href=http://www.webdeveloper.com/forum/archive/index.php/"lists.htm" alt="Example List Page">list.htm</a></h3><br />
<h4 class="description">Description</h4><br />
<p>Demonstrates the use of <span class="keyword">definition, ordered & unordered lists</span>. Also explains the use of the<span class="keyword">type</span> attribute in lists.</p> <br />
</div><br />
<div class="table_demo"><br />
<h1>Table Demo</h1><br />
<h3>Link:   <a href=http://www.webdeveloper.com/forum/archive/index.php/"table.htm" alt="Example Table Page">table.htm</a></h3><br />
<h4 class="description">Description</h4><br />
<p>Demonstrates the use of <span class="keyword">tables</span>. Also explains the use of the <span class="keyword">colspan & rowspan</span> attributes in tables.</p> <br />
</div><br />
<div class="link_demo"><br />
<h1>Link Demo</h1><br />
<h3>Link:   <a href=http://www.webdeveloper.com/forum/archive/index.php/"link.htm" alt="Example Links Page">link.htm</a></h3><br />
<h4 class="description">Description</h4><br />
<p>Demonstrates the use of <span class="keyword">links</span>. Also explains style sheet <span class="keyword">pseudo-classes</span> that can be applied to <span class="keyword">links</span>.</p><br />
</div><br />
<div class="frame_demo"><br />
<h1>Frame Demo</h1><br />
<h3>Link:   <a href=http://www.webdeveloper.com/forum/archive/index.php/"frame.htm" alt="Example Frames Page">frames.htm</a></h3><br />
<h4 class="description">Description</h4><br />
<p>Demonstrates the use of <span class="keyword">frames</span>. Also explains various <span class="keyword">frame</span> attributes including <span class="keyword">name, target & source</span>.</p><br />
</div><br />
</body><br />
</html><br />
<br />
1). Firstly I don't have any background picture when viewing this in IE6. Originally my body tag and other tags used the id attribute to associate styles however the validator at the w3c complained about this so I changed all ids to classes. As soon as I did this my background image stopped showing up. If anybody could help me work out why my background image is not showing up it will be greatly appreciated.<br />
<br />
2). I cannot validate this document because it does not like the type attribute that traditionally belongs with an unordered list. The validator said the following:<br />
<br />
"You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element."<br />
<br />
Is there any way around this?<br />
<br />
Thanks for your assistance. <br />
<br />
Regards<br />
<br />
DavidFor your list, you could use CSS to define the type of marker.<br />
<br />
ul { list-style-type: circle; }<br />
<br />
There's a list of all types you can use at <a class="postlink" href="http://www.w3schools.com/css/css_list.asp">http://www.w3schools.com/css/css_list.asp</a>why dont you just use <br />
body<br />
{background-image: url(image.jpg);}The enclosing style tag CDATA delimiters are wrong:<br />
<style type="text/css"><br />
/*<![CDATA[*/<br />
<br />
/*]]>*/<br />
</style><br />
<br />
That will solve the background-image problem.<br />
<br />
Give the ul a class and make a rule:<br />
.ulcircle {list-style : circle;}<br />
<br />
BTW you are in quirks mode for IE.Originally posted by Fang <br />
Originally my body tag and other tags used the id attribute to associate styles however the validator at the w3c complained about this so I changed all ids to classes.Well for the tags which you only have 1 of (the <body> tag) you don't need an id or class at all. The only reason that the validator would choke on id's would be if you had used an id more than once.<br />
<br />
You also have h1's, h3's and h4's but no h2's, that doesn't make any sense. You don't mark-up a hierarchy and miss out a level.<a class="postlink" href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers">http://www.w3.org/TR/WCAG10-HTML-TECHS/ ... nt-headers</a><br />
...in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3).Also, I haven't see this written anywhere, but surely there should only be one main h1 header for each page.Originally posted by Fang <br />
BTW you are in quirks mode for IE. I don't find that there's much of a difference between quirks and standards in IE anyway.

Problem with background image and unordered list in xhtml strict doc.

liunx

Guest