DOCTYPE / background-image madness!

Discussion in 'HTML' started by TC, Jul 24, 2006.

  1. TC

    TC Guest

    Hi folks

    I want to enhance my website to distinguish "external" hyperlinks from
    "internal" ones.

    With that aim, I've written the following two small files for testing
    purposes:

    C:\styles.css:

    .extlink {
    background: url(http://tc2.atspace.com/extlink.gif) no-repeat
    right middle;
    padding-right: 12px; }

    C:\test.htm:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <LINK REL=StyleSheet HREF="styles.css" TYPE="text/css">
    </HEAD>
    <BODY>
    <A class=extlink href=zzz>WHATEVER</A>
    </BODY>
    </HTML>

    I want to open C:\test.htm directly from my hard disk, to see how the
    background image looks, before I change my actual website.

    Problems:

    (1) IE6 only displays the background image if I remove the DOCTYPE
    declaration. If I retain that declaration, it does not display that
    image, even though it still obeys the other aspects of the 'extlink'
    style. Adding or removing an IE6 "mark of the web" (MOTW) has no affect
    on this, one way or the other.

    (2) FireFox 1.5 does not display the image at all - with or without the
    DOCTYPE declaration.

    Questions:

    (1) Why does the DOCTYPE stop IE6 displaying the image?

    (2) Why doesn't FF display the image at all?

    (3) What should I do to resolve this, to enable local testing of the
    files on my hard disk?

    I realize that it will probably all work fine, when I copy all of the
    relevant files to my web host. But I want to know why it *doesn't* work
    fine when I run them locally on my PC. Generally I like to test my
    changes locally, before I copy them to my web host.

    TIA,
    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #1
    1. Advertising

  2. TC

    Els Guest

    TC wrote:

    > .extlink {
    > background: url(http://tc2.atspace.com/extlink.gif) no-repeat
    > right middle;


    Make that right center.

    > padding-right: 12px; }
    > <A class=extlink href=zzz>WHATEVER</A>


    Make that <a class="extlink" href="zzz">WHATEVER</a>

    > I want to open C:\test.htm directly from my hard disk, to see how the
    > background image looks, before I change my actual website.
    >
    > Problems:
    >
    > (1) IE6 only displays the background image if I remove the DOCTYPE
    > declaration. If I retain that declaration, it does not display that
    > image, even though it still obeys the other aspects of the 'extlink'
    > style.


    Usually that means that you've done something wrong in the code, which
    IE will "forgive" if you have it in Quirksmode, since in Quirksmode it
    doesn't "have to" follow the W3C guidelines.

    Add the doctype, then *validate your code*, and fix the errors. If
    then still IE doesn't show your background, come asking and show an
    online example of what it is that's not working.

    > Adding or removing an IE6 "mark of the web" (MOTW) has no affect
    > on this, one way or the other.


    What *is* a mark of the web?

    > (2) FireFox 1.5 does not display the image at all - with or without the
    > DOCTYPE declaration.


    Firefox always wants to follow the W3C recommendations ;-)

    > Questions:
    >
    > (1) Why does the DOCTYPE stop IE6 displaying the image?


    Probably cause your code wasn't good.

    > (2) Why doesn't FF display the image at all?


    See above.

    > (3) What should I do to resolve this, to enable local testing of the
    > files on my hard disk?


    Make your code good.

    > I realize that it will probably all work fine, when I copy all of the
    > relevant files to my web host. But I want to know why it *doesn't* work
    > fine when I run them locally on my PC. Generally I like to test my
    > changes locally, before I copy them to my web host.


    Good thinking.
    However, if you use a file locally and have the href as
    file:///C:/blabla, then it will work locally, but not after uploading.
    To prevent mishaps like that, you could think of installing a
    webserver locally as well. Apache is free :)

    --
    Els http://locusmeus.com/
     
    Els, Jul 24, 2006
    #2
    1. Advertising

  3. TC

    TC Guest

    TC, Jul 24, 2006
    #3
  4. TC

    Els Guest

    TC wrote:

    > TC wrote:
    >
    >> .extlink {
    >> background: url(http://tc2.atspace.com/extlink.gif) no-repeat

    >
    > PS. ATSPACE disallows hotlinking to images on their server from outside
    > their server. So if you click the link above, it fails with an error.


    You're sure? I did click it, and saw a nice little external link
    image. I think you mean that it will fail if there is a non-atspace
    referer, which would be the case when calling it from a page, combined
    with a browser that doesn't block the referer.

    > But I've repeated the whole process using the following (freely
    > linkable) image: http://i.microsoft.com/h/en-us/i/msnlogo.gif The
    > result was identical.


    :)

    --
    Els http://locusmeus.com/
     
    Els, Jul 24, 2006
    #4
  5. TC

    JP. Baker Guest

    In article <>,
    TC <> wrote:
    >C:\styles.css:
    >
    > .extlink {
    > background: url(http://tc2.atspace.com/extlink.gif) no-repeat
    >right middle;


    right center;

    > padding-right: 12px; }
    >
    >Questions:
    >
    >(1) Why does the DOCTYPE stop IE6 displaying the image?


    Presumably it allows this bug in non-standards mode.

    >(2) Why doesn't FF display the image at all?


    Because it _should_ ignore the whole rule if there an error.

    >(3) What should I do to resolve this, to enable local testing of the
    >files on my hard disk?


    Correct the CSS. In Firefox 1.5 the errors are shown in the Javascript
    Console (Tools/ Javascript Console) - to be renamed Error Console in
    Firefox 2 as it shows other errors.

    John
    --
    John P Baker
     
    JP. Baker, Jul 24, 2006
    #5
  6. TC

    TC Guest

    Els wrote:
    > TC wrote:


    > > Problems:
    > >
    > > (1) IE6 only displays the background image if I remove the DOCTYPE
    > > declaration. If I retain that declaration, it does not display that
    > > image, even though it still obeys the other aspects of the 'extlink'
    > > style.

    >
    > Usually that means that you've done something wrong in the code, which
    > IE will "forgive" if you have it in Quirksmode, since in Quirksmode it
    > doesn't "have to" follow the W3C guidelines.
    >
    > Add the doctype, then *validate your code*, and fix the errors. If
    > then still IE doesn't show your background, come asking and show an
    > online example of what it is that's not working.


    Yes, good idea to validate first. I'll try that now. But I suspect that
    there is no point putting an example online - it will almost certainly
    *work* online :)


    > > Adding or removing an IE6 "mark of the web" (MOTW) has no affect
    > > on this, one way or the other.

    >
    > What *is* a mark of the web?


    IE executes local files (C:/blah.test) under the security restrictions
    of the Local zone. In days gone by, the Local zone had *less*
    restrictions than the Internet zone. So local files were *more capable*
    than remote ones. Now days, the Local zone has *more* restrictions than
    the Internet zone, so local files are (by default) *less* capable than
    remote ones. This gves problems if you want to test your files locally
    - they'll have *less* capablity than when you put them on your server!

    The MOTW is a special HTML comment which, if included in an HTML file,
    says to IE: "execute this file under the security restrictions of the
    Internet zone, not the Local zone". This lets you test your files "as
    if" they were actually on the web. Despite what many people seem to
    think, the MOTW feature is not a security hole, of any descripton.

    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #6
  7. TC

    Els Guest

    TC wrote:

    > Yes, good idea to validate first. I'll try that now. But I suspect that
    > there is no point putting an example online - it will almost certainly
    > *work* online :)


    I don't see why. Really, if the doctype is what makes the difference,
    that proves it's not a misplaced image file or anything. So if it
    works locally without doctype, and not with a doctype, the same will
    be the case on the web.

    >>> Adding or removing an IE6 "mark of the web" (MOTW) has no affect
    >>> on this, one way or the other.

    >>
    >> What *is* a mark of the web?

    >
    > IE executes local files (C:/blah.test) under the security restrictions
    > of the Local zone. In days gone by, the Local zone had *less*
    > restrictions than the Internet zone. So local files were *more capable*
    > than remote ones. Now days, the Local zone has *more* restrictions than
    > the Internet zone, so local files are (by default) *less* capable than
    > remote ones. This gves problems if you want to test your files locally
    > - they'll have *less* capablity than when you put them on your server!
    >
    > The MOTW is a special HTML comment which, if included in an HTML file,
    > says to IE: "execute this file under the security restrictions of the
    > Internet zone, not the Local zone". This lets you test your files "as
    > if" they were actually on the web. Despite what many people seem to
    > think, the MOTW feature is not a security hole, of any descripton.


    Never heard of it, and never had a problem with HTML files locally,
    even if I open them as local files instead of serving them as
    webpages. I suppose this only comes into play when using scripts and
    stuff, not plain HTML and CSS.

    --
    Els http://locusmeus.com/
     
    Els, Jul 24, 2006
    #7
  8. TC

    TC Guest

    TC wrote:
    > Els wrote:
    > > TC wrote:

    >
    > > > Problems:
    > > >
    > > > (1) IE6 only displays the background image if I remove the DOCTYPE
    > > > declaration. If I retain that declaration, it does not display that
    > > > image, even though it still obeys the other aspects of the 'extlink'
    > > > style.

    > >
    > > Usually that means that you've done something wrong in the code, which
    > > IE will "forgive" if you have it in Quirksmode, since in Quirksmode it
    > > doesn't "have to" follow the W3C guidelines.
    > >
    > > Add the doctype, then *validate your code*, and fix the errors. If
    > > then still IE doesn't show your background, come asking and show an
    > > online example of what it is that's not working.

    >
    > Yes, good idea to validate first. I'll try that now. But I suspect that
    > there is no point putting an example online - it will almost certainly
    > *work* online :)


    Ok, I just validated my file C:/test.htm at http://validator.w3.org/.
    It objected (rather obscurely) to the missing TITLE element. I added
    <TITLE>blah</TITLE> to the HEAD element, and now it validates as: "This
    Page Is Valid HTML 4.01 Transitional!".

    I re-checked what I said in my original post, and it is still the same.
    The DOCTYPE element stops the background mage from rendering when I run
    the HTML file from my hard disk :-(

    Any ideas why?

    TIA,
    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #8
  9. TC

    Els Guest

    TC wrote:

    >> Yes, good idea to validate first. I'll try that now. But I suspect that
    >> there is no point putting an example online - it will almost certainly
    >> *work* online :)

    >
    > Ok, I just validated my file C:/test.htm at http://validator.w3.org/.
    > It objected (rather obscurely) to the missing TITLE element. I added
    > <TITLE>blah</TITLE> to the HEAD element, and now it validates as: "This
    > Page Is Valid HTML 4.01 Transitional!".
    >
    > I re-checked what I said in my original post, and it is still the same.
    > The DOCTYPE element stops the background mage from rendering when I run
    > the HTML file from my hard disk :-(
    >
    > Any ideas why?


    Can you put the example online?

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Jul 24, 2006
    #9
  10. TC

    TC Guest

    Els wrote:
    > TC wrote:
    >
    > > Yes, good idea to validate first. I'll try that now. But I suspect that
    > > there is no point putting an example online - it will almost certainly
    > > *work* online :)

    >
    > I don't see why. Really, if the doctype is what makes the difference,
    > that proves it's not a misplaced image file or anything. So if it
    > works locally without doctype, and not with a doctype, the same will
    > be the case on the web.


    Ok. I could be wrong in that assumption. Now I will actually test it!
    If it still goes wrong when run from the web, I'll post an online URL
    here.


    > > The MOTW is (snip)


    > Never heard of it, and never had a problem with HTML files locally,
    > even if I open them as local files instead of serving them as
    > webpages. I suppose this only comes into play when using scripts and
    > stuff, not plain HTML and CSS.


    Yes, it's only relevant when IE thinks the page has "active content"
    (eg. scripts). In theory, the MOTW should just suppress the prompt that
    IE issues to ask the user if he wants to run that content. But in
    practice, I've found some cases where including an MOTW (to suppress
    that prompt), does *not* produce the same effect as excludng it &
    replying "yes" to the prompt.

    There's lots of usenet comment on "mark of the web" or MOTW.

    Cheers,
    TC (MVP MSAccess)
    http://tc.atspace.com
     
    TC, Jul 24, 2006
    #10
  11. TC

    TC Guest

    JP. Baker wrote:
    > In article <>,
    > TC <> wrote:
    > >C:\styles.css:
    > >
    > > .extlink {
    > > background: url(http://tc2.atspace.com/extlink.gif) no-repeat right middle;

    >
    > right center;


    Right ** ON ** !

    Thanks - that was the problem. It now works fine in IE6 and FF1.5. I
    double-checked, but couldn't see it for looking!

    I've answered nearly 10,000 usenet questions myself, mainly regarding
    MS Access, over the past 12+ years or so. It's really good to get an
    answer to one of my own problems! What an amazing resource, is usenet.

    Thanks to you & Els,

    Cheers,
    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #11
  12. TC

    TC Guest

    Els wrote:

    > Can you put the example online?


    Resolved per other post. Thanks for your help :) Yea usenet!

    Cheers,
    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #12
  13. TC

    Els Guest

    TC wrote:

    > JP. Baker wrote:
    >> In article <>,
    >> TC <> wrote:
    >>>C:\styles.css:
    >>>
    >>> .extlink {
    >>> background: url(http://tc2.atspace.com/extlink.gif) no-repeat right middle;

    >>
    >> right center;

    >
    > Right ** ON ** !


    That's what I said - very first line in first reply. I'm surprised it
    got past the validator. Or maybe you only validated the HTML... ?

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Jul 24, 2006
    #13
  14. TC

    TC Guest

    Els wrote:
    > TC wrote:
    >
    > > .extlink {
    > > background: url(http://tc2.atspace.com/extlink.gif) no-repeat
    > > right middle;

    >
    > Make that right center.


    Els, I just realized, that I ignored your suggestion (above) because I
    thought (when I read it) that you were just suggesting a cosmetic
    change. (Ie. "it would look better centered, instead of where you
    currently have it".)

    I didn't see that you had noticed that my syntax was wrong. The other
    responded said the same thing. But you saw it first! Thanks again,

    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #14
  15. TC

    TC Guest

    Els wrote:


    > That's what I said - very first line in first reply. I'm surprised it
    > got past the validator. Or maybe you only validated the HTML... ?


    Yes. I just realized that, & replied above accordingly :)

    Maybe the w3c html validator does not validate the referenced css? I'll
    try validating the original error with a css validator & post back
    here.

    Cheers,
    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #15
  16. TC

    TC Guest

    TC wrote:
    > Els wrote:
    >
    >
    > > That's what I said - very first line in first reply. I'm surprised it
    > > got past the validator. Or maybe you only validated the HTML... ?

    >
    > Yes. I just realized that, & replied above accordingly :)
    >
    > Maybe the w3c html validator does not validate the referenced css? I'll
    > try validating the original error with a css validator & post back here.


    Geez I'm being enormously slow on the uptake here! :-((

    You said, maybe I only validated the HTML !!

    Exactamundo.

    I just validated the orgnal (bad) CSS at
    http://jigsaw.w3.org/css-validator . It said:

    "Invalid number : background Too many values or values are not
    recognized : url(http://i.microsoft.com/h/en-us/i/msnlogo.gif)
    no-repeat right middle"

    Q.E.D. :)

    Cheers,
    TC (MVP MSAccess)
    http://tc2.atspace.com
     
    TC, Jul 24, 2006
    #16
  17. TC

    Els Guest

    Els, Jul 24, 2006
    #17
  18. TC wrote:
    > Els wrote:
    >> TC wrote:

    >
    >>> Problems:
    >>>
    >>> (1) IE6 only displays the background image if I remove the DOCTYPE
    >>> declaration. If I retain that declaration, it does not display that
    >>> image, even though it still obeys the other aspects of the 'extlink'
    >>> style.

    >> Usually that means that you've done something wrong in the code, which
    >> IE will "forgive" if you have it in Quirksmode, since in Quirksmode it
    >> doesn't "have to" follow the W3C guidelines.
    >>
    >> Add the doctype, then *validate your code*, and fix the errors. If
    >> then still IE doesn't show your background, come asking and show an
    >> online example of what it is that's not working.

    >
    > Yes, good idea to validate first. I'll try that now. But I suspect that
    > there is no point putting an example online - it will almost certainly
    > *work* online :)
    >
    >
    >>> Adding or removing an IE6 "mark of the web" (MOTW) has no affect
    >>> on this, one way or the other.

    >> What *is* a mark of the web?

    >
    > IE executes local files (C:/blah.test) under the security restrictions
    > of the Local zone.


    When I load a on my hard drive into IE as a file without using http, the
    security level indicator shows "My Computer", not Local zone.

    > In days gone by, the Local zone had *less*
    > restrictions than the Internet zone. So local files were *more capable*
    > than remote ones. Now days, the Local zone has *more* restrictions than
    > the Internet zone, so local files are (by default) *less* capable than
    > remote ones.


    Oh? I've observed the opposite, and this would make no sense, the whole
    point being that you trust your own resources more than you trust other
    people's.

    I think you may be misinterpreting the situation. The current security
    level is based on the page currently in your browser. If the page in
    your browser is external, a higher security level applies. A *link* is
    subject to fewer restrictions (if any at all) than a *link* to a local
    file, the whole point being that if an external page is trying to get
    you to click a link to your own files, it might be because it's trying
    to cause trouble.
     
    Harlan Messinger, Jul 24, 2006
    #18
  19. TC

    Ed Mullen Guest

    Ed Mullen, Jul 24, 2006
    #19
  20. "Ed Mullen" <> wrote in message
    news:...
    > Els wrote:
    >
    > >
    > > What *is* a mark of the web?
    > >

    >
    > http://msdn.microsoft.com/workshop/author/dhtml/overview/motw.asp
    >


    Interesting. I've seen those type of lines, primarily when emailing files
    from an IE environment at work to my Firefox-based environment at home. I've
    just deleted them.

    Never heard of the term "mark of the web" before though.

    --
    Richard
     
    Richard Rundle, Jul 24, 2006
    #20
    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. jc
    Replies:
    3
    Views:
    1,736
  2. jc
    Replies:
    1
    Views:
    1,373
    Neredbojias
    Mar 19, 2008
  3. Marius Horak

    Madness, I call it madness

    Marius Horak, Jun 4, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    161
    Raterus
    Jun 4, 2004
  4. Dj Frenzy
    Replies:
    3
    Views:
    314
    Robert
    Feb 10, 2004
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,308
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page