CMSI 361
Fall 2004
Quiz 1 Answers

PROBLEM 1
---------

<catalog>
  <product 
    name="kitchen_table" 
    partnum="100" 
    category="table" 
    plant="milwaukee" 
    inventory="instock">
    <specifications weight="20" power="1">blah</specifications>
    <price msrp="249.99" shipping="35">239.99</price>
  </product>
  <product name="hammer" partnum="224" catagory="handtool">
     <specifications weight="1.2" power="0"></specifications>
     <options 
       finish="metal" 
       adapter="notapplicable" 
       case="soft">
     </options>
     <price street="18.95" shipping="4.00">35.99</price>
    <notes>This product won an award once</notes>
  </product>
</catalog>

PROBLEM 2
---------

a.button {
  border: thick solid blue;
  padding: 0.3em;
  color: yellow;
  background-color: green;
  text-decoration: none;
}
a.button:hover {
  background-color: pink;
}

PROBLEM 3
---------

The first applies the color and border style attributes only
to <img> elements within <a> elements, while the latter applies
them to all <img> elements and all <a> elements.

PROBLEM 4
---------

body {
  color: red; 
  background-color: orange;
  background-image: url(triangles.gif); 
}
a:link {color: green;}
a:active {color: blue;}
a:visited {color: gold;}

PROBLEM 5
---------

14pt is an "absolute" size that won't look good on a web page
that can be magnified.  It can be used on media whose physical
characteristics are known.

PROBLEM 6
---------

Here's the original crud:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td colspan=2 height=200 align=center>ONE</tr>
<tr><td width=50 height=100><u>TWO</u><td><font face=Arial>THREE</font>
<tr><td bgcolor=yellow width=300>FOUR<td>FIVE
</table>

The table will have to turn into a div.  As is usual with
the old table-based layouts, border, cellspacing and cellpadding
were all 0, so we needn't worry about them.  To keep the layout the
same as the original, we'll use pixel units.  Each table "cell"
will end up in its own div.  Note that the width of the second
row, first column, is meaningless, since the 300 px width on the
third row, first column overrides it.

The styles:

div {margin:0; padding:0;}
div#main {width: 100%;}
div#one {height:200px; text-align:center;}
div#two {float: left; width: 300px; height:100px; 
  text-decoration:underline;
}
div#three {height:100px; font-family: Arial;}
div#four {clear: both; width:300px; background-color:yellow; float: left;}
div#five {}
  
And the document:

<div id="main">
  <div id="one">ONE</div>
  <div id="two">TWO</div>
  <div id="three">THREE</div>
  <div id="four">FOUR</div>
  <div id="five">FIVE</div>
</div>

PROBLEM 7
---------

Of all the image replacement techniques. I like Stuart
Langridge's best.  Assuming an image called xozo.gif that
is 100px high, his technique would give the following
stylesheet ruleset:

h1#name {
  padding: 100px 0 0 0;
  overflow: hidden;
  background-image: url("xozo.gif"); 
  background-repeat: no-repeat;
  height: 0px !important; /* for most browsers */
  height /**/:100px; /* for IE5.5's bad box model */
}  

Then the XHTML shows

<h1 class="name">XOZO</h1>

Of course, rather than using image replacement, just use the
letter-spacing attribute:

h1#name {letter-spacing: 1ex}

<h1 class="name">XOZO</h1>