A New Design

6th April 2004 · Last updated: 5th October 2016
 

Comments

After months of slaving over code, this website now has a new design.* It's completely new, an attempt to make better use of background images. Do you like it? The code is now XHTML Strict which should validate, though I haven't checked every single page. I'm aware that there's an encoding issue there as well - I will look into that.

Working on the code has taught me a few lessons. One is that no matter how simple you try to keep the code, different browsers will always cause you problems. Each has its own unique rendering engine, after all, and they don't always agree on the correct way to display a web page. Without that, the redesign would have been complete weeks earlier.

An example: There's a strange effect with the thumbnail images in Opera 7.23. They appear less high than they should, so apologies for the crushed look of some images. I have put the exact width and height in my markup, so I don't understand it. What's puzzling is that the problem didn't arise in earlier releases of Opera 7. So I put height:auto into my CSS to cure it. Only to find IE6 then makes the images too tall! So for now I will leave this problem alone. Perhaps it has been fixed in Opera 7.5?

I will do further browser testing as soon as I can. Meanwhile, if you find any problems with any of my pages, do let me know.

Update: The side menu links can't be clicked on in Opera. Anyone got any ideas why? They work fine in Mozilla 1.6 or IE6. Just when I thought all bugs were ironed out... - Fixed.

*Update 19th October 2004: This relates to a previous layout.

Comments (12)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Chris Hester:
    What the hell's wrong with images and IE6 on my Artwork and Photography pages?!? Why are the thumbnails perfect squares instead of 100 pixels wide and 75 tall as coded? WHY IE WHY! :-O

    Browser problem after browser problem. Often it is my code that is faulty. But I cannot see the problem this time. I have had enough. I have wasted enough time on this code tonight already, tweaking every page!

    I will try to fix it later.

    I note also that Opera 7 is slow to update the rollovers for the main links at the top. Mozilla and IE do it instantly. Opera is also slow to scroll up and down. Again, the other browsers cope perfectly. Sometimes I hate Opera. Usually I hate IE. Other times I hate Mozilla. This one is odd - Opera is usually the fastest to scroll pages with a background image, while Mozilla struggles.

    I long for the day someone makes a browser that copes with everything smoothly and bug free. I guess that is impossible.

    I took out some extra styling before - the Comments link was originally a block like the headers, with borders round it. But each browser failed to draw it properly, leaving gaps. (Yes, really a graphics card issue I guess, but I'm on a high-quality chipset and a fast enough machine!)

    This layout ain't perfect. But then neither are today's browsers by the look of it. :-(

    Posted on 7 April 2004 at 12:08 am
  2. Chris Hester:
    Ah wait, it's the "height:auto" bug again, causing IE6 to stretch the images for some reason.

    Posted on 7 April 2004 at 12:10 am
  3. Chris Hester:
    Now it has cleared itself! Yet I did not touch the code. IE works in mysterious ways... a server cache problem perhaps? Who knows!

    Please test the following pages in IE6 for me and let me know how they look. Are the images stretched or not?

    Artwork (main page)
    Photography (ditto)
    Past Layouts (on the Archives page)

    Posted on 7 April 2004 at 12:13 am
  4. Mark:
    The "crushed" images in 7.23 are very likely caused by a bug, very specific to that version.

    Did you use explicit height for the images and did you add padding to the images? If so, in 7.23 the padding is taken *inside* the explicity declared height. Baaad bug :-)

    That bug has been squashed in 7.50 versions, so rest assured. I haven't figured out the inactive links in Opera yet... very strange.

    Posted on 7 April 2004 at 12:16 am
  5. Chris Hester:
    The IE images problem is intermittent - I see it, then I don't. Then it comes back! What is going on. A new IE bug? Calling IE experts...

    Posted on 7 April 2004 at 12:16 am
  6. Chris Hester:
    Ah, wait. I had two classes used, both applying a float. I've redone the pages. Any better?

    Posted on 7 April 2004 at 12:41 am
  7. Mark:
    A long debug story cut short: add the following line of code to the page to get it working in Opera.

    #sidebar * { position:relative; z-index: 2; }

    Actually it is not very strange that Opera wouldn't allow you to click the link, as the #contentbox covers the full width of the page and comes later in the code and thus has a higher z-index. You can easily see this if you give #contentbox a non-transparent background-colour.

    You tried to correct that z-index, but z-index only works on positioned elements, so takes no effect on floats.

    This line of CSS gives all elements in #sidebar a higher z-index, putting them above #contentbox, and thus clickable for Opera.

    Posted on 7 April 2004 at 12:59 am
  8. Moose:
    I like the design - it is way better than the previous one.

    Mark already found the missing CSS that is needed to ensure that the right bar links are clickable.

    I will add that

    1. If I switch images off, the top 2 headings disappear. In other words, there is a problem with the method you use now.

    2. If I open a panel in Opera, or resize the window to 800x600 or so, the post headline overlaps with the date

    3. With a window maximized, and a panel selector present, your page doesn't fit into the window, creating a horizontal scrolling effect without the scrollbar. most odd

    4. this page: http://www.designdetector.com/tips.php shows a huge empty space at the bottom of the document... I suspect you are using a fixed height somewhere...

    5. the comments page I see now is not yet converted?

    6. Very good that you decided to use a css signature, although it might have been better if you had used it on the HTML element, since you use xhtml 1.0, where it is permitted.

    M.

    Posted on 7 April 2004 at 6:02 am
  9. Chris Hester:
    Thanks for your comments everyone. I tried Mark's code which did work! But it also screwed up the page slightly. I got underlined menu buttons and a line beneath the stars that separate each section on the side menu. Most odd! Some sort of Opera bug - how can adding your code affect other unrelated elements!

    After much hacking to solve this, I tried something I thought might be the cause of the problem. What struck me is that my original demo of the layout worked properly for Opera. The *only* difference between that and what you see now is that I moved the side menu! I realised it was at the bottom, not the top of my code. I moved it and that must be the reason for the overlapped floats.

    Now Opera is fine! I put the side menu back at the bottom, with a link to skip the main content.

    Posted on 7 April 2004 at 9:52 pm
  10. Stu:
    Just that small horizontal scroll in IE and Firefox.
    Ok in Opera 7.23 though.
    Nice design though ;-)

    Posted on 9 April 2004 at 8:45 pm
  11. Chris Hester:
    I solved the scrollbar. It was a setting of "100%" on the div containing the menu buttons.

    Posted on 12 April 2004 at 12:31 am
  12. Cris:
    Just to say thankyou! thankyou! thankyou!
    You issues were exactly what I have been struggling with all day ! Both the image padding and the z-index - mind boggling stuff - had'nt even occured to me it might the z-index...and what's that about with the padding ???!!!!
    Anyway - back up and running now - thanks again.

    Posted on 14 May 2004 at 7:41 pm