|
|
Posted by Jonathan N. Little on 02/21/07 15:18
Nick Wedd wrote:
> In message <5e3e4$45db4ccc$40cba7a4$3101@NAXS.COM>, Jonathan N. Little
> <lws4art@centralva.net> writes
>
> Thank you for your help. I am slowly increasing my understanding of
> what is going on here, I can see that it isn't easy, and I appreciate
> the time you must have spent on it.
>
>> Try:
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
<snip>
> No, that wasn't my problem -
>
> I have simplified the whole page, removing the javascript and other
> irrelevant elements, and using a simplified stylesheet.
>
> See http://www.files.maproom.org/00/18/a.html
> and http://www.files.maproom.org/00/18/b.html
>
> a.html looks the way I want it, b.html has unwanted vertical spacing.
> The only difference is that b.html has a valid doctype, a.html has no
> doctype.
Firstly, one way to guarantee display quirkiness is to *not* have a
valid doctype.
Secondly, this is a new document so you should use the strict doctype as
I suggested.
Thirdly, a P element is a 'block' element so by default it is going to
insert 'space' above and below the block...look up SPAN.
Fourthly, your markup has errors, your table's first row has 2 table
cells, but the second has 3 as a colspan="3". That will give you display
problem right from the start. But it looks like the only reason you have
a table is for layout...tsk-tsk. Not need, a more flexible way...just
used placeholders for your links...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Tableless</title>
<style type="text/css">
BODY { color: #000; background-color: #ffd; font-family: arial,
helvetica; sans-serif; }
..maproom H1 { font-weight: normal; font-size: 1.3em; text-align: right; }
..maproom H1 SPAN.title { display: block; float: left; }
..maproom H1 SPAN.title A { font-weight: bold; }
..maproom H1 SPAN.index STRONG { color: #080; }
..maproom H2 { font-size: 1.3em; font-style: italic; }
..maproom UL { list-style: none; }
..maproom LI { margin: 0; padding: 0 1em 0 0; display: inline;}
</style>
</head>
<body>
<div class="maproom">
<h1>
<span class="title">
Plate from <a href="#">Cary's New Itinerary</a>
by <strong>John Cary</strong>
</span>
<span class="index">
Index no. <strong>0018:0004</strong>
</span>
</h1>
<h2>Isle of Wight</h2>
<ul>
<li>Change Image Scale:</li>
<li><a href="#">0.8</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1.4</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">5</a></li>
<li><a href="#">8</a></li>
<li><a href="#">Screen Width</a></li>
<li><a href="#">Screen Height</a></li>
</ul>
<img src="http://www.files.maproom.org/00/18/0004.jpg"
alt="Isle of Wight" height="351" width="438">
</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|