Newbie XHTML question.

L

Larry Lindstrom

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.asp?filename=trycss_dim_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
 
J

John Hosking

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.
Click to expand...

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.
Click to expand...

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" />
Click to expand...

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.asp?filename=trycss_dim_height_percent

The code follows:
Click to expand...

....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.
Click to expand...

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.
Click to expand...

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
 
L

Larry Lindstrom

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.
Click to expand...

said:
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.
Click to expand...

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.
Click to expand...

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
 
D

dorayme

Larry Lindstrom said:
I'm starting .... XHTML ...
Click to expand...

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%}
Click to expand...
<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" />
Click to expand...
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.
Click to expand...


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

Larry Lindstrom

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.




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.
Click to expand...

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
 
M

Mel Smith

Larry said:

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
XHTML - how extend/create ELEMENT body in my DTD? 0
Stuck with html and css 25
Help with code 0
Help with my responsive home page 2
Align img inside nav tabs section 5
Flip-Cards with Local Images 1
Image not changing between "mute" & "un-mute" images. 5

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 203

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top