Newbie XHTML question.

Discussion in 'HTML' started by Larry Lindstrom, Sep 16, 2009.

  1. 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
    Larry Lindstrom, Sep 16, 2009
    #1
    1. Advertising

  2. Larry Lindstrom

    John Hosking Guest

    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.asp?filename=trycss_dim_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
    John Hosking, Sep 16, 2009
    #2
    1. Advertising

  3. On Sep 16, 8:17 am, John Hosking <> 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
    Larry Lindstrom, Sep 16, 2009
    #3
  4. Larry Lindstrom

    dorayme Guest

    In article
    <>,
    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
    dorayme, Sep 17, 2009
    #4
  5. On Sep 16, 6:26 pm, dorayme <> wrote:
    > In article
    > <>,
    >  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.


    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
    Larry Lindstrom, Sep 17, 2009
    #5
  6. Larry Lindstrom

    Mel Smith Guest

    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
    Mel Smith, Sep 22, 2009
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    7
    Views:
    885
  2. chronos3d
    Replies:
    9
    Views:
    776
    Andy Dingley
    Dec 5, 2006
  3. Usha2009
    Replies:
    0
    Views:
    1,133
    Usha2009
    Dec 20, 2009
  4. xhtml champs
    Replies:
    0
    Views:
    527
    xhtml champs
    Aug 1, 2011
  5. xhtml champs
    Replies:
    0
    Views:
    1,036
    xhtml champs
    Aug 2, 2011
Loading...

Share This Page