+ Reply to Thread
Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Thread: Prototype and help!

  1. #1

    Default

    After much hacking and tweaking, I now have a prototype page for the new CADTutor design. The page layout is based on Skidoo Too with some additions and quite a few omissions. It looks identical in Firefox and Opera and is only marginally different (can you spot it?) in IE. The original Skidoo Too included some non-compliant CSS hacks, which I've removed as I thought compliance was more important than pixel perfection.

    Any comments on the layout, colour scheme, navigation function etc. would be greatly received.

    Help&#33; because I have a nice border-bottom for <h1> that displays in Firefox and Opera but doesn&#39;t display in IE. I just can&#39;t work out why because I&#39;ve used the exact same code on other projects and it&#39;s worked fine. There must be some weird interaction going on - but what is it?

    http://www.watest.co.uk/cadtutor/links/
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  2. #2
    Alumnus
    Join Date
    Nov 2003
    Posts
    1,239

    Default

    Did you get this sorted? Have you tried removing the word medium from the style declaration and replacing it with a numerical value? &#39;Medium&#39; is valid CSS but maybe it&#39;s an IE thing - I must admit that I&#39;ve never seen it before, so maybe it&#39;s not used because doesn&#39;t work. If it&#39;s not that, I&#39;ll have another go.

    I&#39;m liking the colour scheme and layout which also works in Safari.
    /-{:}-\
    Currently listening to: Broken Records - Until The Earth Begins To Part

  3. #3

    Default

    Thanks for that Francis, I don&#39;t have a Mac so I hadn&#39;t tested on Safari.

    The underline thing is weird. Makes no difference whether I use "medium" or "3px". I used exactly the same CSS on the Websitearchitecture site and it worked fine. There must be some interaction with something else going on. The problem is only with IE. Opera and Firefox render as expected.
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  4. #4

    Default

    Even more weird. I just added another <h1> tag to the same page, same container. The second one renders correctly (as per the CSS) but the first one does not. Font-family and font-color are being rendered but the colours are not being applead to the background or the border although the border does create the space.
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  5. #5

    Default

    OK - I have a solution.

    The problem is the result of a render bug in IE6 and happens when a spacer div with a clear attribute is used below floating divs (as in the Skidoo Too layout). The solution is to add position: relative; to the declaration for headings and all is well.

    See this evolt article for details.
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  6. #6
    Alumnus
    Join Date
    Nov 2003
    Posts
    1,239

    Default

    Spacer/clearing divs - so old fashioned&#33; Seriously, have a look at this article on PIE about clearing without using structural markup - it&#39;s rather fine and works well.
    /-{:}-\
    Currently listening to: Broken Records - Until The Earth Begins To Part

  7. #7

    Default

    All very clever but it seems to me that this sort of workaround (and the required hack) are built on sand. What happens when render engines are updated and become more compliant? The whole house of cards falls down. I want a site that will be as future-proof as possible, not one that demonstrates how clever I am with current browsers. OK, the structural markup is wrong (theoretically) but it&#39;s a massive improvement over tables etc.

    I think I&#39;ll be sticking with those clearing divs for now. I do sometimes wonder whether those CSS geeks oughtn&#39;t just pull their head out of their arses and get pragmatic for a change. Oh, did I really say that?

    More importantly, I want code that I will understand when I come back to it in 2 years time.
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  8. #8
    Alumnus
    Join Date
    Nov 2003
    Posts
    1,239

    Default

    The standards compliant way (using CSS generated content to force a block level clearing element onto the page) will stand you in good stead for years as IE7 apparently won&#39;t have CSS generated content (ggrr). So, that&#39;ll be IE7.5/8, then - another 2/3/4/5 years along... The IE fixes will be fine - if you&#39;re worried about them, just use Conditional Comments, which is what MS want as all to do as of now as a way of filtering out IE hacks. Just set the comment to [lteIE 6] and pull in the CSS.

    As for code you can understand - I just comment it with stuff like:

    /* IE double margin hack, see PIE */ - I know what the hack is, and on what site the fix is listed on.
    /-{:}-\
    Currently listening to: Broken Records - Until The Earth Begins To Part

  9. #9

    Default

    Of course, I know you are right Francis but it seems to me that pointing the finger at clearing divs is a bit weird when, in fact there are lots of divs in most layouts whose only function is to keep other divs in place. In many layouts, content is often nested 3 divs deep. Bottom line: CSS2 does not adequately allow the composition of page layouts. In a perfect world, there would be one div per content area, just like (dare I say it) table cells.
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

  10. #10

    Default

    OK, that&#39;s it&#33; I&#39;ve now spent much too long tweaking and sculpting this. So, I&#39;d be very grateful for any final comments before I deploy it.

    It&#39;s almost pixel perfect between IE and Firefox. I can&#39;t work out why FF has more space above the topnav than IE and I can&#39;t work out why IE has more space below the search button than FF but I&#39;m prepared to put up with that.

    Thanks
    Perhaps late-night surfing is not such a waste of time after all: it is just the Web dreaming. Tim Berners-Lee
    Currently listening to: Script of the Bridge by The Chameleons

+ Reply to Thread

Bookmarks

Posting Permissions

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