PDA

View Full Version : .src = Problem.yes; Site not showing up, extentions and doctypes



PearlDoves
08-16-2006, 08:25 AM
#1) A couple people have said they can't access the webpage I worked on; they say that it doesn't work, yet the server is up and the page is working when look at from another computer/area.

#2) Cmotion script is used on the second page of this website.. when I started this project, I erased the doc type at the top just thinking it was some wierd jargin that my Adobe Golive made, but then started second guessing myself so I asked if I needed it in another forum, one guy was like: HECK YES! DON'T TOUCH THOSE TAGS and another person was like: Put it thru a checker and the DocType that gives you least errors is the one.. or something to that extent.. BUT ALL DocTypes give me errors, how am I suppose to know, and without the doc type almost everything comes out fine... Do I REALLY need it? Will my internet explode without it?

#3) What is the difference between html, htm and not having either of those at all. Uploading the index.html, it would not show the site, but said something like this server is not a list server, then I made it "index.htm" and it came up and everything was smooth sailing. And then when you start going throughout the site, or any site, you start to see things like: http://www.blahblah.com/blah.html .... BUT some sites are like: http://www.blahblah.com/blah ... why can they get away with that and I can't?

Are all 3 of these thing related some how that these people can't see this site? I mean I know some people haven't updated their browsers since almost 10 years ago and some people have javascript disabled and some work places have filters (which is why I'll probably put up a low bandwidth version now as well), but seriously, I'm frustrated, I'm tired, I've been working on this site for MONTHS, and I just want to be done. I don't know HTML, CSS, or JAVA much at all, just enough to move things around and manipulate, and that being with the help of others at times, so if you've read this far, that means that you probably are interested in helping me, and I greatly appreciated it!, but please know if you are going to help you need to type out exactly what it is if there is to be a change, and tell me exactly where it goes, otherwise I might be lost. Here is the site click here (http://www.rebeccakern.com)

blm126
08-16-2006, 01:36 PM
#1) A couple people have said they can't access the webpage I worked on; they say that it doesn't work, yet the server is up and the page is working when look at from another computer/area.
Tell them to check their computers I can see it.


#2) Cmotion script is used on the second page of this website.. when I started this project, I erased the doc type at the top just thinking it was some wierd jargin that my Adobe Golive made, but then started second guessing myself so I asked if I needed it in another forum, one guy was like: HECK YES! DON'T TOUCH THOSE TAGS and another person was like: Put it thru a checker and the DocType that gives you least errors is the one.. or something to that extent.. BUT ALL DocTypes give me errors, how am I suppose to know, and without the doc type almost everything comes out fine... Do I REALLY need it? Will my internet explode without it?

No it won't explode,but if at all possible it should be used. Use this one


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



#3) What is the difference between html, htm and not having either of those at all. Uploading the index.html, it would not show the site, but said something like this server is not a list server, then I made it "index.htm" and it came up and everything was smooth sailing. And then when you start going throughout the site, or any site, you start to see things like: http://www.blahblah.com/blah.html .... BUT some sites are like: http://www.blahblah.com/blah ... why can they get away with that and I can't?

It all has to do with the server configuration. If you are new to this don't mess with it.If you really want to reserch mime types. My advice is if the .htm extension is working don't screw with it :)

Twey
08-16-2006, 03:35 PM
#1) A couple people have said they can't access the webpage I worked on; they say that it doesn't work, yet the server is up and the page is working when look at from another computer/area.More likely, a different browser. Do you have a link for us?
#3) What is the difference between html, htm and not having either of those at all. Uploading the index.html, it would not show the site, but said something like this server is not a list server, then I made it "index.htm" and it came up and everything was smooth sailing. And then when you start going throughout the site, or any site, you start to see things like: http://www.blahblah.com/blah.html .... BUT some sites are like: http://www.blahblah.com/blah ... why can they get away with that and I can't?The file extension has nothing to do with the content of the file, but it will tell the server which Content-Type header to send by default. This can be changed by various mechanisms such as .htaccess or the server's configuration file.

mwinter
08-16-2006, 04:15 PM
#1) A couple people have said they can't access the webpage I worked on; they say that it doesn't work, yet the server is up and the page is working when look at from another computer/area.

It might just be a temporary problem; their network was congested, and so the connection timed out. It also might have been that at the time they checked, there were server problems that were since fixed. Either way, I can see no connectivity issues, so the problem probably is (or was) at their end.



when I started this project, I erased the doc type at the top just thinking it was some wierd jargin that my Adobe Golive made ...

It wasn't.



Put it thru a checker and the DocType that gives you least errors is the one.. or something to that extent..

That's definitely the wrong approach to take. The document type determines what elements and attributes can be used whilst keeping the document valid. Except in rare circumstances, all new documents should be written against the Strict document type, as this eliminates all of the presentational junk that was necessary around the turn of the century, but not longer (CSS should be used to control presentation).



BUT ALL DocTypes give me errors ...

Then your document is invalid, perhaps due to something fundamental like overlapping tags.



... without the doc type almost everything comes out fine

That's because browsers have been engineered over time to try and correct errors, rather than simply rejecting the document (though that is an option). However, error correction operates in different ways in different browsers, so relying upon it is not a good idea; documents should validate.



Do I REALLY need it?

Need it? No. Can you benefit from it? Yes. The document type declaration is used in modern browsers to determine how a document is rendered. This is known as DOCTYPE switching (or sniffing). Essentially (though it is more complicated than this), if the browser finds a document type declaration that contains both a public and system identifier (the quoted string starting "-//W3C//", and the quoted URL, respectively), it will switch into "Standards" mode. Here, the browser will attempt to render the document as closely to the relevant standards (like CSS) as it can, which facilitates more predictable rendering behaviour. The alternative is "Quirks" mode, where the browser intentionally exhibits bugs found (and since corrected) in previous versions, as documents that trigger Quirks mode usually rely on these bugs.



#3) What is the difference between html, htm and not having either of those at all.

Historically, the difference between .html and .htm stems from filesystems that use the antiquated 8.3 filename format (such as FAT as used in Windows 3.1). Because these couldn't use long filenames, including long extensions, "html" was truncated to "htm". Some people continue to use this shortened version, but there's frequently no need to any longer.

In a URL, the extension is irrelevant. It's simply considered to be part of the name and has no special significance (unlike within Windows). However, as Twey said, it can be used by the server to alter how it treats a file, such as passing it through filters or to handlers, or using it to select a MIME type.



Uploading the index.html, it would not show the site ...

Servers can be configured to use a particular file, or one of a set of files, if a directory is used for the request URL rather than a specific resource. For example, Microsoft's IIS uses default.htm, whereas Apache uses index.html. These can be changed by the server administrator, or even a Web developer (if given the appropriate permissions).



And then when you start going throughout the site, or any site, you start to see things like: http://www.blahblah.com/blah.html .... BUT some sites are like: http://www.blahblah.com/blah ... why can they get away with that and I can't?

Those sites have servers configured to make it possible. It's not that complicated, and there are a couple of ways to do it. In fact, it's actually a good idea as it allows you to use any technology you like (like PHP or plain HTML), but if you later change your mind, it's not necessary to start editing files to update links (or lose traffic from sites with outdated links).

I can explain it if you like, but it's probably not something you need to worry about.

Hope that helps,
Mike

PearlDoves
08-17-2006, 08:14 AM
Here is the rundown on what's been going on, which is generally still in the grey, but here it goes:

I tried the suggested doctype... as soon as I put that in, there are only a few syntex problems. I think most of those problems have to do with not setting an ALT in my img tags, which I don't think its anything to worry about. The images that scroll on the portfolio.html says that I need to list a height and width along with the alt, but the Cmotion script didn't include those to begin with, so would width and height really matter if its doing fine as is?

These two lines were flagged, but not sure if they need fixing or not, it came back as needing an end tag?
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="stylesheet" type="text/css" href="gallerystyle.css" >

I dunno, these validators all have different opionions I think, there might be a problem with one of the meta tags, one said that NOBR is not supported, for some reason and my Adobe GoLive flags "id" in red like something is wrong, and comes back saying "attribute 'id' not allowed" but again, some of this is all apart of the CMotion script, so I kinda give up here.


But here is the punch... I can put the Doctype to check for errors and whatnot, but ultimatly, I'm not going to be able to keep the doctype declariation. When I saved my portfolio.html with the declariation and up loaded it on the server the images that I have sliced are all messed up, it looks like a digital puzzel that got steped on or something. It may be an Adobe bug, I've had to work around one before by useing my text editor, but this time my text editor won't let me view just the html code, so thus my hands are tied right now. If you all want to have a go at the syntex, be my guest because right now, I'm willing to leave things as they are for the most part.


But Thank you everybody for your help, I am learning by all this, and I greatly appreicate your time on the matter.

Also, Mike, I would like to know more if its not too much trouble, I'd like to forward some of that info to a friend who hosts pages possibly, plus, I'd like to know for myself for the future should I ever need it... Whenever you can/feel like it, no rush, Thanks!

Twey
08-17-2006, 03:39 PM
I think most of those problems have to do with not setting an ALT in my img tags, which I don't think its anything to worry about.If it weren't something to worry about, the validator wouldn't have pointed it out.
so would width and height really matter if its doing fine as is?I've never seen that before, but if the validator says you need to do it, you almost certainly do.
These two lines were flagged, but not sure if they need fixing or not, it came back as needing an end tag?
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="stylesheet" type="text/css" href="gallerystyle.css" >Well, the first is pointless: your server should be sending the correct Content-Type header, which will override the meta tag. That error suggests that you're using XHTML. The suggested DOCTYPE was HTML4.01,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
one said that NOBR is not supportedIt probably isn't -- I'd think it had been deprecated by the CSS white-space: nowrap.
my Adobe GoLive flags "id" in red like something is wrong, and comes back saying "attribute 'id' not allowed"Ignore Adobe. Pay heed to the W3C validator.
When I saved my portfolio.html with the declariation and up loaded it on the server the images that I have sliced are all messed up, it looks like a digital puzzel that got steped on or something.Then you did something wrong whilst uploading it, if it didn't look like this locally. Use FTP in ASCII mode.
It may be an Adobe bug, I've had to work around one before by useing my text editor, but this time my text editor won't let me view just the html code, so thus my hands are tied right now.Then drop Adobe. What do you mean, your text editor won't let you view the HTML code? A text editor that can't open a text file? That's a bit useless, isn't it?

mwinter
08-17-2006, 05:35 PM
I think most of those problems have to do with not setting an ALT in my img tags, which I don't think its anything to worry about.

Maybe; maybe not. Have a read of some Usenet threads regarding alternative text and image galleries (http://groups.google.co.uk/groups/search?q=%22alt+%7C+alternative+%7C+replacement+text%22+gallery+group%3Acomp.infosystems.www.authoring.html+%7C+group%3Acomp.infosystems.www.authoring.site-design+%7C+group%3Aalt.html). The alt attribute is required, and its contents are useful to some people, even if you don't see it yourself.



The images that scroll on the portfolio.html says that I need to list a height and width along with the alt ...

Neither the height nor the width attribute is required, though both can help rendering behaviour as the browser will know how large each image is, eliminating the need to reflow the document. It's not that important, though.



These two lines were flagged, but not sure if they need fixing or not, it came back as needing an end tag?
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="stylesheet" type="text/css" href="gallerystyle.css" >

That would suggest that you are serving XHTML as HTML; that is, you've used an XHTML document type declaration. If that's the case, use HTML instead and ensure that you don't have any start-tags that end with "/>" (only ">"). I'd need to see the actual markup to be sure, though.



I dunno, these validators all have different opionions I think,

There are numerous validation services available, and some are better than others. However, a document is either valid or it isn't, and the W3C validator (http://validator.w3.org/) is probably as authoritative as validators get.



there might be a problem with one of the meta tags,

As I said, I'd need to see the complete markup. Upload a test page because I'm not getting the same error messages that you seem to be.



one said that NOBR is not supported,

The nobr element is not defined. It is a proprietary element, and not part of HTML 4.01. CSS provides the same functionality with the white-space property and the nowrap value.



for some reason and my Adobe GoLive flags "id" in red like something is wrong, and comes back saying "attribute 'id' not allowed" ...

Is this again related to the nobr element? I believe that the nobr element was introduced by Netscape at a time either before the id attribute was added to HTML, or before Netscape supported it. Either way, the element can be dropped in favour of CSS.



If you all want to have a go at the syntex, be my guest because right now, I'm willing to leave things as they are for the most part.

I might later on. It'll involve removing the tables completely as they really aren't necessary.

By the way, the contrast between the black background and the links and copyright notice seems a little low to me. I can see that it's there, but it's not that easy to read.



Also, Mike, I would like to know more if its not too much trouble,

Not at all. I just didn't want to bombard you with too much information, particularly if you weren't that interested.

There are two methods of implementing extension-less URLs that come to mind. The first uses Content-Type content negotiation.

The Apache Web server (and some similar servers) implement a feature called MultiViews. When an incoming request can't be found, the server looks for files with similar names; specifically, added extensions. These extensions can provide various information: language (English, Spanish, etc.); content type (HTML, PHP, JPEG); character encoding (UTF-8, ISO-8859-1); and, content encoding (Gzip, Compress). Using information sent by the browser, it then tries to find the best match.

For example, given a request for "foo", the server might find "foo.en.html" and "foo.fr.html". From the mod_mime module, it would know that both are text/html, and that the first is in English and the second is in French. As it has two languages to choose from, it would select whichever the browser says is preferred (a setting which the user can alter).

The same sort of thing can happen with content type, which is what we're interested in here, but we make the choice for the server simple: only supply one file. That is, when given a request for "foo", the server will only find "foo.html", or "foo.php".

The MultiViews feature is a per-directory option, enabled using the Options directive. It can either be controlled by the main server configuration, or using .htaccess files (assuming the server administrator hasn't revoked that permission):



Options +MultiViews

It should be noted that the server makes these negotiated choices early, so if one were to use a server-side language, it would consider the content type designated for those language files. Taking PHP as an example, it's often configured with the following directive:



AddType application/x-httpd-php .php

However, this can cause problems: if the user agent making a request don't include the */* wildcard in its Accept header (this states that the browser will accept anything), Apache will conclude that nothing is suitable to return to the browser, and return an error response (406 Not Acceptable).

The solution is to add PHP support (or any other server-side language) through the use of handlers. For example:



AddHandler php-script # PHP 4
AddHandler php5-script # PHP 5

The AddType directive can then be used to indicate what the PHP script will generate (such as text/html, or image/png). Obviously, that may change from script to script, so it may be necessary to separate scripts into directories by type; scripts that generate images in /images, for instance.


That moves neatly onto the second method: per-directory content types. As noted previously, content type is usually determined by file extension, so if we omitted an extension entirely, the server would either have to guess the type, or use a default (usually plain text; text/plain). However it's also possible to force the designated content type. In Apache, this is achieved using the ForceType directive, which is a per-directory setting. This can be used to state that everything in a given directory is, say, PSP (Python). The server then knows that it should hand the file off to the Python interpreter or, in the general case, it can set the Content-Type header properly.

This method is very simple. I can have files simply named "index" or "products", and use the forced content type to provide the extra information required. However, it's also limiting in that all files in the same directory must be the same type. This would mean, for instance, either separating static HTML files from dynamically generated ones, or accept the overhead of having a preprocessor pass over them unnecessarily looking for code that's never there. Still, it's workable and should be quite efficient.


Though I've only mentioned how this would work in Apache, it can be applied to other servers, too. I also realise that the above might be very difficult to absorb, but it's hard to demonstrate without being face-to-face. If you have a test server that you can play about with, it's easier to see how it works. I'm happy for you to ask about specific issues, and I'll try to explain them in more detail. However, first you might want to read the Apache documentation (http://httpd.apache.org/docs/), especially the user's guide on topics like content negotiation.



Thanks!

You're welcome. :)

Mike

PearlDoves
08-18-2006, 10:31 AM
http://www.doctor-html.com/RxHTML/
That was where I was doing some of my vailidating before. But I was also checking against the one you mentioned. I haven't uploaded what I've corrected so far (I added the alt to the images and took away the "/" for the link and meta tags), but I did upload the current errors using the checker you mentioned, this is where you can see my current errors, which are now only 10 with the W3C validator, but some I think 44 with the Doc HTML one, lol.

see errors here: ERROR ERROR (http://www.rebeccakern.com/check.html)

Image Ready and Golive seem to default to XHTML, so even though I hadn't that declaration, what it generates seems to still be XHTML related.. taking out thte "/" at the end of the meta and link tags did allow it to pass thru the validator, but if I seriously don't need this: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > I'll be willing to take it out, its just what Image ready conjured up when it wrote the code for my image slices and such.

So yea, my text editor.. When I open up my file in it, it shows up like a webpage in a browser would pretty much, which I thought was strange. SO then I copy and pasted the code, saved it as HTML and when I uploaded it and check it out in a browser, I saw text, lol, so I don't know anymore.

But even if I am able to just get the syntax right without the doc declaration (since the doc declaration alone seems to be messing everything up, but it could also be a bug that works itself out once all the syntax is correct.. I'm hopeful) is that still better than nothing? Or do browsers not care unless you have the declaration spelled out for them?


Mike, I dunno if I'll know what to do if you take away the tables, lol, (because its easy to update due to the code that spits out of the programs). But at the very least it'll be a good lesson in CSS.

But in a nutshell the probs seem to be coming from NOBR ID and the body tag, and I don't know how to manipulate code to make it work. But part of me wonders if this is being flagged because the validator isn't taking into consideration the external files that go with the Dynamic Drive CMotion script? I know one of those files is Java and I think the other is CSS related... but you guys would know better than me.


By the way, the contrast between the black background and the links and copyright notice seems a little low to me. I can see that it's there, but it's not that easy to read.

AHHHHHH! NOOOOO! lol, I've seen this problem before though, at another location, it had to do with monitor adjusting. PC monitors and TV's seem to have a gamma at 2.2 (darker) while others are at 1.8. But even when I turned down my monitor brightness all the way and put the gamma at 2.2, I could still see things okay (though dimmer and darker in contrast) But it sounds like you need to up your brightness and mess with your contrast a bit, because the background color should look like a darker (yet reasonably colorful) blue #000034. If you have a tube monitor, it could slowly die like a TV which means a need for uping brightness and messing with contrast, or it could just be turned down in general. See if that helps, let me know. I'd hate to see you miss out on a colorful internet world :)

Thanks again Everybody, I appreciate all this a lot.

mwinter
08-19-2006, 12:02 AM
http://www.doctor-html.com/RxHTML/

I sincerely hope you didn't pay for that. Some of its information is misleading, and I wouldn't suggest that you use it.



But I was also checking against the one you mentioned.

Sorry about the broken link, by the way. I think I missed a closing square bracket (it's been fixed).



see errors here: ERROR ERROR (http://www.rebeccakern.com/check.html)

The first two paragraphs in the explanation of the first error give a fairly good overview of errors 1-9, including why an id attribute (which is available for almost all HTML elements) is flagged as invalid. The attributes that were flagged are either presentational and should be replaced by CSS, or were never part of HTML in the first place (for example, marginheight, which is proprietary).

The body attributes can be replaced by the following CSS rule:



body {
background: #000034;
color: #rrggbb;
margin: 0;
padding: 0; /* Some browsers use padding, not margins, for the body element. */
}

The color property is incomplete, but would take the value of that lighter blue (as it's anti-aliased, I'll leave the real [rather than apparent] colour to you).

The height attribute on the table is a problem because tables have never had an explicit height: it has been computed as a sum of each row height. A height property can be applied via CSS, but if the heights don't match, it's undefined how the space is distributed. Still, you can do it if you want.

Rather than placing a border attribute on every image within an anchor, you can use:



a:link img {
border: none;
}

Similarly, to keep that border for images within the gallery:



#motiongallery a:link img {
border: 1px solid;
}


The width attribute on table cells can be replaced by the width property in CSS. Alternatively, you could use columns (col elements). However, I wonder whether you need it at all for that lone cell.



Image Ready and Golive seem to default to XHTML ...

Yes, it's an unfortunate trend in editors. There's no problem in using XHTML in server-side processes (it can be useful for content management), but it's pointless for serving to clients: they don't process it as XHTML so any potential benefits are lost.



... if I seriously don't need this: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > I'll be willing to take it out

Technically yes, technically no. By default, text media types sent without a character set parameter should be processed as ISO-8859-1 (Latin-1). However, most browsers are configured to assume some other value (often Windows-1252). As a result, an explicit character set should be sent.

That said, you still shouldn't use a meta element, but actually configure the server to send it as part of the HTTP headers that begin the response. My IIS documentation is broken, so I'm afraid I can't tell you how do this for your site. If no-one else knows, you could try asking the server provider. The administrator might have to make the change, anyway.



So yea, my text editor.. When I open up my file in it, it shows up like a webpage in a browser would pretty much, which I thought was strange.

It certainly is. An odd (and slightly patronising; sorry) question: are you sure you used a text editor, rather than a word processor or some Web development-specific software? At most, text editors provide syntax highlighting or visual cues like bracket matching, but not fullblown rendering.



[Regarding document type declarations] ... do browsers not care unless you have the declaration spelled out for them?

As I mentioned in a previous post, the document type declaration is used by many modern browsers solely to switch to standard-compliant rendering. This is usually desirable because the CSS Specification provides rules that define precisely how a browser should respond to a particular CSS property value. There are of course problems with implementation bugs (MSIE being the worst recent browser), but there are usually workarounds.

It's not something that's necessary, but it does tend to make life a little easier.



Mike, I dunno if I'll know what to do if you take away the tables, lol, (because its easy to update due to the code that spits out of the programs).

Heh. :) They are a pain to manage by hand though, and to problem-shoot (at least when you get confronted with nested tables to the sixth degree, and other silliness).



But at the very least it'll be a good lesson in CSS.

Hopefully. I should get it done this weekend. The only thing that's putting me off is fiddling with the decorative images (I'll be aiming to convert most of the content to pure text, but keeping the same look).



But in a nutshell the probs seem to be coming from NOBR ID and the body tag, and I don't know how to manipulate code to make it work.

Maybe the above will help nudge you in the right direction. Ask, though, if you'd like a stronger push.



But part of me wonders if this is being flagged because the validator isn't taking into consideration the external files that go with the Dynamic Drive CMotion script?

No, that's not it.



I know one of those files is Java

Javascript. There's a (big) difference.



and I think the other is CSS related...

The style sheet is included via the link element, and there's no problem with that apart from the trailing slash you removed.



AHHHHHH! NOOOOO! lol, I've seen this problem before though, at another location, it had to do with monitor adjusting.

Yes, monitor calibration is a pain. I have recalibrated mine visually (just for you :p) and it's better, but I'd still prefer it to be ever so slightly brighter. It's not my decision, though.



But it sounds like you need to up your brightness and mess with your contrast a bit,

Actually, I had the ramp the gamma slightly.



because the background color should look like a darker (yet reasonably colorful) blue #000034.

I could see that today as there was a thunderstorm overhead and less ambient light, but I couldn't yesterday.



If you have a tube monitor, it could slowly die like a TV ...

I know, but...eek! Don't say things like that. This CRT isn't that old!



I'd hate to see you miss out on a colorful internet world

The problem I've always had with monitor calibration is conflicting advice about the right targets (I'm not a graphics person, so I listen to others who should know better) and the inevitable mixed results: colours look great in some cases, but washed out or subdued in others. Things seem to be going well at the moment, though.

However, you have to consider that the average user won't have calibrated their display (or even know that they should), and so they might still be in the same boat. Also, simple colour analysis (http://www.snook.ca/technical/colour_contrast/colour.html) does put the contrast under the recommended limits.

Out of idle curiosity, what have you set the colour temperature of your display to? The only advice that I didn't follow was to set it to 6500K. Though my eyes did adjust to the apparent yellow tint after a few minutes, it still seemed a little strange. And besides, I like blue (9300K). :)



Thanks again Everybody, I appreciate all this a lot.

You're welcome! Again. :rolleyes: Haha.

Mike

PearlDoves
08-19-2006, 04:13 AM
I sincerely hope you didn't pay for that. Some of its information is misleading, and I wouldn't suggest that you use it.

Nah, I did no such thing, I think anybody can use it.



The body attributes can be replaced by the following CSS rule:



body {
background: #000034;
color: #rrggbb;
margin: 0;
padding: 0; /* Some browsers use padding, not margins, for the body element. */
}

The color property is incomplete, but would take the value of that lighter blue (as it's anti-aliased, I'll leave the real [rather than apparent] colour to you).
The height attribute on the table is a problem because tables have never had an explicit height: it has been computed as a sum of each row height. A height property can be applied via CSS, but if the heights don't match, it's undefined how the space is distributed. Still, you can do it if you want.

I have to be honest and say i think I'm getting over my head here, I don't understand this, its confusing to me, but for whatever reason I can make sense of what I have for the webpage right now, which is important to me for the sake of control and updating.

I don't know the difference between real and apparent colour. I also don't know if this part of the CSS will work with the script I got because I still need the JS to work. A while ago, in another forum, the roll overs and the motion container did not work together so I was told to change my body tag to include: onload="preloadImages();fillup();" and take (what I think was) the fillup out of the external JS. Then it worked. So does that need to be included somehow? I have no clue as to how it would be written



Rather than placing a border attribute on every image within an anchor, you can use:



a:link img {
border: none;
}

Similarly, to keep that border for images within the gallery:



#motiongallery a:link img {
border: 1px solid;
}


The width attribute on table cells can be replaced by the width property in CSS. Alternatively, you could use columns (col elements). However, I wonder whether you need it at all for that lone cell.

Well I'm not sure if this will keep a permanent border? Right now the border changes on mouseover, which is what I like about it, makes it seem more interactive. I remember seeing a CSS with borders and such in the external file. Again I'm over my head here. Not sure where would I add it and what that exsist would I delete?




It certainly is. An odd (and slightly patronising; sorry) question: are you sure you used a text editor, rather than a word processor or some Web development-specific software? At most, text editors provide syntax highlighting or visual cues like bracket matching, but not fullblown rendering.

Well the thing is called "textedit" so who knows, its the one that came with the computer, maybe I should look into another. But it was useful when I need to change stuff in the external JS



Hopefully. I should get it done this weekend. The only thing that's putting me off is fiddling with the decorative images (I'll be aiming to convert most of the content to pure text, but keeping the same look).

Oh my! You don't have to do all that. Like I said, I can probably eventually learn from it should I try to learn this stuff, but ultimately I'll probably be going with what I have for now aside from the errors I've been able to straighten out thus far from your help. Right now a lot of this scripting is somewhat intimidating, that and I've been working for months on what I have so far, I have to admit, I'm a bit burnt out and need to get away from it for a while.




The style sheet is included via the link element, and there's no problem with that apart from the trailing slash you removed.

Are you saying I need to put the "/" back in the link tag?




Out of idle curiosity, what have you set the colour temperature of your display to? The only advice that I didn't follow was to set it to 6500K. Though my eyes did adjust to the apparent yellow tint after a few minutes, it still seemed a little strange. And besides, I like blue (9300K). :)

Well I can't figure out what my current temperature is, but when I start going thru a calibration it says Target White = 6507 (degree) K but this I think is a little brighter than what I have right now, I'm not an expert on this, lol. But I do like white light.. things to look as close as they can in real life I guess you could say, so I have an aesthetic towards that which is probably a personal thing... But brighter is not worse, it actually might make it look more blue :eek:

Have a good weekend! :)

PearlDoves
08-20-2006, 10:22 AM
but I'd still prefer it to be ever so slightly brighter. It's not my decision, though.


AHHH, I see what you're are saying now, I've viewed the page from another location. On my screen at home, the chroma on the green text is fine, but on this one, it looks more like a transparent kinda blue. So being that, I might double the text on top of each other to make the text bolder (without being bold), which will hopefully bring it out slightly better. I've had to do that before on another project. Thanks for pointing it out!

mwinter
08-22-2006, 01:41 PM
I sincerely hope you didn't pay for that.

Nah, I did no such thing, I think anybody can use it.

Yes, there is a free online version. I was just worried that you might have taken the option of paying for it.



I have to be honest and say i think I'm getting over my head here, I don't understand this, its confusing to me, but for whatever reason I can make sense of what I have for the webpage right now, which is important to me for the sake of control and updating.

Yes, that's entirely understandable and I have no intention of trying to force you into using something that you find confusing or can't maintain. These are only suggestions that you're completely free to ignore.

As far as maintenance is concerned, though, semantic markup and CSS is typically easier to use: markup becomes simpler, and style sheets can be used to global updates to a site. I will admit that CSS isn't entirely intuitive at first, especially when it comes to bad browsers like IE that exhibit serious bugs.

Unfortunately, it was due to browser bugs that I didn't post the example I was working on the weekend: IE completely trashed it. I was expecting a few niggling problems, but it looked just like someone dropped a bomb on it. I wasn't too happy with the implementation anyway (too much absolute positioning), so it's not a big deal but still irritating.



I don't know the difference between real and apparent colour.

It's not a technical term, just a way I chose to express (badly) the effect of antialiasing on such small text. To see what I mean, zoom into one of the link images (like "portfolio"; rk2_03.gif) until you can clearly see the individual pixels. The solid colour (#026E7B) that makes up part of the stem of the "p" is perhaps the closest colour to how the text appears when viewed at its actual size, but it's not quite right. If the text was larger, the antialiasing effect would be confined to the outer edges, and the inner areas would be the solid colour you chose from the palette when drawing the text.



I also don't know if this part of the CSS will work with the script I got because I still need the JS to work.

No, there wouldn't have been any problems.



A while ago, in another forum, the roll overs and the motion container did not work together ...

That's more likely to be a script conflict and unrelated to CSS. Incidentally, you don't need scripting to perform those rollovers: CSS can do that.

I'm also rewriting the gallery. At the moment, with scripting disabled most of the gallery lost, hidden as it continues off to the right. Larger versions of the image also won't load. Instead, the gallery will be constructed if, and only if, the browser supports the features necessary. If it doesn't, the images are left unaltered. Whilst this would look rather less attractive it should only be necessary in a very small number of cases, and I should think that being able to view the artist's portfolio is more important. Again, this isn't something that you'd have to use.







#motiongallery a:link img {
border: 1px solid;
}


Well I'm not sure if this will keep a permanent border?

As it is, yes. However, add another rule:



#motiongallery a:link:hover img {
border: 1px solid #rrggbb;
}

and you can change how the border appears when the user hovers over the image.



I remember seeing a CSS with borders and such in the external file. Again I'm over my head here. Not sure where would I add it and what that exsist would I delete?

As it happens, if you look in the gallerystyle.css file, you can see two rules like the ones above at the beginning, so you wouldn't need to change either of those. However, you could still add:



a:link img {
border: none;
}

on a new line at the end of that file and do away with all of the border attributes in the HTML markup. As the two existing rules are more specific, they take precedence.





The only thing that's putting me off is fiddling with the decorative images (I'll be aiming to convert most of the content to pure text, but keeping the same look).

Oh my! You don't have to do all that.

I know. :) I've done all that now. I've reduced the decorative images (the rose and the "tab" edges) to five simple images totalling just less than 6.5KB, compared to twelve images at almost 41KB, and all of the text is real text. That does mean that the type face has changed. Even if the font used for the headings (the differences wouldn't be noticeable with the smaller text) was considered to be really that important, two img elements could replace the text.





The style sheet is included via the link element, and there's no problem with that apart from the trailing slash you removed.

Are you saying I need to put the "/" back in the link tag?

Oh no, not at all. You were worried about validation and seemed a little unsure of the style sheet. I was just stating that the link element is responsible for including that, and the only problem with it was the one you had already dealt with by removing the slash.



Have a good weekend!

Thank you. I hope yours went well, too.


I will finish that demonstration; I said I would, so I'm going to. If only I could ignore IE... :(

Mike

PearlDoves
08-25-2006, 07:52 PM
Okay sounds good... and yes IE is way bad, I had so many bugs to work around just to get the page I have up now to work right, I should have written a book about it for comedic purposes, it was ridiculous. I've been kinda away more from the computer this week, but I'll still be checking back every so often. And as its the weekend again, Have a good one!

mwinter
08-29-2006, 07:37 PM
You can finally see the results of my fiddling (http://mwinter.webhop.info/dd/pearldoves/). Only the portfolio is demonstrated, but the other two documents shouldn't take much more than a few minutes; the markup would be nearly identical (only the content, title and header would be changed, plus a few extra declarations in the style sheet).

I don't know what browser you normally use on what platform, so I'll mention this ahead of time in case there are issues: this has been checked in several Windows browsers with no apparent problems. The appearance on a Mac or in Linux may or may not be quite the same. The only expected issue is with fonts: as they vary slightly between platforms, the assigned widths to various contains may make text wrap when it shouldn't. This is easily fixed though, and not really a problem. I'll cover known browser responses later.


There are clearly some changes, but I hope you'll agree that they're quite minor.

Perhaps the first is the change in the appearance and position of the "tabs". The sides use the same image flipped and rotated to give the four orientations. It does enforce a more uniform look (not the aim), but I don't think that's a bad thing. The position of the lower two "tabs" is their natural positions: one's floated left, the other right, and they come to rest at the outer edges of the container.

The next noticable change (an addition, in this case) is "Portfolio" to the right-hand side. Though the title does indicate where the user is, I think it's also a good idea to convey that within the document itself. Though it's not quite so important in this case (the site is very small), it definitely is in others.

The final, obvious change is that of font. I mentioned before that in using text for the content, rather than images, the type face would change. Similar fonts commonly present on other platforms can also be added. The typical problem, as mentioned above, is with the header (specifically the #branding rule, in the style sheet) as different font metrics may cause the text to wrap on some platforms, but not others. If the width declaration in the #branding rule needs to be altered, the left margin in #navigation should also be adjusted to ensure that the text wraps, rather than being obscured by the "tab" at lower viewport widths.


The markup isn't a fantastic example of good practice, mainly because there isn't a great deal of content. As a result, there are a lot of div elements because no other HTML element is appropriate. Using too many div elements tends to lead to "div soup": rather than meaningless tables, the document contains a ton of meaningless div elements. Here, there's not much choice, but I've tried to keep it to a minimum.

The only particularly nasty markup are the six div elements with class attributes "left" and "right". This are used to contain the tab edges. It can be done purely in CSS, but IE (and other less capable browsers) doesn't support the required mechanisms and I didn't want to write more client-side code to add the tabs dynamically.


As I stated in past posts, I'd rewrite the gallery script to be a little friendlier in some instances. Well, I did, and it is.

Much of the code is to work around inadequacies, and there are three script files. The first is named remedial.js (http://mwinter.webhop.info/dd/pearldoves/remedial.js) and, as its name suggests, it provides basic support code that earlier IE versions don't implement. The Array.prototype.indexOf method is important to other browsers as well, though: the method is implemented natively in Gecko-based browsers, but nowhere else (to my knowledge). I chose to extend it to all browsers as it's not unthinkable that others will eventually implement the same method in the future, and those that do will get a speed bonus. For the rest, they'll use a simple loop.

The second script is named events.js (http://mwinter.webhop.info/dd/pearldoves/events.js), and contains event-handling code. Again, the bulk is for IE, though other browsers may use it. Its main significance is in its efforts to avoid the notorious memory leak in IE caused by circular references involving COM objects (which includes HTML elements in the DOM). As well as allowing multiple listeners per element, it will cleanup those listeners, hopefully breaking any loops. It is still the responsibility of calling code to help out in that regard, though; the event-handling code just tries to minimise its own involvement in the problem.

A note to any readers: This is yet another iteration of this code (I've written it about 15 times, now, changing it on every occasion). Though its current usage doesn't show any problems, nor does examination of the code, I don't guarantee error-free operation should it be deployed for other purposes.

The final script, gallery.js (http://mwinter.webhop.info/dd/pearldoves/gallery.js), is what does the real work. It attempts to interrogate the host as thoroughly as possible to determine support during initialisation (when the CursorMotionGallery function is called), but it will also bail out with IE 5.0 or any browser that doesn't support the white-space CSS property.


Finally, we come to the style sheets. There are two used here: common.css (http://mwinter.webhop.info/dd/pearldoves/common.css) and ie-fix.css (http://mwinter.webhop.info/dd/pearldoves/ie-fix.css). The latter is only exposed to IE 5.x and IE 6 using Microsoft's proprietary conditional comments. At the moment, the style sheets only contain remarks for the workarounds that are used. Though I don't mind commenting on all of the rules (or if you want to ask how certain things work), I thought that that may make it more difficult to understand what's going on as you try to navigate around large amounts of text.

There's only one such workaround in the main style sheet for browsers like Konqueror, whilst ie-fix.css has several hacks.

As IE 7 is still beta, I don't have it installed, and don't know how the document will appear in it. If its CSS support has improved enough, the main style sheet will suffice and the fixes that are currently hidden from it won't be needed.

Testing here shows that IE 6, Mozilla 1.7, Firefox 1.0 and 1.5, and Opera 8.5 render the document and the gallery without any issues. Mozilla 1.0 and Opera 7.0 render it acceptably (and almost identically), and that should cover every Gecko-based and Opera browser still in use. I do have intervening versions of both, but they aren't installed at the moment. I also have Opera 6 (not installed), but that should be very rare on the Web. IE 5.5 misaligns the header, but is otherwise OK. IE 5.0 does the same, but doesn't support the white-space CSS property, so the gallery falls back to less attractive, but more usable state. Konqueror 3.3 also falls back; presumably it fails a test upon initialisation (I've seen it as a screen shot).

I'd normally use iCapture to check Safari, but either it's down or severely overworked: the reported queue length is currently around 44 hours!


By the way, did you pass that content negotiation information (for extension-less URLs) on to your friend? Was it useful?

Mike

PearlDoves
09-03-2006, 10:43 AM
On PC the motion container is fine, however is more slow. On a mac, at least in safari, the motion continer doesn't work at all, rather the images are stacked ontop of each other like a sandwhich or a game of tetris (sorry couldn't resist a bad pun).

I can understand bits and pieces, but its hard for me to understand what you did technically because I don't know the terminology, but all the same, I appreciate all that you've done, If I ever decide to dive into CSS, I'm sure I could learn alot from this example, and hopefully it'll help many other people as well. You should perhaps think about submitting a reference to this thread to the Dynamic Drive guys.

What is icapture?

I will be relaying the info you gave me perhaps a bit later after we solve a (reverse) DNS problem he seems to be having of late. I don't want to throw to much at him with this going on. I've been having problems getting and sending email to large internet providers, namely AOL. He said he started having problems in May when the ISP failed or IP address changed, I can't remember what he said exactly, but either way he said he thought he had fixed it in June, but now this is going on, so I wrote AOL about their protocol for failed reverse DNS and whatever else he had written out. So now I'm waiting to hear back from AOL, but may need to give them a call.

Also while at my work today, I tried to access my website and it said DNS error up in the address bar when it defaulted to one of those "your site can't be accessed" pages... This may be perhaps the reason I started this thread in the first place.. people may not have been able to see my site due to a DNS error.. Not sure what that all means exactly, but it seems pretty imporant ;) Frustration all around, pour me some more, LOL.

mwinter
09-03-2006, 06:41 PM
On PC the motion container is fine, however is more slow.

I know. The interval and maximumRate variables can be changed to increase the speed. Setting maximumRate to 15 makes the two almost identical (and it could be made exactly the same, if really necessary).

The main reason for the change is that the original uses an interval of only ten milliseconds which is far too frequent in my opinion: its the same as a timeslice in many thread schedulers. Expecting the browser to I increased the interval, but didn't check what movement rate would allow the two scripts to appear similar.



On a mac, at least in safari, the motion continer doesn't work at all,

Careful: the script works in exactly the way I described. Semantics aside, I did mention that Konqueror invoked the degradation path, and Safari uses the same engine (though tweaked here and there). The reason is that both failed a test during initialisation, but at the time, I didn't know which one. As iCapture came back today, and it's more responsive than Browsershots, I was able to work out why.

The very last test the script performs before altering the document tree is to ensure that the newly-created div element (the one that acts as the moving container) has an offsetWidth property. This property is used to determine how wide the container is so that the script knows when to stop scrolling. Because the element isn't attached to the document tree when the test is performed, Konqueror/Safari don't define that property, and so the test fails.

I've removed the test and Konqueror appears to complete the initialisation process. I can't check that the animation works correctly, though (I'm only seeing screenshots). It should also work in Safari, but I'm not sure: I'm fairly certain that iCapture has cached the previous script version and isn't using the new one.



I can understand bits and pieces, but its hard for me to understand what you did technically because I don't know the terminology,

Well, as I wrote before, I have no problem explaining anything (now or in the future). You can ask from either perspective: "What does X in the style sheet do?", or "How does X end up in that position?"



You should perhaps think about submitting a reference to this thread to the Dynamic Drive guys.

I'm pretty sure ddadmin, jscheuer1, and Twey have all read this thread (though only the former represents DD). They seem to read pretty much everything in these forums (I don't).



What is icapture?

It's a rather nice service provided by a generous chap named Daniel Vine. You can submit a URL to iCapture (http://www.danvine.com/icapture/) and have a screenshot taken showing how Safari renders it. There's also Browsershots (http://browsershots.org/), which covers some other browsers (use Options to select the browsers used). Neither's a substitute for the real thing as you can't check how a document will behave when the viewport changes size, or how interaction with a script works, for example, but it's better than nothing. There's also Browser Cam (http://www.browsercam.com/), but that's a commercial service.



This may be perhaps the reason I started this thread in the first place.. people may not have been able to see my site due to a DNS error.. Not sure what that all means exactly, but it seems pretty imporant

A bit. ;)

Mike