Newbie XHTML question.

09-16-2009

Hi Folks:

Learning HTML with current Firefox running on XP Pro, served by
current Apache running on current OpenSolaris.

I wrote some CGI and Javascript, in C++ for Solaris in the last
century, and haven't done anything with it since. So I'm a newbie
working through w3schools html stuff.

I've decided to try for the XHTML standard, I don't have a big
toolbox full of HTML code that I written, and need to bring into new
projects.

I'm starting all of my XHTML with:

----------

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>
Whatever....:
</title>
</head>

----------

Of course, the head section has other things individual examples
use, like styles

I've started using XHTML with the CSS tutorials after finishing the
HTML Basic and Advanced part of the course.

It's been going well, and when things don't work I can use W3C's
validate to find a problem, and the validation comes up clean on
debugged XHTML.

But I've come upon w3schools CSS dimension tutorial, and I'm
stumped.

I'll use the second dimension example, because that's short. It's
at:

http://www.w3schools.com/css/tryit.a...height_percent

The code follows:

----------------

<html>
<head>
<style type="text/css">
img.normal {height:auto}
img.big {height:50%}
img.small {height:10%}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" /><br />
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>

----------------

This example works as expected, using w3schools "Tryit Editor,
There are 3 logos displayed in the right pain, One is "normal" size,
one is half the height of the pain, and one looks like it's 10% of the
pain's height.

But the code I've built, under my XHTML DOCTYPE, shows all of the
images the same size.

If I copy my DOCTYPE clause, <html xmlns... , and meta element into
the source at the Tryit Editor, this causes the images all show at the
same size. So defining this as XHTML instead of HTML seems to be
enough to break it.

I copy the modified HTML from my Windows PC to www/.../htdocs on my
Solaris PC running Apache, change the image src to an image on that
machine, add "alt" to the img elements and try it.

The 3 images are the same size.

The page validates. Here it is.

-----------------

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
CSS Dimension Problem
</title>
<style type="text/css">
img.normal {height:auto}
img.big {height:50%}
img.small {height:10%}
</style>
</head>

<body>
<div>
<img class="normal" src="../../images/002.jpg" width="95" height="84"
alt="Yikes" /><br />
<img class="big" src="../../images/002.jpg" width="95" height="84"
alt="Yikes" /><br />
<img class="small" src="../../images/002.jpg" width="95" height="84"
alt="Yikes" />
</div>
</body>
</html>

-----------------

What am I doing wrong?

Thanks
Larry

09-16-2009

On Wed, 16 Sep 2009 05:34:57 -0700 (PDT), Larry Lindstrom wrote:

> Learning HTML with current Firefox running on XP Pro, served by
> current Apache running on current OpenSolaris.
>
> I wrote some CGI and Javascript, in C++ for Solaris in the last
> century, and haven't done anything with it since. So I'm a newbie
> working through w3schools html stuff.

Be aware that the W3Schools site is not a reliable source for all you
information. Knowledgable people bemoan its errors here regularly. I don't
have any errors to point to, but I tend to point people to HTMLDog instead
of W3Schools. Note also that there's no connection to the W3C; it's a
completely separate organization.

>
> I've decided to try for the XHTML standard, I don't have a big
> toolbox full of HTML code that I written, and need to bring into new
> projects.

I don't know what good XHTML will do you. I still recommend HTML 4.01
strict. Use all lowercase element names and attributes, explicitly close
all elements as appropriate, and serve as text/html as usual.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

>
> I'm starting all of my XHTML with:
>
> ----------
>
> <!DOCTYPE html PUBLIC
> "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Q.: What's XHTML about the above line?
A.: Not much (mostly the closing />). One of your first steps in producing
XHTML is an attempt to tell the browser "HTML, not XHTML". Of course, your
server's content type will override this string in your page.

>
> I'll use the second dimension example, because that's short. It's at:
>
> http://www.w3schools.com/css/tryit.a...height_percent
>
> The code follows:

....but needn't, as you've provided the URL.

>
> This example works as expected, using w3schools "Tryit Editor,
> There are 3 logos displayed in the right pain, One is "normal" size,
> one is half the height of the pain, and one looks like it's 10% of the
> pain's height.
>
> But the code I've built, under my XHTML DOCTYPE, shows all of the
> images the same size.
>
> If I copy my DOCTYPE clause, <html xmlns... , and meta element into
> the source at the Tryit Editor, this causes the images all show at the
> same size. So defining this as XHTML instead of HTML seems to be
> enough to break it.

Actually, I think it's a question of Quirks Mode vs. other modes. I think
you'll get the same results if you use a doctype for HTML 4.01 strict. The
W3Schools site has completely omitted any doctype, so it's counting on or
aiming for quirks mode. The markup purports to be XHTML, as noted by the
element closing delimiters, but it's being served as Content-Type:
text/html.

I don't know all the quirks of Quirks mode, but maybe you'll get different
results in different browsers. Which have you tried? Compare with the UAs
on the table at http://hsivonen.iki.fi/doctype/ for your chosen doctype.

I suspect the problem is because in standards mode, the height of your
enclosing <div> is not defined itself (it appears to get calculated as 2x
your img.big, which you've said is 50%). Maybe somebody else can help you
more.

>
> I copy the modified HTML from my Windows PC to www/.../htdocs on my
> Solaris PC running Apache, change the image src to an image on that
> machine, add "alt" to the img elements and try it.
>
> The 3 images are the same size.
>
> The page validates. Here it is.
>

Since I don't see the exact problem and you've got a server and folks here
prefer a link to a page rather than posted code, maybe you could post a URL
to your attempt. It'd make it easier than fighting against the W3Schools'
frames page.

HTH

--
John

09-16-2009

On Sep 16, 8:17*am, John Hosking <john-n...@bluemail.ch> wrote:
> On Wed, 16 Sep 2009 05:34:57 -0700 (PDT), Larry Lindstrom wrote:
> > * *Learning HTML with current Firefox running on XP Pro, served by
> > current Apache running on current OpenSolaris.
>
> > * *I wrote some CGI and Javascript, in C++ for Solaris in the last
> > century, and haven't done anything with it since. *So I'm a newbie
> > working through w3schools html stuff.
>
> Be aware that the W3Schools site is not a reliable source for all you
> information. Knowledgable people bemoan its errors here regularly. I don't
> have any errors to point to, but I tend to point people to HTMLDog instead
> of W3Schools. Note also that there's no connection to the W3C; it's a
> completely separate organization.

< Snip >

> Since I don't see the exact problem and you've got a server and folks here
> prefer a link to a page rather than posted code, maybe you could post a URL
> to your attempt. It'd make it easier than fighting against the W3Schools'
> frames page.

Thanks John:

Somehow, I'm guessing that you're not advocating that a newbie skip
HTML 4 and XHTML, and just start with HTML 5.

I believe HTML 4 strict validator complained about " /" in the <br /
> and <hr /> constructs. No big deal, I can live without it.

I think the best thing right now is to start over with HTMLDog's
tutorials. I've had some good exposure to the concepts and running
through them again should help me get a firmer grip.

I appreciate your taking the time to assist me.

Larry

09-17-2009

In article
<d8cd0e9c-377d-42ed-af89->,
Larry Lindstrom <> wrote:

> I'm starting .... XHTML ...
>

As John H says, probably best not to at this time. Not because it is too
advanced for you but because it is not as well supported as it should be
and so the advantages of it are largely lost given the current state of
browsers, mainly IE. Use 4.01 Strict for the foreseeable future.

> img.normal {height:auto}
> img.big {height:50%}
> img.small {height:10%}

> <img class="normal" src="logocss.gif" width="95" height="84" /><br />
> <img class="big" src="logocss.gif" width="95" height="84" /><br />
> <img class="small" src="logocss.gif" width="95" height="84" />

>
> This example works as expected, using w3schools "Tryit Editor,
> There are 3 logos displayed in the right pain, One is "normal" size,
> one is half the height of the pain, and one looks like it's 10% of the
> pain's height.
>
> But the code I've built, under my XHTML DOCTYPE, shows all of the
> images the same size.

In HTML 4.01 Strict, you cannot strictly have inline content loose in
BODY, the image element is an inline one. So let's enclose them in a
block element (eg. a DIV)

Take a look at:

<http://dorayme.netweaver.com.au/whatTrumps.html>

where some of the issues you have raised are explained to a level to get
you going perhaps. The % specifications you are expecting are tricky and
you need to understand a couple of things about what it is a % of.

Look at the above in different browsers.

What is it *exactly* that you want for your images? There are safewr
ways to make consistent looks across browsers.

--
dorayme

09-17-2009

On Sep 16, 6:26*pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <d8cd0e9c-377d-42ed-af89-14e3b34ba...@e34g2000vbm.googlegroups.com>,
> *Larry Lindstrom <larryl_tu...@hotmail.com> wrote:
>
> > I'm starting .... XHTML ...
>
> As John H says, probably best not to at this time. Not because it is too
> advanced for you but because it is not as well supported as it should be
> and so the advantages of it are largely lost given the current state of
> browsers, mainly IE. Use 4.01 Strict for the foreseeable future.
>
> > img.normal {height:auto}
> > img.big {height:50%}
> > img.small {height:10%}
> > <img class="normal" src="logocss.gif" width="95" height="84" /><br />
> > <img class="big" src="logocss.gif" width="95" height="84" /><br />
> > <img class="small" src="logocss.gif" width="95" height="84" />
>
> > * *This example works as expected, using w3schools "Tryit Editor,
> > There are 3 logos displayed in the right pain, One is "normal" size,
> > one is half the height of the pain, and one looks like it's 10% of the
> > pain's height.
>
> > * *But the code I've built, under my XHTML DOCTYPE, shows all of the
> > images the same size.
>
> In HTML 4.01 Strict, you cannot strictly have inline content loose in
> BODY, the image element is an inline one. So let's enclose them in a
> block element (eg. a DIV)
>
> Take a look at:
>
> <http://dorayme.netweaver.com.au/whatTrumps.html>
>
> where some of the issues you have raised are explained to a level to get
> you going perhaps. The % specifications you are expecting are tricky and
> you need to understand a couple of things about what it is a % of.
>
> Look at the above in different browsers.
>
> What is it *exactly* that you want for your images? There are safewr
> ways to make consistent looks across browsers.

Thanks dorayme:

I'm just trying to carefully go through the tutorials, and the
topic of this example happens to be image sizeing using CSS.

I'm a C++ programmer, long ago with Solaris and recently with
Windows. I'd like to become fluent in web design and XML, dust off my
Javascript skills. Ajax sounds interesting too.

As stated, I did some CGI scripting using C++ on Solaris 10 years
ago. Is CGI still a good tool to develop interactive sites?

I've been away from this arena for so long, I'm not sure where I'll
be going with it. I do have a preference for Unix centric, or
platform independent, development tools.

Any suggestions are appreciated.

Thanks for your assistance.

Larry

09-22-2009

Larry said:

> > I'm starting .... XHTML ...
I'm a C++ programmer, long ago with Solaris and recently with
Windows. I'd like to become fluent in web design and XML, dust off my
Javascript skills. Ajax sounds interesting too.

As stated, I did some CGI scripting using C++ on Solaris 10 years
ago. Is CGI still a good tool to develop interactive sites?

I've been away from this arena for so long, I'm not sure where I'll
be going with it. I do have a preference for Unix centric, or
platform independent, development tools.

Any suggestions are appreciated.

Larry:

I use a C-based language for CGI scripting ( i.e., the 'Harbour'
language --- www.xharbour.com or. www.harbour.org)

The Harbour language is compiled into C-code, then the C-code is
compiled into .obj files and those .obj files and many other libraries are
linked to provide a very powerful server language. I use my executable to
build, and serve pages to my clients (thru my Apache Server machine). I
have never used PHP -- the 'default' Server language.

The Harbour language can also accommodate inline C-code which you may
like

-Mel Smith

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PSD to XHTML Conversion, PSD to HTML, Joomla, Drupal, WordpressConversion, PSD to XHTML CSS	xhtml champs	XML	0	08-02-2011 05:40 AM
PSD to XHTML Conversion, PSD to HTML, Joomla, Drupal, WordpressConversion, PSD to XHTML CSS	xhtml champs	C Programming	0	08-01-2011 06:29 AM
convert xhtml to another xhtml using xslt	Usha2009	XML	0	12-20-2009 01:13 PM
Should I Convert Site To XHTML or XHTML mobile?	chronos3d	HTML	9	12-05-2006 04:46 PM
parse URL (href) from xhtml, xhtml -> text, for data	hawat.thufir@gmail.com	XML	7	02-08-2006 07:39 PM