Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    Please review my edited BC STATS website

    I've started work on the BC STATS website. It's currently in plain HTML, but I'm going to be converting it to ASP. I decided it would be best to fix the page layout first (it will be used as a template for the newer site) - it was nowhere near the current XHTML and CSS standards. There were many errors from the HTML validator on W3C, there were numerous tables for layout, as well as many spacer gifs used to set up the page.

    I have fixed all the errors from the validator. I have removed a great portion of the layout tables and replaced then with styled divs. I have removed all of the spacer gifs, and used CSS to handle positioning. In the process, I trimmed just over 200 lines off the HTML used in the page (too many tables!). Before I started modifications, page length was over 600 lines of HTML. After modifications, it was about 400 lines!

    Note that I left the content in, so the resulting number of lines of code for the layout alone should be a fair bit less. I left the content in to better compare differences between the original and new versions.

    And now, the page looks almost the same as it did before. However, I've only checked in Internet Explorer 6 and Mozilla 1.4 - I don't have any other browsers. The page looks all but perfect in IE, but is a little messed up in Mozilla. I'm not sure what to do about that yet.

    Please take a look at the result, and let me know how it looks for you, and what browser/OS/resolution you use, if you could.

    Here's the original page (before I started making changes). And here's the resulting page (after having made all the changes I mentioned).

    Any suggestions for possible improvements would be very appreciated!
    Last edited by Grant Palin; 04-28-2004 at 08:15 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're getting there!! I've included some screen shots because it's breaking in my browsers:

    http://www.dotfive.com/screen.gif

    Checking code...
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Those images you have, is the first (top) one in Mozilla? It looks similar to what I get in Mozilla 1.4 on Windows XP. I don't have Firebird, but I can see from the second (bottom) picture that the site appears similarly as in Mozilla.

    I'm guessing that the offsetting issues may have something to do with my margins and padding...

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    As a side comment, when I opened the page in Dreamweaver, I got a message about numerous elements in the page being incompatible with Opera 1.2 and 2.0. The elements included the spans, and divs, and CSS properties such as border-right, margin-top, etc. Is Opera 1.2 something to worry about?

  • #5
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    I wouldn't think so since I believe they are way past that version number now. But I'm not an expert on Opera.
    OracleGuy

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Better...

    Your revision is a big improvement over the original; it loads faster and starts rendering almost straight away, while the original shows the typical table-based layout behaviour of a blank page until just about everything is loaded. There are still lots of tables inthere, though, and I didn't see much tabular data...

    Update: Oh, and use larger text; with the default settings in IE (yeah, I know, corporate installation), most of the test is completely intelligable.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Canada
    Posts
    253
    Thanks
    0
    Thanked 0 Times in 0 Posts
    using IE6 at 800x600.
    i agree with the previous post on increasing the font size. the text on the navigation links on your new page is hard to read.

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Grant Palin
    Those images you have, is the first (top) one in Mozilla? It looks similar to what I get in Mozilla 1.4 on Windows XP. I don't have Firebird, but I can see from the second (bottom) picture that the site appears similarly as in Mozilla.

    I'm guessing that the offsetting issues may have something to do with my margins and padding...
    Top ones Safari and the bottom is Firefox.

    ...and, I wouldn't worry about opera 1.2/2.0 -- they're up to version 7.5 now
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks bradyj, that's good to know that Opera would not be an issue. I found out about that because, just for the heck of it, I switched Dreamweaver to maximum compatibility testing. And Opera 1.2/2.0 was (by far) the one that came up the most.

    Oh well, no problem I guess!

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by ronaldb66
    There are still lots of tables inthere, though, and I didn't see much tabular data...
    Seven, to be exact. Of those seven, two were in the content section, and so I'll just leave them alone (they're not being used for layout...).

    I did remove 3 tables in the page header (the very top line on the page - with the BC logo BC STATS, etc). Those tables were used to structure that top section. I replaced the tables with floated divs, although I had to use a number of divs to achieve more or less the same layout.

    Here's the code for the header:
    Code:
    <!-- HEADER START -->
        <div style="width:760px;">
          <!-- BC LOGO START -->
          <div style="width:164; float:left; margin-top:8px;">
            <a href="http://www.gov.bc.ca/bvprd/bc/home.do"><img src="images/logo_bcgov.gif" width="164" height="46" alt="British Columbia Government Crest" /></a>
          </div>
          <!-- BC LOGO END -->
          <!-- BCSTATS, SEARCH AND WEBSTORE START -->
          <div style="width:390px; float:left; text-align:center; border-left:1px solid #999999; border-right:1px solid #999999;">
            <div style="width:390px; margin-top:18px; margin-bottom:11px;">
              <div style="width:130px; float:left; margin-top:7px;"><a href="http://www.bcstats.gov.bc.ca/index.htm"><img src="images/bcstats_logo.gif" width="108" height="20" alt="BC Stats Home" /></a></div>
              <div style="width:130px; float:left;"><a href="http://www.bcstats.gov.bc.ca/search.htm"><img src="images/search.gif" width="100" height="35" alt="Search" /></a></div>
              <div style="width:124px; float:right;"><a href="http://www.bcstats.gov.bc.ca/store.htm"><img src="images/webstore.gif" width="100" height="35" alt="BC Stats Web Store" /></a></div>
            </div>
          </div>
          <!-- BCSTATS, SEARCH AND WEBSTORE END -->
          <!-- INDEX, CONTACT, HELP START -->
          <div style="margin-top:10px;">
            <div style="width:185px; padding-top:10px;">
              <!-- INDEX AND CONTACT -->
              <div style="width:70px; float:left; margin-left:5px; margin-right:20px;">
                <a href="http://www.bcstats.gov.bc.ca/data/dd/details.htm"><img src="images/b_main_index.gif" width="70" height="13" alt="A to Z Index" /></a><br />
                <a href="http://www.bcstats.gov.bc.ca/phones.htm"><img src="images/b_contact.gif" width="70" height="11" alt="Contact Us" /></a>
              </div>
              <!-- HELP -->
              <div style="width:64px; float:left; margin-top:4px;">
                <a href="http://www.gov.bc.ca/bvprd/bc/content.do?brwId=@20uAj|0YQtuW"><img src="images/icon_help.gif" width="64" height="22" alt="Help" /></a>
              </div>
            </div>
          </div>
          <!-- INDEX, CONTACT, HELP END -->
        </div>
        <!-- HEADER END -->
    The reason I posted the code is because I'm not sure whether it's the best or most elegant or efficient way to do it. Maybe some of you people could have a look and suggest improvements...

    There's still two other tables left; they are the ones used to set up the "tabs" in the left bar - Subjects and Resources. The tables are needed to force the graphics to stay in the right positions. The text is just that - text. Again, I'm not sure if there may be a better way to do it?

    Finally, I've increased the size of the text on the left bar just a little bit. Any better?

    As a side question, what's the best unit to use for sizing text? Em, px, or pt? I know that one of px and pt are not so good because the text remains a fixed size whenever you change the browser's text size. Which one is it - I can never remember since they're so alike!

    I've been using em so far, but it's somewhat troublesome - it seems that size size of text in child tags are affected by the size of text in parent tags - when I change the font size in a higher-level tag, the lower level tags resize too.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Canada
    Posts
    253
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Grant Palin
    Finally, I've increased the size of the text on the left bar just a little bit. Any better?

    As a side question, what's the best unit to use for sizing text? Em, px, or pt? I know that one of px and pt are not so good because the text remains a fixed size whenever you change the browser's text size. Which one is it - I can never remember since they're so alike!

    I've been using em so far, but it's somewhat troublesome - it seems that size size of text in child tags are affected by the size of text in parent tags - when I change the font size in a higher-level tag, the lower level tags resize too.
    i think it is the PT that remains the constant one. i kinda forget which one it is too between the two of them.

    current text size in left nav is now much better

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ahhh, text sizing...

    Grant,

    text sizing is one of those tricky areas in web development, mainly because of variations across platforms and browsers.
    Generally, relative units (em, %) are considered "better" from a standpoint of accessibility, since (almost?) all browsers have a text resizing feature which allows a user with impaired vision (or the wrong browser... *coughIEcough*) to alter text size, and relative sizes won't interfere with IE's text resize tool, which can't resize text sized in px or pt.
    Many designers however still choose absolute sizes (mainly px) because it's the only really reliable way to get a predictable result.
    There is a way to use ems and percentages and still get a more or less predictable result across platforms and browsers; read about it on "text sizing" on Owen Briggs' "TheNoodleIncident".

    Another issue about relative units you've discovered already is the inheritance factor; if not explicitly set, text sizes will compute to surprising values through inheritance. When in doubt, set them explicitly on those elements that seem to inherit unwanted values.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks ronald, I'll look at that.

    Now, any other comments on the the page?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •