Click to See Complete Forum and Search --> : Change transitional to strict - img?


CarolW
01-29-2005, 11:00 PM
I am having difficulties, haha! This is my first day trying to change all my pages from HTML 4.01 Transitional to Strict.

I'll skip my sob story about learning to use HTML-kit, but I got a little help with it, and I have a start - hey,
found the preferences on the TOOLBAR, instead of the menu
bar! (took me most of the day to find that, so I could specify character set(utf-8) and also a bit of what I want to go into a new file.

Then the trouble started <g>. I copied what I thought might work as strict from my current file, and afer a time, discovered, by the process of elimination, that my img specifications caused HTML-kit's plugin, Tidy.exe, to
change my document trom strict to transitional. Uh, oh!

I haven't yet been able to determine just what in my current code (transitional) doesn't pass the "strict" test.

Here are two examples: first, what DID pass the "strict" test (this will be a template for my main pages):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us" dir="ltr">
<head>
<meta content="text/html; charset=utf-8" http-equiv=
"content-type">
<meta name="Author" content="Carol Whitney">
<link rev="made" href="mailto:cwhitney@islandnet.com">
<title>CW Main Page Template</title>
<meta name="description" content=

"Carol Whitney with Prancy the Cat, dogs Kwali and Kumbi, and Human Friends. Articles on dog-behavior,
calming signals, and their implications for caring for
dogs">

<meta name="keywords" content=
"Eye of doG, calming signals, observe dogs, dog-behavior,
dog training, clicker-training, dog photos, scenic photos">
<link rel="stylesheet" href="carolwstrict.css" type="text/css">
</head>
<body>

<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="photosfront.htm">Photos</a></li>
<li><a href="articles.htm">Articles</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="webinfo.htm">WebInfo</a></li>
<li><a href="guestbook.htm">Guestbook</a></li>
<li><a href="comments.htm">Feedback</a></li>
<li><a href="tests.htm">Tests</a></li>
<li><a href="sitemap.htm">SiteMap</a></li>
</ul>
</body>
</html>


I'll have to admit, though, that I cheated, because in fact,
my links aren't set up like that; they're all a single
list item, with non-break spaces between them, but I think,
as I mentioned somewhere yesterday, that would cause
problems for screen-readers. In effect, I did test them
with HTML-kit by using Tidy.exe on them, and it changed
things there, putting the most curious stuff (I couldn't
quite determine what it was, but it looked like pairs of
capital A's with spaces in-between, in place of the pairs
of "&nbsp;"s I had there.


Fortunately, though, I knew enough to cheat, so I stuck
those </li> end-tags in, as you see above, and I'll worry
about my preferred horizontal menu later, when I turn my
attention again to my external CSS file.


Here's the img code that causes HTML-kit to change my
document back to transitional:


<a href="index.htm"><img alt="Scene Seen" title="Scene Seen"
src="images/logos/cloghed.jpg" style="border: 0px; width:
90%; height: 100px;"></a>


It suddenly occurred to me that I thought I read somewhere,
sometime, something about mixing up images and links, so
perhaps referring to the W3C specs on links and anchors will
help me with that one.


But I thought maybe it was the embedded style information
that caused the problem, so I removed the link part of it,
and just left this:


<img alt="Scene Seen" title="Scene Seen" src="images/logos/
cloghed.jpg" style="border: 0px; width: 90%; height: 100px;
">


And STILL HTML-kit (Tidy) identified that as transitional.
Ouch! So then I took out the style information, and tried
this:


<img alt="Scene Seen" title="Scene Seen" src="images/logos/
cloghed.jpg">


And Tidy still identified that as transitional. Oh, maybe I
should take out the title? Argh! I tried it. Nope; no go;
Tidy still identified the document type as Transitional.


Does this mean that putting an image into a document forces
it out of being strict, so that it must be Transitional? I
didn't get the impression, from what I read at W3C, that
you can't put images into strict HTML 4.01 documents!

Help!

P.S. I've tried three times to use my Enter key to wrap code lines to prevent horizontal scrolling, and almost made it, but not quite - I mean, in this post, not in my code at home.

Sat, 29 Jan 2005 20:59:59

MstrBob
01-29-2005, 11:07 PM
Forget Tidy. I don't see any errors or depreceated elements or attributes in your text. It should pass the W3's markup validator just fine. The W3's checks agains the DTD so you'll know it's right. Forget Tidy, it's not always right. If it doesn't provide specific errors, you're fine.

And by the way, if you have a list of links and want to get them horizontal, here's what you can do:


ul {
list-style:none;
margin:0;
padding:0;
}
li {
display:inline;
}


or alternatively, for li, you can make the li's blocks and float them. You're choice.

CarolW
01-29-2005, 11:27 PM
Originally posted by MstrBob
Forget Tidy. I don't see any errors or depreceated elements or attributes in your text. It should pass the W3's markup validator just fine. The W3's checks agains the DTD so you'll know it's right. Forget Tidy, it's not always right. If it doesn't provide specific errors, you're fine.

And by the way, if you have a list of links and want to get them horizontal, here's what you can do:


ul {
list-style:none;
margin:0;
padding:0;
}
li {
display:inline;
}


or alternatively, for li, you can make the li's blocks and float them. You're choice.


OH, oh, OH! Light begins to dawn! I understand soem of your post! <hehe!>

Okay, Tidy.exe goes OUT THE WINDOWS! (lots of windows on my machine).

And I'll try the: display: inline; - WOW! I understand it!

Don't know why it didn't occur to me to validate my ver-beginning template file with W3C! Incredible. That's what disorientation will do <g>.

Now I have a feeling I really *will* get there!

I also have a feeling the work you're doing is going to help an awful lot of people, an awful lot, me being one of them.

Thanks so much, MstrBob!

(I don't quite understand the block stuff and float, but I think I sort of have the idea, so should be able to experiment with it (I'd use <div> </div> and (probably in my CSS file, "float" - correct? - I was going to say, right? but that gets confusing in this context - uh - float WHERE? I'd like a horizontal navigation bar centered; my current - transitional - code starts:

<div class="centerit">

so that makes a block, correct? and then I could - what, float the block? not sure how?

and of course it ends </div>

Sat, 29 Jan 2005 21:26:45

MstrBob
01-29-2005, 11:47 PM
With CSS you can control the display properties of elements. You can make any element block-level or inline. So, say we have five elements in an unordered list, navigation links.


<ul id="nav">
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
<li><a href="page.html">Link</a></li>
</ul>


But now you want to make a horizontal navigation bar across the page. So first, we take care of list styling:


#nav {
list-style:none;
padding:0;
margin:0;
width:100%;
}


And now to make it a horizontal bar:


#nav li {
display:block;
width:20%;
float:left;
margin:0;
text-align:center;
}


You see, we've set LI to be displayed as block-level, like a DIV. Now, we float them all so that they can coexist on the same line. But we need to provide a width for this floating. I use 20% here because there are five li's. Five times twenty equals 100%. Then we're just center the text for each LI. But let's go further.


#nav a {
display:block;
width:100%;
}


This is handy because it makes clicking the link easier. The hyperlink will now basically be the entire size of the LI, which means more space to click on. This makes navigating easier. We can even add in some asthetics:


#nav a:link, #nav a:visited {
background:#0099cc;
color:#fff;
text-decoration:none;
}
#nav a:hover, #nav a:active {
background:#006699;
color:#fff;
text-decoration:underline;
}


Voila. The display (http://www.w3.org/TR/CSS21/visuren.html#propdef-display) property is quite powerful and useful.

CarolW
01-30-2005, 12:32 AM
Dear MstrBob,

WOW! I'm saving this thread as a file, to review and study. 'm going to play with this stuff. Meantime, I want to say what I did in the last hour and ten minutes.

1) Edited my current transitional index.htm file, substituting the strict document-type header (which I simply copied from W3C; I am an accomplished parrot <g>) for the transitional header.

2) checked that with W3C Markup Validation Service.

hehe, lots of errors - but they were all of the same type!

<br>s where they are not allowed;
style information embedded in tags.

There wasn't a single other error!

Well, that made it easy to edit the page, so I did that, using NoteTab Pro, and the page validated! As strict!

Hoooooooooray!

Of course, when I then looked at it in my browser, there were some elements that weren't well-placed, but I think I'm learning enough about CSS (with the help of the CSS forum here) so I could place these elements, with some more learning, work and practice.

And then I get a notice you've posted again, and I find this huge treasure of a post, that will give me lots to work with, experiment with, and play with (work is play, play is work - same for dogs as for humans - well, when you're reTIRED, as I am <g>).

So it's time for me to reTIRE for the night; my dogs await me; but oh, I do so with great happiness, and confidence I'll go on learning, and really develop a control over the structure and appearance of my pages. I don't delude myself that it will be easy all the time, nor that it's a trivial editing job, but I see my way to continuing and continuing learning.

Above all, I'm really happy with my decision to change from transitional to strict, because I really do care about accessibility, and I always was a stickler of sorts!

More very grateful thanks to you! (I'll probably dream in HTML <g>).

Sat, 29 Jan 2005 22:30:33