473,765 Members | 1,977 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

DOCTYPE / background-image madness!

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.cs s" TYPE="text/css">
</HEAD>
<BODY>
<A class=extlink href=zzz>WHATEV ER</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

Jul 24 '06 #1
24 3781
Els
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>WHATEV ER</A>
Make that <a class="extlink" href="zzz">WHAT EVER</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/
Jul 24 '06 #2
TC

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

TC

Jul 24 '06 #3
Els
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/
Jul 24 '06 #4
TC

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

Jul 24 '06 #5
Els
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/
Jul 24 '06 #6
TC

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</TITLEto 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

Jul 24 '06 #7
In article <11************ **********@p79g 2000cwp.googleg roups.com>,
TC <gg************ *@spamgourmet.c omwrote:
>C:\styles.cs s:

.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
Jul 24 '06 #8
Els
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</TITLEto 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/
Jul 24 '06 #9
TC

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

Jul 24 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
4218
by: CJM | last post by:
I am building several (common) db-driven intranet sites (so I cant post URL), using a 3-frame layout; header, menu & main pages. The styling and some of the positioning is done via CSS. Up until yesterday, I had incomplete Doctypes in my pages: <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> But now I have the full/correct doctype for 4.01 transitional:
6
5168
by: Patrick | last post by:
Hi I am fairly new to CSS and the web.I am trying to build a site more to practice my skills than for the site itself. I have been focusing on CSS and try my best to make it work in I.E 6.0, Opera 7.23, Mozilla 1.4 and N.N. 7.1. My site was doing fine until i read i was supposed to keep everything validated so i entered a strict html 4.01 doctype with url following.My HTML validated fine. So i validated my CSS and beside a little...
3
3791
by: Alex | last post by:
I created a page ( http://www.ayida.net/benaglia/chi.html ) based on the example B of the fixed-width layout i found here: http://builder.com.com/5100-6371-5314471-2.html the layout needs this doctype to work properly both on IE and Firefox: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> otherwise on IE it won't center the layout on the page. unfortunatly the above mentioned...
5
4113
by: Hello | last post by:
Here problem is that in Mozilla the logo "The Website" will not pad from the edge. http://www.clickatus.com/test/ Also, when I put in loose DOCTYPE it blows the whole thing... Help... http://www.clickatus.com/test/1
34
4440
by: The Good Son | last post by:
I'm trying to get my head around a problem that has me baffled. The following element: #wrapper {border:1px solid #000;background:#fff;} Renders as expected when using this DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
3029
by: Martin Nadoll | last post by:
Hello, i am using Dreamweaver MX 2004 to develop my php and html-sites. Dreamweaver includes a doctype-definition when creating a new page, in my case: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Now i needed to make a table with 100% height to show the content vertical centered on my screen.
19
6475
by: Edward | last post by:
Why is it when I have a DOCTYPE line in my HTML then "margin" and "padding" are ignored? This happens in both inline and stylesheet styles. It happens for both XHTML and HTML doctypes. It happens in IE6, IE7 and Firefox (didn't try any others). And when you save the page, the margin/paddings are actually REMOVED from the saved HTML file (!). Why is this?
0
3212
by: =?Utf-8?B?SGFyZHkgV2FuZw==?= | last post by:
Hi all, I have a web form, and I want to use ModalPopupExtender from Ajax Toolkit. I am using IE 7.0 as browser, VS 2005 and Ajax and Ajax Tool Kit installed. Windows XP Pro. Now I have a very strange problem. With 2nd line of code (DOCTYPE), I can popup modal dialog in middle of screen, BUT all my styles are lost, including modal popup is ugly. If I remove DOCTYPE I can see all my styles, BUT modal
1
1409
by: MattB | last post by:
I haven't given much thought to DOCTYPE before. I have a vague idea of what it is and why it's there: to tell the browser what rules to follow when rendering the page. I have a ASP.net 1.1 application that has a little added JavaScript in it, but is by no means what I'd consider JavaScript intensive. It makes use of a stylesheet in fairly conservative ways and in general uses the html generated by VS.NET 2003. Now one of our clients...
14
3050
by: tader | last post by:
so i got script like that <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Drag and Drop</title> <style> #slater { display:block;
0
9568
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9399
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9957
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9835
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8832
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7379
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5423
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3924
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2806
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.