05.12.03
This website is finally established. It uses Cascading Style Sheets instead of HTML (for presentation) and tables (for positioning). One note of frustration: I used JavaScript for the email icon’s rollover image (located in the foot menu). I had intended to use CSS for this effect, but after lengthy testing, I found out that a conflict apparently exists between the "img { float: left }" and the code used to produce rollover effects, at least in Safari and Internet Explorer; it worked perfectly in Camino. To view the rollover effect produced by CSS, click here. (05.20.03: This link now directs to the CSS and Browser Bugs page.)
05.13.03
I learned that iDisk can be accessed through OS X Terminal, and I have been editing all my code with Pico since. I was annoyed to discover that hard returns in Dreamweaver were set as Macintosh carriage returns, which appear as "M’s" in Unix: One "M" in place of every return, and no blank lines or word wrapping anywhere. Fortunately, a simple change in Dreamweaver’s Preferences and a re-saving of every file (fun!) solved the problem.
I also renamed the startpage "index.html," so that it will be the startpage for my .mac website as well.
Internet Explorer does not recognize { margin: auto } as centering an element. This problem is documented, but it did not appear for me until about ten minutes ago. One of IE’s many endearing quirks, I suppose. Anyway, I recoded the main text div with left and right margins of 66 px. I needed the text to be left aligned; otherwise I would have used the CSS IE-work-around of { text-align: center }.
Now, with the additional text in the log section, I see that IE also has trouble displaying { overflow: auto } scrolls; the scroll window is slightly cropped in width, creating the need for a horizontal scroll bar, which is doubly annoying because it also conceals the last line of the text. However, this problem may not be nearly as frustrating as Safari, which ignores the auto value altogether and displays the overflow as hidden. My second choice, {overflow: scroll } likewise appears as hidden.
I decided to code a "decoy" line of extraneous text in order to work around the IE problem—well, at least one of the problems. If you are in Camino, you will see a line of smiley faces.
:-) :-) :-) :-) :-)
Second IE hack: I set the width of ’p main="text"’ to 465 px—15 px narrower than the width of the text div, which is 480 px. The overflow now works properly in IE, and the difference is not especially noticeable in other browsers.
Second version of second IE hack: I restored the original width to ’p’ and widened the text div instead. Then I set the text-align to justify and again increased the text div to provide a 10 px margin between the text and the scrollbar.
05.14.03
I changed the document type of these webpages from HTML 4.01 Transitional to XHTML 1.0 Strict. I validated them with W3C’s MarkUp Validation Service and corrected the errors, most of which resulted from forgetting to close the img tag. The other two errors were related to proper markup of the Java Script (which requires a ’script type’ tag in the header and an ’id’—not a name—tag for the image in the script). I will be adding my W3C badge of validity to the homepage.
Also, the log dates are now written as "mm.dd.yy" instead of "mm/dd/yy."
Lastly, I removed extraneous code from the style sheet...At least I think it was extraneous, since it has not affected the website’s appearance so far... :-/
05.15.03
I changed all bullets on the likes and dislikes pages to asterisks for the sake of text compatibility in Unix.
05.16.03
I discovered a new error in Safari for the homepage. The foot menu is misaligned and displays as two rows instead of one, so that we have the first three images in a centered top row and the two remaining images in a somewhat floating-left bottom row. I traced this problem to the W3C badge, which is not visible due to Safari’s { overflow: auto } problem. When the badge is placed on the visible part of the scrolling window (by either re-positioning in the HTML or shrinking the text size in the browser), the page displays correctly. To view the error, click here. I will also place the CSS rollover example on this page.
The CSS Errors page, dedicated to browser mis-rendering of style sheets, has come into existence. (05.20.03: This link now directs to the CSS and Browser Bugs page.)
05.18.03
A couple of inexplicable errors are now happening on the homepage in Internet Explorer: The badge is truncated, so that its lower half is missing, and the rollover effect for the mail icon has vanished...Therefore, I have replaced my recommendation on the homepage for using IE (to view this website) with a warning.
I have added another row of smiley faces as a safeguard against IE’s quirk of not displaying the last line of text. Unfortunately, this does not seem to work for the badge on the homepage...
05.19.03
I ran my CSS through W3C’s CSS Validation Service. Two errors resulted from using "_" (the underscore) in div names, and a number of warnings resulted from failing to specify the background color in certain divs (which I had intentionally planned to be inherited from the body element, which has a white background). I created a copy of my CSS on which I could experiment and implemented the suggested changes (specifiying background-color for every element with a color attribute and substituting hypens for underscores). I also replaced { border: 3px } with { border-width: 3px } and gave the content div a color attribute, thereby erasing the need for a border-color attribute; these revisions were based on the remaining warnings, which were concerned with redefinitions of values. Lastly, I replaced all capital letters (in the hex-decimal color values) with smallcase letters and toyed with a more readable color for visited links (which are currently bright gold). I have not yet decided if I wish to use the "perfect CSS" copy without errors and warnings, or if I will correct the "essential" problems—the two underscore parse errors and the border confusion—and leave the rest.
05.20.03
I edited the CSS Errors page; it now exists at a slightly different address ("css_errors.html" instead of "css-errors.html"), the document type has been upgraded to XHTML 1.0 Strict, and the CSS has been improved to the point of validating (through W3C’s CSS Validation Service without error or warning. I plan to continue improving the appearance and organization of this page.
I replaced the CSS with the "perfect" edition, validated without error or warning by W3C. I may add comments in the CSS to indicate where I specified a color (in response to a warning) that would have been inherited. I also had to change all of the underscores in the XHTML to hyphens. View the new CSS here or the original CSS here.
I am still searching for suitable color for visited links...After having been pink, mauve, and rose, it is now a dark gold, with no guarantees for the future. Also, I added a tiny bit of formatting to the "signature" at the end of this log.
After setting the overflow to "scroll" (which creates visible scrollbars even when content does not overflow), I think I see why Internet Explorer crops the last line of overflow text: The horizontal scrollbar has re-appeared—except that now it does not scroll, because the viewing box is wider than the text. Nevertheless, it obstructs the last line of text.
The CSS Errors page has been renamed and re-addressed the Cascading Style Sheets and Browser Bugs. I thought that "CSS Errors" could be misleading, plus it sounded a bit unfriendly.
I have re-instated the CSS rollover because the JavaScript rollover has abruptly stopped working in Internet Explorer. Inexplicably, the CSS now works in Internet Explorer and Safari...Perhaps because of changes made in validating the code? Anyway, I have also placed the JavaScript rollover mail icon on the CSS Bugs page, so that one can check whether one, both, or neither of the rollover images is/are working during a session.
05.21.03
I gave the W3C badge its own class in the CSS, primarily so that I could set the float to "none." The result: The next element displays on the next line, instead of appearing to the right of the image (which happened in Camino even if I coded a ’br’ after the image—a browser bug or a mistake on my part?). The new positioning, however, allows me to write a decoy line for IE on the homepage, if I wish.
05.22.03
I placed the W3C CSS Validation Badge on my homepage and redirected the link to the results for my CSS. Also, I replaced ’p class="main"’ with ’p,’ since I figure that the majority of my text belongs in ’p class="main"’ anyway, so why bother with the extra typing? At least, why bother once I delete every single ’class="main"’ in the coding...including one for every paragraph on this page...But the point is that I can always add another ’p class’ to the CSS for specially formatted paragraphs.
05.27.03
I have added ’h6’ and ’h6 class="date"’ to the CSS; these tags have replaced the ’p,’ ’br’ and ’em’ or ’strong’ tags that I used for topics and dates on the likes, dislikes, and log pages. I had to think about it for a while before I finally decided that those words and numbers were, in fact, headers. So maybe I am a bit slow!
I also set the top margin of a paragraph following an ’h6’ to 0 px with ’h6 + p’ in the CSS. The effect? No gap between a header and the paragraph that immediately follows.
05.29.03
I replaced ’h6’ with ’h3’ on the likes and dislikes pages and ’h6 class="date"’ with ’h2 class="date"’ on the log page. I judged that without a style sheet, ’h3’ or ’h2 class="date"’ were about the right size, and it simply seemed more efficient to use both. I also increased the size of ’h3’ to 125%.
I set the bottom margin for the div content to 25 px, the same as the top margin.
06.05.03
I modified the mail icon rollover trick; it now uses the text replaced by background image technique detailed at Stop Design. I decided to go with this method so that browsers would display text ("mail") instead of blank white space when CSS was turned off.
06.16.03
I added a few meta tags to the header of the homepage. Nothing fancy, only the usual "keywords" for search engines bit.
06.23.03
At last! The long awaited update to Safari that fixes the scroll: overflow problem! Hurray for Safari 1.0 GM! Thus, I have removed the warning on the homepage that reads:
Be warned! Please do not view this site in Safari, since, due to Safari’s inability to correctly display { overflow: auto }, you will not be able to access all of the text. I have submitted a bug report to Apple, and I hope that this problem will soon be remedied!
Now, everyone just needs to update!
07.07.03
I added a link to my new .mac Photo Albums on the Pictures page. Pics of California, everyone!
07.23.03
I organized my .mac Sites folder—or I tried to. As a result, this website has been placed in its own special folder (and note the change of address). Next on the list: Re-writing m_sun/index.html!
(A few minutes later...) I created a site menu for my .mac startpage. So far it only lists Jade Shell and my Photo Albums, but it will probably expand in the future.
07.27.03
Well, I added another site to my .mac account! Click here to satisfy your curiosity! I also rewrote the intro on the home page (index.html) for Jade Shell because I thought it sounded too stiff...Plus I wanted to add a note about Jade Space and all the changes.
07.28.03
Changed the format again on the likes and dislikes pages; asterisk has been replaced by slash.
08.02.03
Changed the name of the subdirectory from "JadeShell" to "Shell." Easier to type!
08.07.03
I changed the link text on the pictures page to reflect the content of the link, as advised by W3. The original read, "To view my latest California pics, click here!" A minor detail, but this log is supposed to track all changes and improvements.
(After a pause...) I don’t think that I will replace every "click here" in the log, though, since it is a log and not quite one of the regular pages.
08.25.03
I reformatted all double hyphens ("--") as mdashes ("—"), which is what they ought to be.
09.04.03
Found and reformatted an ellipsis. Also added a note on the homepage about IE 6/Win’s inability to properly display the menu elements.
10.27.03
I finally posted pics on the pictures page! I also wrote a "slideshow viewer" page which links full-size images to the thumbnails. I need more than the two photos I have so far, though.
07.26.04
I modified the stylesheet so that IE/Win users can now view the website as I intended. I also changed the HTML to reflect proper rules for headings—specifically, no skipping levels. This is the first site that I ever tried to create using XHTML and CSS, and I can say, with both pride and embarrassment, that I’ve definitely learned a lot since then.
09.22.04
I rewrote the XHTML and CSS. Background images and lists are now used for the navigation menus, and the CSS is more streamlined as well.
The homepage used to read:
Note: This website is best viewed in Camino/Mozilla or Safari, but it should work (well enough) for Internet Explorer 5/Mac. IE 6/Win incorrectly displays the menu elements at this time.
Then I modified a few margins and widths, and the site worked in IE 6/Win.
Now, of course, after I rewrite the site according to World Wide Web Consortium standards, IE 5/Mac and IE 6/Win fails to properly display it.
Removing the CSS for the email icon list item (intended to prevent a flickering rollover for the email icon link) solves the problem, although I am not sure why.
09.23.04
I figured out why removing the CSS for the email icon list works: I had margins set for both the link nested inside the list item and the list item itself. Removing the margins for the list item did the trick.
09.28.04
Improved the XHTML and the CSS for the Pictures slideshow. Background images for inline lists have replaced the "previous," "home," and "next" images.
12.15.04
Checked all of the pages on the site using The W3C Markup Validation Service. Replaced the extraneous <li id="home"> with <li> (that id was already being used for the anchor). Corrected the headings (again) in this log (the automatic replace and find that I used last time had a few problems), and added <p> tags inside the blockquotes.
12.17.04
Converted the items on the likes and dislikes pages to lists; increased the line-height of this site’s text to 1.25em.
01.11.05
Reformatted the "about me" section based on QuirksMode’s Tableless Forms.
05.29.08
Removed a couple of unnecessary <div>s, specifically containing the navigation menus. All the attributes in the CSS were easily transferred by assigning the <id> to the <ul> instead of its container, although I did rewrite some of the XHTML as well. I also changed the text encoding from ASCII to UTF-8, corrected a few page title errors, and replaced the apostrophes with curly single quotes.
I toyed with the idea of rewriting this site in PHP, but after working on a dynamic navigation menu for a little while, I realized that it was far more trouble than it was worth. Not to mention, this is supposed to be an XHTML and CSS project. :-) So I decided to reformat my CSS instead, into one indented line per attribute (a style that I use by default now, but did not when I began writing CSS). The separate lines made it easier to read, although, ironically, I felt the exact opposite when I switched from writing
body { background: #ffffff; color: #000000 }
to
body {
background: #ffffff;
color: #000000;
}
a few years ago.
After having written CSS for half a decade now, you would think that the process is effortless, but, in fact, I still almost always have to rewrite the first draft. Add Internet Explorer’s inadequate support for standards, and that becomes several drafts, which then become many, many drafts. With that being said, I actually dimly remember learning CSS and being utterly confused. I’ve come a long way since then, of course, and I can see it particularly when I examine my past sites (which, as you can probably tell, I feel compelled to rewrite).
I’ve been wondering myself if there is still a place for simple, static XHTML & CSS sites. Content management systems (what used to be called blogging software) are increasingly popular as the desire for dynamic sites spreads—a trend that has fueled an excess of online widgets, some of which are useful and interesting while the rest remind one of yesterday’s completely unnecessary Flash intros (a.k.a. "splash pages"). People generally want the latest and greatest—Facebook, Ruby on Rails, Twitter, etc.
The problem is, the latest is not always the greatest for your site. Not every organization needs a blog or even a Twitter feed; not every individual needs a Facebook/Google maps/cute puppies on Amazon/random Twitter post mashup set to a rotating soundtrack from Last.fm. The first and last question to ask should always be whether the technology is a tool or a detriment. In light of that, yes, there is a place for those simple, static sites. Just as there is a place for high-powered content management systems…and Flash intros…and PHP, MySQL, Ruby on Rails, and all the rest. After all, even having a full toolbox won’t help a flat tire or a leaky roof if you can’t figure out which tool to use.
05.30.08
Wrote an experimental CSS today that revisited an effect I’d unsuccessfully pursued in the past: A fixed header and navigational menus in lieu of the scrolling fixed-height content <div>. I originally chose to use a fixed-height <div> because it allowed the outermost <div> (containing the header, the two navigational menus, and the content) to display margins at the top and bottom, framing the white with the body background pattern. I also set the body margins and padding to 0 (Safari seems to add a small amount of padding by default).
I set the height of the outermost <div> to 100% and the body to "position: absolute; top: 0; left: 0; height: 100%" to achieve a full-height white column, but the scroll bar would not disappear even when all the content was displayed on the page; this issue was fixed by setting the body height to 99%.
05.30.08
Ok, I must confess that I am not currently documenting every single change and update as originally intended here—just the ones I consider significant. Other changes I’s contemplating: Swapping out the .gif images for .png, perhaps transforming the straight quotes into curly quotes sometime…As a graphic designer, shouldn’t I be totally offended by the use of straight quotes? ;-) I don’t use them anymore, but I wasn’t as escaped entity saavy in 2003, ha! Plus, can someone explain to me why dot mac, for a time, seemed to add its own line breaks whenever I edited my pages in Terminal?
06.01.08
Reorganized the CSS so that it would be easier to locate elements. Also experimenting with removing <div>s on the "pictures" page, but it didn’t work out.
*******
:-) :-) :-) :-) :-) Hurray for Camino and
Safari…and Firefox too!!!