DOCTYPE / background-image madness!

T

TC

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
 
E

Els

TC said:
.extlink {
background: url(http://tc2.atspace.com/extlink.gif) no-repeat
right middle;
Click to expand...

Make that right center.
padding-right: 12px; }
<A class=extlink href=zzz>WHATEVER</A>
Click to expand...

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

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

What *is* a mark of the web?
(2) FireFox 1.5 does not display the image at all - with or without the
DOCTYPE declaration.
Click to expand...

Firefox always wants to follow the W3C recommendations ;-)
Questions:

(1) Why does the DOCTYPE stop IE6 displaying the image?
Click to expand...

Probably cause your code wasn't good.
(2) Why doesn't FF display the image at all?
Click to expand...

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

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

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 :)
 
E

Els

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

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

:)
 
J

JP. Baker

C:\styles.css:

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

right center;
padding-right: 12px; }

Questions:

(1) Why does the DOCTYPE stop IE6 displaying the image?
Click to expand...

Presumably it allows this bug in non-standards mode.
(2) Why doesn't FF display the image at all?
Click to expand...

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

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
 
T

TC

Els said:
TC wrote:

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

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 :)

What *is* a mark of the web?
Click to expand...

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
 
E

Els

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

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

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

TC

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

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
 
E

Els

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

Can you put the example online?
 
T

TC

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

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.

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

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
 
T

TC

JP. Baker said:
right center;
Click to expand...

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
 
T

TC

Els said:
Make that right center.
Click to expand...

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
 
T

TC

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

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
 
T

TC

TC said:
Els wrote:



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

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
 
H

Harlan Messinger

TC said:
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 :)



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

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

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.
 

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

Background image not showing up on html page 3
Code for background image in website? 3
I just want a background image 5
Image upload not working in browser 4
Having difficulty with the layout of these images / video for this web page 2
Image not changing between "mute" & "un-mute" images. 5
Flip-Cards with Local Images 1
HTML Aligning social media icons 2

Members online

No members online now.
Total: 38 (members: 0, guests: 38)
Robots: 196

Forum statistics

Threads
473,774
Messages
2,569,596
Members
45,143
Latest member
SterlingLa

Latest Threads

Top