IRFP Pages Development Log

IRFP Web Site Changes

Sunday, December 19, 2004:: I put in a command to center the tables that hold the order form information. It seemed like things were a bit off center on my higher resolution monitor, although I don't remember if it was just a single browser problem of if it applied to several.
Saturday, December 18, 2004:: I reformatted the order form with a table layout. I had implemented the css positioning incorrectly. Once I learned how to do it, I had problems. I expect I was doing something stupid. Whatever, it wasn't worth wasting time on given that I'm at the end of the semester. The form looked ok on my computer in Opera and IE, but looked like crap in Firefox and in all browsers at higher resolution. That's not good.
Wednesday, December 15, 2004:: I spent a lot of time formatting html pages to display on the UML server when people filled in my forms. There's a display bug in IE so that under the <pre> tag, I have to limit my line lengths. This turned out to be an adventure to figure out. Also, the two styles with larger fonts, i.e. "larger" and "girlie" still don't render in IE.; Thanks to my nephew, David, I learned that I can send myself data from my form from fields I don't want other people changing if I make them "readonly". The problem is, then one tabs through those fields. There ought to be a third way. Anyway, I changed the disabled="disabled" attributes to readonly="readonly". I haven't reworked the coding so I can take advantage of that. Perhaps on the weekend.
Tuesday, December 14, 2004:: I think I got my order form working. I had to take a rather brute force approach, but it seems to work. I have a thank you message, and I got an e-mail. The only problem seems to be that the e-mail came html encoded and I've told my client to read things as plain text. More endless hours working on formatting issues, I guess. Not tonight.; I also wasted quite a bit of time trying to straighten out the order-form alignment, but gave up after a while. I was only making things worse. Basically the problem is that the <label> and <input> tags are in-line elements, so can't by rights accept width sizing. I'm supposed to style them as display:block, or display:inline-block, but I couldn't get either of those to work. Basically, I currently have code that validates, but which isn't actually valid. Bah!
Monday, December 13, 2004:: I figured out how to make the cheesy CSS pop-up work in IE6! Of course what I did was find a reference to the IE "bug" that Eric Meyer apparently missed. It even works in IE5.
Sunday, December 12, 2004:: I added some mini-navigation panels to some of the Project's pages and to the Tour Itinerary pages. I discovered I had a bunch of un-closed divs. Gads, I thought I'd validated every page. I guess not. Well, now they're better. I still don't seem to understand how to clear floats so that we don't end up clearing beyond the current div. Bummer.
Saturday, December 11, 2004: I revised the address box to give it a link to the Contact page; I put a mini-navigation bar at the bottom of each of the "machines" pages. There are three links, one points to a previous machine, one back to the machines overview page, and the third to a next machine. So you can cycle through all the machines in order and no longer have to back up to the overview page to get to another.; I made up a Terms and Conditions page, and then wasted quite a bit of time re-learning how to access a url through a button. Oops, the url has to be in single quotes because it is inside the double quotes needed to specify the activity designated by the the onclick event handler. Doh!; I wasted endless time re-learning how to access the value of a radio button using DOM. Oh, yeah, a boolian is not a string, so document.order....checked=true does not have quotation marks around it. Gah!; I wasted even more time finding out that method="post" apparently doesn't send values in inputs which have been "disabled". Why not?
Tuesday, December 07, 2004:: It turns out that all my position:relative styles on my some of my containers caused problems. One was that on my low-resolution monitor at work, the style-sheet switcher no longer worked. The buttons were inactive. That was fixed by removing the position:relative from the right_content block.; A worse problem was that IE couldn't see the style-picker box most of the time. That was related in some way to the position:relative style on either the .box class or the <form> tag or both. I think it was both, but I'm not sure why. Anyway removing that allowed the style picker to show up. It shifted all my form layout outside the box on the Orders and Contact pages.; I struggled with re-positioning things on my Contact page. Eventually I got something that wasn't too objectionable in IE5, Opera and Firefox. I'm not sure why Opera and Firefox shouldn't render pretty much the same, but they don't. So much for following the standards.; I made a ContactThanks.html page for the class demo. It pops up when you click on the send e-mail button and tells you what the code would look like on the real page were the UML server to allow such things. This wasn't so easy. I had problems with the <pre> tag, and I (maybe) had to put in a bunch of character encodings so the page wouldn't get confused about the php code thingie. I'm not sure. The page never showed up in IE5 no matter what I did. It validated, however, so should have been ok.; I started struggling with a revised layout for the Order form page. I switched the item from a label to a disabled <input>. For some reason, my Contact page layout seemed ok in IE5, but the Order page layout is pretty bogus in IE5, and not so great in Firefox either. I guess I need to thing some more about what I'm doing. Opera is the only one I can make look good. I'll be interested to see what IE6 does to the page.
Monday, December 06, 2004:: I fixed a javascripting error on my contact page. Now if there is an input problem, it won't send the e-mail.; I worked on the php for sending the mail. I worked out a way to munge the e-mail address of the recipient so as to foil spam bots.; I put a bunch of position:relative styles on my various containers. The idea was to make my css layout for the forms work in IE. I read somewhere that IE likes lots of those sprinkled around so it won't get confused.
Sunday, December 05, 2004:: I finally figured out a problem with form data. I discovered, eventually, that I could send data using method="get", but not with method="post". It turns out the problem is that I had enctype="text/plain". Apparently for method="post" to work one needs to have enctype="multipart/form-data", or perhaps the default which is enctype="application/x-www-form-urlencoded". Needless to say, our useless text book doesn't breathe a word about that.
Saturday, December 04, 2004:: I struggled for some time to get php functioning on my computer. Eventually I did. The problem was that I needed a PATH=c:\analysis\php statement in my autoexec.bat file. But when I did that, I ran into environmental problems because I'm on Win98. So the solution to that was to put SHELL=C:\COMMAND.COM /E:4096 /P in my config.sys file. But then things really did seem to work. Hot damn!; I made up a contact form for sending e-mail messages.; I struggled with sending form data for quite some time, but could never make it work.
Wednesday, December 01, 2004:: I finally got the .htaccess working. I had to add some permissions to a directory description under the Alias (I believe the AllowOverride All was the key). The actual entry is as follows:

Alias /Irfp-dot-net "C:/lgp/UML_Homework/90.292/JRP-web/" <Directory "C:/lgp/UML_Homework/90.292/JRP-web/"> Options Indexes MultiViews AllowOverride All Order allow,deny Allow from all </Directory>; I had to fiddle quite some time to get the .htaccess working on subdirectories. It turns out that you need a fully-qualified url in your .htaccess file. So the directive is as follows:

ErrorDocument 404 http://localhost/Irfp-dot-net/Irfp404.html
Tuesday, November 30, 2004:: I got an .htaccess file working in the Apache root, but only after I prepended the proper subdirectory, i.e. /Irfp/Irfp404.html.; I got my Alias for Irfp-dot-net working. My initial coding seems to have separated the /icons/ Alias from some directory permissions associated with it. So once I changed that, things seemed to work.; Unfortunately, the .htaccess no longer worked in my Aliased directory.
Monday, November 29, 2004:: I got Apache to serve up pages, but only ones in a subdirectory off Apache root directory, i.e. C:/Program Files/Apache Group/Apache2/htdocs/Irfp. I couldn't get my Alias for the Irfp directories to work (nor the Deitel example).
Sunday, November 28, 2004:: I reinstalled Apache. It sort of works, but not really. I'm sure most of the problem is that I don't know enough to set the configuration files properly. It's kind of amusing that a book like Deitel which is basically superficial in all aspects, can't even provide clear instructions to make things work properly, but then we had that problem with their discussion of filters as well.; I worked some more on my order page. I now have some buttons on the bottom. I need to get back to working out the javascripting issues with submission and form validation. The validation part is easy enough. The submission won't work until I get server access with a scripting directory and some functional scripts I can understand. I'm not sure this all will happen before the end of the semester. Oh well.
Saturday, November 27, 2004:: I worked more on doing an order form. I gave up on the span tags and made different classes for the inputs and labels. Then I positioned the items in the css file. There's still a lot to do on that. It seemed to me that some of the positioned elements worked differently than others.; I spent quite a bit of time trying to get some simple java scripting to work for calculating the costs of the items being offered. I got the basics of that part straight. Now on to the address and payment parts.; I tried installing Apache, but not surprisingly, the instructions in Deitel were inadequate (like their whole damn book).; I made an Error404 page. Now all I need is a server on which I can test it.
Friday, November 26, 2004:: I fixed a few minor things in my alternate style sheets and made an explicit "no style" sheet. I think I read somewhere that one of the browsers gets unhappy if it's asked to serve up a style sheet that doesn't actually exist.; I spent considerable time trying to figure out how to do forms without resorting to table layout. I started out using several absolutely positioned <span> tags.
Monday, November 22, 2004:: I worked a bit on my girlie and larger style sheets so that things wouldn't disappear because IE incorrectly implemented the box model. Then I had to go back to fix things in my standards compliant browsers. Web coding, it seems, is a continual struggle of give and take.
Sunday, November 21, 2004:: Gads, I spent an awful lot of time just fiddling with the alternative style sheets. Then I had to put the links to all the alternative style sheets in the headers of all the files. Quite a lot of work. I expect I'll have to fiddle some more when I see that things don't quite work properly in IE because of MS improper implementation of the box model.
Saturday, November 20, 2004:: I got my style-sheet switcher working. It will persist from one page to the next. The problem is that I get a flash of the default before it switches. Another problem is that when I go back to the home page if I'm on an alternate style, the incorrect radio button is checked (always the default). A third problem is that I need to work on my alternate style sheets. They have issues. Still, the basics are working just fine.; I suppose that I should mention that with the style-sheet switcher in place, I can't do the @import stuff, so can't hide the style sheets from NS4 any more. Perhaps I can fix that in my javascript somehow.
Saturday, November 13, 2004:: I worked for quite some time making up new style sheets; making a set of radio buttons to select an alternative style sheet; and beginning to write the javascript that would enable the alternate style sheet to persist through out the site. The script had bugs and nothing worked.; I made a little browser sniffing routine that told the visitor his browser and version number and also his OS. I couldn't figure out how to tell him his IP address. Doing that appears to require some server-side scripting.; I changed the "glow" effect for the to "drop shadow". They half worked in IE6. That is, the default effect shows, not the requested angle and degree of shadow. I expect iw would work fine if I forced IE into quirks mode, but that would be even stupider than is using proprietary coding that doesn't work for a significant proportion of the browsing population.
Wednesday, November 10, 2004:: I added the "glow" effect to the <h4> tags in the "news" section. With luck it will only show up in IE5 until I force IE6 into quirks mode. We'll see.; I rearranged the ordering of the pseudo classes on the anchor lists to fit the acronym "LoVeHAte" or "LordVaderHandleFormerlyAnakin", although I've yet to include the :focus pseudo class because I can't understand it.; I made the cursor change to "help" for the <dfn> and <acronym> tags; I still can't get the cheesy pop-up to work in IE, although I thought I was following Eric Meyer's recipe exactly. Oh well.; I updated the "no-floats" style sheet that is served to NS4.x; I defined style types for markers in sub lists. My wife complained when she saw a nested list in Opera that had the same marker as the outer list.
Sunday, October 31, 2004:: I formatted the IRPF releases page. It's way too long, so needs to be broked up into sub pages, one for current, one for out of data, one for other. Or something like that. I should do some kind of bread-crumb thing. That's probably also what I should do on the past projects pages. That is some kind of bread crumb thing between the pages for each year.
Saturday, October 30, 2004:: I fixed a typo in the css file so that it would validate.; I reformatted and validated the "machines" page. Getting the parallel list of thumbnails to sit more-or-less correctly turned out to be more of an adventure than I expected. I think I still don't understand clearing divs. Clear is supposed to be for the containing div, but half the time, things were clearing below the nav bar, which is up a level or two. So in the end, I got something that worked, but I'm not sure I understand why earlier efforts didn't. I also don't understand why two of my thumbnails jiggle when I alternate mousing over first the thumb, then its caption.; I reformatted the bio page so that the picture would sit beside the text.; I made a past projects page with links to individual pages describing projects for each year. The I set up thumblists on each page with brief descriptions of each project and links to more extensive descriptions; Responding to a classmate's suggestion, I trimmed the nav bar width by 2 em, or about 14%. I just realized it doesn't look the way most people would see it because I've declared a minimum font size for the browser in which I do my development. But then my version of IE (5.0) has the box model incorrect, so I can't get a clear indication from that either.
Tuesday, October 26, 2004:: I reformatted the many pages of descriptions of the various "machines". The figures are now too large and need to be cut down to about 400 px wide.; I managed to resize all the figures too!; In other news, I figured out the problem with the IE filters. They only work in "quirks" mode, or if one has done absolute positioning. I'll make some pages about that when next I have time, probably Saturday.
Monday, October 25, 2004:: I played with my cheesy pop-up, but I still can't make it show up in IE. I even removed the glow around that particular label so as to avoid nested <span> tags (which should be ok, but...); I found I could do the "shadow" filter from the style sheet if I called it from the "#top" id associated with each <h1> element. So I've done that for my page headers. I had to expand the <a> tags to include the whole line. I have no idea, of course, whether or not this will work in IE6. Probably not.
Sunday, October 24, 2004:: I had some more hellish issues with sizing and positioning differences between IE and more standards-compliant browsers.; I reformatted the "News" box to take up more of the real estate on the front page. I put a little "button" off to the side of the main content that said "Hot News Alert!" It causes a jump down to the bottom for the news. I wonder if I should do a pop-up instead?; I moved the "current projects to its own page.; Weird. There can't be a space between the name of the filter, e.g. "shadow", and the parenthesis holding the parameters. Also, I can apply a filter from the style sheet to an i.d., e.g. "#top", but can't seem to do it with all <h1> elements. So I just in-lined it on the first page. I in-lined a shadow filter on the header and a glow on the welcome to IRFP thing.; It turns out the problem with the filters isn't related to my version of IE. They work, but only if you either position elements absolutely or if you specify exact height and width for the elements. I also learned that IE (5 at least) doesn't have a clue about css sizing and positioning. It does what it thinks is correct, not what I code. I guess that makes sense given MS's general design philosophy.
Saturday, October 23, 2004:: I tried adding a cheesy "glowing text" style to the header on my first page, but once again, I can't actually check to see if it works. Nope, it didn't appear in IE6 on the Dell either. Back to the drawing board, ne?; I added a cheesy drop-shadow effect to my headers. At least I tried to do that. I can't check it out in IE5, nor any of the other browsers on the computer I use for web development. Nope, it didn't appear in IE6 on the Dell either. Back to the drawing board, ne?; I made a cheesy, css pop-up to better define IRFP for people. It doesn't work in IE5. In fact you can't add styles to the <dfn> tag in IE5. I put a little dotted bottom border on the element to encourage mouse overing, but they didn't show up in IE5. The faux pop-up works in Opera and Firefox. Well, when I moved to a computer with IE6, the cheesy pop-up didn't show.; Fixed a couple of typos on this page.
Tuesday, October 19, 2004:: Changed text introduction on home page to bullet list. The idea is to make things more accessible to those who don't read paragraphs.; Increased font size and line spacing on introductory bit slightly so as to make it easier to read; tried to make a couple of links slightly more expressive, i.e. "irfp" becomes "IRFP releases"; added a <dfn> tag around IRFP with a description as to exactly what IRFP is. I'm not sure I like it, and may change to a foot note.
Sunday, October 17, 2004:: Made up a new "index" page which is nothing more than a blank page with an embedded redirection script. This saves me from having to rework my directory structure, and thereby page links, on the UML server.
Saturday, October 16, 2004: I increased the width of my right column to 33em so that the pictures in some of the pages would fit better. Otherwise, I'd have had to resize them all. Eventually, I'll probably do just that and go back to 30em for a column width.; I made the borders a bit larger on the faux buttons on my navigation bar. They were 3px, now 5px. My son, Zach, says I should either make the button borders different widths like I have the box widths, or else make the box widths all the same size. I'll contemplate that idea.; I spent quite some time trying to fix all the dead links. Basically, that meant either making dummy pages or reformatting old pages. I'm still working on commenting out external links. Is there really much probability that one of us is a terrorist hacker?; I fixed a couple of typos on this page. It was a miracle that I found them buried amidst all the verbiage.; I wrote a better bio. I should probably get the subject in question to approve it. I also added some acronyms to that particular page. That took a while because I had to remember whether it was the acronym or abbr tag which IE does not support. Poo on them! (they also don't support the q tag, in case anyone was curious); I changed the id name of the thumbnail list on the first page to a more generic name. I will probably use that same technique on several other pages, so making the id more generic makes sense.; I decided to take all the xml prologues out of the tops of my files. In theory they should be there, but then in theory, I shouldn't be serving up my pages as content="text/html". However, IE6 will render more correctly without the prologue's being present (IE goes into "quirks mode", which means it renders like old browsers that don't understand updated standards. In particular, it makes IE6 do the incorrect css positioning it was doing for IE5.x), and won't render at all if I serve up my pages as application="text/xml+xhtml". Having something I can add in later to make the pages more proper makes more sense to me than to design a hack to make IE render properly now, then have to delete it in a few years when IE catches up to the standards. Given that MS is not planning on updating IE until they come out with Longhorn in 2006, they won't be catching up any time soon. Also, I believe I read somewhere that small-screen devices don't handle the xml declaration properly either, nor the serving of application="text/xml+xhtml". Personally, I think writing pages which can be rendered in small-screen devices is where the future lies.
Wednesday, October 06, 2004: I figured out my spacing problem in Mozilla (and Safari, I think). Apparently they don't recognize the clear style attribute when it's applied to a list-item tag. It seems pretty dumb to me. Lists are, after all, block-level items. So I had to put a blank <div> tag inside the list-item block just before the </li> and give it a style asking it to clear:all. It only works if I put something inside the div, so I put in a single non-breaking space,  . It seems kind of dumb to me (oh I already said that), but now it works. I tried using a blank, styled <hr>, but it didn't work. I'm not sure why, but the <hr> somehow broke the css positioning and made things overlie each other on the right-hand side of the screen. Weird.
Tuesday, October 05, 2004:: I worked out a way to put a nifty little IRFP logo on the navigation bar. The graphic needs much work, but I got the idea worked out.; I wasted entirely too much time worrying about the spacing of the stuff in the current projects section. It consists of a thumbnail with a description off to the side. That works ok in Opera and IE5, but for some reason, Mozilla/Firefox won't space things properly. In theory, the thumbnail and description are both wrapped inside a list item container, and said containers are supposed to be 2 em apart. Well, Mozilla/Firefox won't do that. Poo on them.; I laid out some dummy pages so that there would be fewer dead links in the navigation bar; I believe that some tunes are also now available, but I went to bed before I checked to be sure
Sunday, October 03, 2004:: I added a javascripted e-mail clicker in the address bar so as to foil spam bots. It should lead people who don't have javascripting enabled (allegedly 10% of web surfers) to an error page with a text-based, albeit munged e-mail address.; I gave up screwing around with things and made up a basic page template. I hope it will be ok and I won't have to change all pages yet again.; I started adding some comments in my pages, mostly to keep track of the major content blocks. People who have seen my über-commented C code would be amazed to see how little I've commented my html to date.; I began the arduous task or reformatting pages into the new, 2-column format and also updating coding on each to upgrade to xhtml 1.0 transitional. I'm trying to validate as I go along. It does help.; I validated my css file and found some errors; Well, I can't seem to give up screwing around with the dimensions. In exactly how small a screen do I want things to work, and with how large a font size? Bah!
Wednesday, September 29, 2004:: I played a bit more with layout. I can't get the "flow" to go the way I would like. I think I'll give up. The look is adequate in most browsers, I believe (well, Opera and IE 5). I would like, however, to have the picture first in the file, then the nav bar, then the text that goes under the picture. That makes more sense in a text-browser or small-screen device. But if I separate the things on the right in the file, then they don't show up on the page in the right place. I could hard-code their positions, of course, but that's cheating according to my desire to have a semi-liquid layout.; I remembered I needed a link to home in the nav bar, so I put one there; I decided not to put little bars between the links in the bottomnav bar. So I took them out. The way I did them, they looked funny, and I didn't want to have different classes of links to take care of the problem (i.e. first in line, end of the line, etc. I'm trying to keep things simple.)
Monday, September 27, 2004:: More fun with positioning. This time I worked out a basic 2-column layout for pages such as the bio page and those introducing various projects. When I was done, I discovered I don't have a link to "home" in the top-left nav bar, only in the one along the bottom. So I have lots of redoing and pasting to do.

This is getting weird. I keep finding new ways to place things that make more and more sense. Unfortunately it also means other things need redoing. Too bad I'm not smart enough to get things straight the first time.; A bit more with the list style on the bottom nav. Sunday I put some line breaks in the list to make it space more nicely, but the page didn't validate. So I just broke it into two unordered lists.
Saturday, September 25, 2004:: I've turned the bottom navigation block into an unordered list, just like the one at the top. Basically, it pretty much looks like the one I had before, with things spaced along a couple of lines. This way is a bit shorter, and can be styled in another fashion when I get the urge.; I played a lot more with positioning.

The problem is to make something look coherent in old browsers (i.e. NS 4), but look the way I would like it in modern, standards-compliant browsers (i.e. Opera and Mozilla). Then there's the problem with mediocre standards compliance in IE. How are we supposed to be learning proper, modern techniques if we're stuck writing hacks to make things work for the 75% of people stuck with IE? We could of course, eschew inclusiveness and write exclusively for IE. That's akin to telling 25% of your potential customers to go to hell. I don't know much about business, but that doesn't sound to me like a good business practice to follow. [browser usage stats from http://www.w3schools.com/browsers/browsers_stats.asp]

So, to deal with NS4, I'll eventually have a base style sheet for such things as colors and fonts, but have a separate positioning style sheet for the various divisions. Then we'll access that style sheet using an @import statement, something not recognized by NS4 (and IE4 perhaps?). On second thought, I'll just import a complete style sheet and have a link to a second, stripped-down one for NS4. My quick check indicated that such redundancy doesn't matter all that much, although my page loading will be slowed down by having an additional 3-5 kB style sheet to download.

To deal with IE, I've put an extra div around the content with a text-align:center style. Then I had to go through all the other blocks and style them as text-align:left. What this allows me to do is have a centered column of text with a reasonable width (30 or so ems) and still keep true to the xhtml standard which wants an xml version and encoding declaration at the top of each file. If I remove the xml declaration, I can center in IE6 with margin:auto, but with the xml declaration, IE6 no longer understands the margin:auto style. IE 5 doesn't recognize that style in either case, and something like 5% of people still use IE5. Another interesting thing I noticed is that IE sizes the fonts differently depending on whether the xml declaration is there or not. Weird.
Tuesday, September 21, 2004:: I played more with style-sheet positioning on the main page. The problem is to get something that looks decent in a relatively low resolution screen, such as I need to use, but which won't look totally bogus in a higher resolution screen such as most of Jessica Rylan's fans will use. Then there's the problem that IE is non-standards compliant, so one can't always do as one would wish; I think I finally got the basics of css positioning figured out. I got my thumbnails and their descriptions, under current projects, to align horizontally without having to resort to a table layout. The main problem now is keeping my right and left sides straight. I'm not sure why that is, but I generally get things placed on the wrong sides before I get them straight placed properly.; I figured out that for wide-screen rendering (i.e. to keep lines from being too long), I'll have to use a fixed-width content division (I decided on 30 ems). This is because IE doesn't support min- and max- widths. In IE 5 I won't be able to have the content centered because it doesn't support margin:auto. Fortunately IE 6 does so long as I don't provide an xml specification in my header. So, the 5% of people stuck with IE 5 will see lop-sided pages. I could always use tables, of course, but I'm trying to learn to do 21^st century xhtml, not something from the previous century.; I worked on the basic navigation bar. I'm a bad person in that I have not gone through to undo the links to pages I have chosen not to upload yet. Sorry about that.
Sunday, September 19, 2004:: played a lot with style sheet positioning on main page. Didn't get very far. I couldn't make pixels work, but per cents did. I'm not sure why.; more changes to basic style sheet (min/max content widths); begin navigation list styling
Saturday, September 18, 2004:: set up basic divisions on page; figured out how to line up images and corresponding text in current activities section without resorting to table lay out (basically it's a list); fixed font-sizing bug and set header sizes to progress by 15% from one to the next; changed link colors to "standard" blue and bold for normal and violet for visited (and slightly smaller size). I'm not sure I like that.; changed address font to sans serif and made address box smaller
Tuesday, September 14, 2004:: outline index page