Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.
JProg

JProg

Programmer
Apr 4, 2002
88
JP
Hi Everyone,

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:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<meta name="author" content="David Dartnell" />
<meta name="description" content="Assignment 1, Web Development 1, by David Dartnell" />
<meta name="keywords" content="Assignment 2, Web Development 1, David Dartnell's Assignment 2, Assingment 2 Index Page" />
<title>David Dartnell's Assignment 2 Index Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<![CDATA[
.backgroundpicture
{
background-image: url("background_2.jpg");
background-repeat: repeat;
}
.description
{
color: black;
font-family: 'Aachen Medium', Serif;
font-weight: bold;
text-align: center;
}
.frame_demo
{
border: 2px ridge teal;
color: #009B9B;
position: absolute;
height: 200px;
margin-left: 450px;
margin-top: 390px;
width: 300px;
z-index: 1;
}
.link_demo
{
border: 2px groove purple;
color: #004080;
position: absolute;
height: 200px;
margin-left: 10px;
margin-top: 390px;
width: 300px;
z-index: 1;
}
.list_demo
{
border: 2px groove green;
color: #005900;
position: absolute;
height: 200px;
margin-left: 10px;
margin-top: 10px;
width: 300px;
z-index: 1;
}
.student_information
{
background-image: url("background_1.jpg");
background-repeat:repeat;
border: 2px double blue;
height: 200px;
margin-left: 230px;
margin-right: 200px;
margin-top: 200px;
position: absolute;
width: 300px;
z-index: 2;
}
.table_demo
{
border: 2px ridge red;
color: #804040;
position: absolute;
height: 200px;
margin-left: 450px;
margin-top: 10px;
width: 300px;
z-index: 1;
}
]]>
</style>
</head>
<body class="backgroundpicture">
<div class="student_information">
<h1>Student Information</h1>
<ul type="circle">
<li>Name: David Dartnell</li>
<li>ID Number: 4644190</li>
<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>
</ul>
</div>
<div class="list_demo">
<h1>List Demo</h1>
<h3>Link: &nbsp; <a href="lists.htm" alt="Example List Page">list.htm</a></h3>
<h4 class="description">Description</h4>
<p>Demonstrates the use of <span class="keyword">definition, ordered &amp; unordered lists</span>. Also explains the use of the<span class="keyword">type</span> attribute in lists.</p>
</div>
<div class="table_demo">
<h1>Table Demo</h1>
<h3>Link: &nbsp; <a href="table.htm" alt="Example Table Page">table.htm</a></h3>
<h4 class="description">Description</h4>
<p>Demonstrates the use of <span class="keyword">tables</span>. Also explains the use of the <span class="keyword">colspan &amp; rowspan</span> attributes in tables.</p>
</div>
<div class="link_demo">
<h1>Link Demo</h1>
<h3>Link: &nbsp; <a href="link.htm" alt="Example Links Page">link.htm</a></h3>
<h4 class="description">Description</h4>
<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>
</div>
<div class="frame_demo">
<h1>Frame Demo</h1>
<h3>Link: &nbsp; <a href="frame.htm" alt="Example Frames Page">frames.htm</a></h3>
<h4 class="description">Description</h4>
<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 &amp; source</span>.</p>
</div>
</body>
</html>

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.

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:

"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."

Is there any way around this?

Thanks for your assistance.

Regards

David
 
Sort by date Sort by votes
Hi,

1. I think th problem for the background not showing is your inexplicable code at the beginning and end of the style tag:
Code: 
<![CDATA[
...
]]>
should look like:
Code: 
<!--
...
-->
Even better, since you are obviously using an external stylesheet, why not just move all the style information there and skip the <style></style> tags. And remember, <!-- --> is just a html comment that is used to prevent very old browsers from parsing the css information. If you move the styles to a separate file, you can drop this. I have no idea what <![CDATA[] ]> is supposed to mean.

2. There is no type attribute in strict xhtml for the <ul> tag. You have to use the stylesheet for that. Either define it in a separate stylesheet for all <ul> elements ( ul { list-style-type: circle; } ), create a class or use an inline style:
<ul style="list-style-type: circle;">

3. Before your page will validate, you will have to get rid of alt attributes in your <a> tags. If you want a tooltip for links, change alt to title. That is the proper syntax.

Hope it helps.
 
Upvote 0 Downvote
Vragabond,

Thanks for the advice on my xhtml challenges. I have changed all of the alt tags to title tags as you suggested and this made a large difference. The reason why I included the following lines in the code:

<![CDATA[
...
]]>

is because I was under the impression that an xml validator would reject the characters used in the style sheet declerations, or at least "spit the dumby" over them!

You obviously know a fair bit about xhtml and in all likelihood know xml well also. If you could spare a couple of minutes explaining the following to me it would be really appreciated;

Using XHTML Strict DTD

1). Is there any way of having a static web page with the right xhtml mime type declaration? I have only seen examples of the mime type being successfully set using server side programs at request time.

2). Is there ever going to be an advantage in following the Strict DTD over the Transitional DTD. From what I have seen Strict is much quirkier to write, does it hold any forseable advantages over Transitional?

Thanks heaps for your help with my xhtml page.

Regards

David
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
792
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
826
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
234
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top