Re: IE6 has beat me up

Discussion in 'HTML' started by Neil White, Aug 6, 2003.

  1. Neil White

    Neil White Guest

    Hi all,

    Thank you all for your responses.

    -- The problem was (and still is...)
    > In IE6 I get trailing text characters from <div>s in stupid places.
    > Depending on the window size, this means the last two characters of some
    > <div> or other are repeated on the screen in a different location.
    > I use IE6(SP1) on Win98 on a 800x600 setting.
    > The url is: http://www.nowpc.co.uk/nowpcNEWSITE/index.html


    I've reworded the above a little to hopefully describe the problem a little
    more clearly. I've worked through the points that have been raised in your
    replies. There are now no errors or warnings on the W3 CSS validator.

    http://jigsaw.w3.org/css-validator/...owpc.co.uk/nowpcNEWSITE/styles/nowpcstyle.css

    However, the issue with IE6 remains. What a... curious quirk. Still, rather
    than ignore it, as Headless suggests, I'd like to get rid of it. Am I faced
    with completely restructuring the CSS to achieve the same layout, but using
    different methods (e.g. positioning rather than float etc.)?

    Thanks all again,
    Neil
     
    Neil White, Aug 6, 2003
    #1
    1. Advertising

  2. Neil White

    Neil White Guest

    Hi m,

    >
    > You might try commenting out sections of
    > markup and sections of CSS to see which
    > ones make the problem go away. Once you
    > find the offending sections, you will be
    > able to focus more clearly. Sometimes
    > this works, sometimes it doesn't!
    >


    Interesting. Well, when I say _interesting_, of course what I mean is
    laborious and tedious, but a very good idea. ;-) I'll get back to you...

    Best regards,
    Neil
     
    Neil White, Aug 6, 2003
    #2
    1. Advertising

  3. Neil White

    m Guest

    Neil White wrote:

    > Hi all,
    >
    > Thank you all for your responses.
    >
    > -- The problem was (and still is...)
    >
    >>In IE6 I get trailing text characters from <div>s in stupid places.
    >>Depending on the window size, this means the last two characters of some
    >><div> or other are repeated on the screen in a different location.
    >>I use IE6(SP1) on Win98 on a 800x600 setting.
    >>The url is: http://www.nowpc.co.uk/nowpcNEWSITE/index.html

    >
    >
    > I've reworded the above a little to hopefully describe the problem a little
    > more clearly. I've worked through the points that have been raised in your
    > replies. There are now no errors or warnings on the W3 CSS validator.
    >
    > http://jigsaw.w3.org/css-validator/...owpc.co.uk/nowpcNEWSITE/styles/nowpcstyle.css
    >
    > However, the issue with IE6 remains. What a... curious quirk. Still, rather
    > than ignore it, as Headless suggests, I'd like to get rid of it. Am I faced
    > with completely restructuring the CSS to achieve the same layout, but using
    > different methods (e.g. positioning rather than float etc.)?
    >
    > Thanks all again,
    > Neil
    >
    >

    http://www.xs4all.nl/~ppk/css2tests/

    ....this site knows a lot about IE
    browser bugs.
    HTH
    m
     
    m, Aug 6, 2003
    #3
  4. Neil White

    Marc Guest

    > > You might try commenting out sections of
    > > markup and sections of CSS to see which
    > > ones make the problem go away. Once you
    > > find the offending sections, you will be
    > > able to focus more clearly. Sometimes
    > > this works, sometimes it doesn't!
    > >

    >
    > Interesting. Well, when I say _interesting_, of course what I mean is
    > laborious and tedious, but a very good idea. ;-) I'll get back to you...


    If you find a way to fix it for IE, you might consider making up a separate
    stylesheet for IE, detecting the browser server-side, and then serving the
    CSS dependant on the browser. This is what I usually do.

    I can give more info on how to do this if you feel this might be a good
    option?

    HTH

    Marc
     
    Marc, Aug 6, 2003
    #4
  5. Neil White

    Chris Morris Guest

    "Marc" <> writes:
    > > Interesting. Well, when I say _interesting_, of course what I mean is
    > > laborious and tedious, but a very good idea. ;-) I'll get back to you...

    >
    > If you find a way to fix it for IE, you might consider making up a separate
    > stylesheet for IE, detecting the browser server-side, and then serving the
    > CSS dependant on the browser. This is what I usually do.


    Over-complicated. Just use one of the many CSS-hiding tricks that
    work on IE.

    /* everyone sees this */
    p { font-weight: bold; }

    /* IE/Windows doesn't see this */
    html>body p { font-weight: normal; font-style: italic; }

    /* or alternatively you could use this one if Mac IE is also a problem */

    /* IE/Windows and IE/Mac don't see this */
    p, [hideme] { font-weight: normal; font-style: 200%; }

    > I can give more info on how to do this if you feel this might be a good
    > option?


    Using CSS selector parsing bugs to hide CSS property parsing bugs is
    usually much simpler and more effective. And doesn't require any
    server-side browser detection (which can be unreliable, especially
    given the number of browsers that fake their UA as Internet Explorer,
    but have different [1] CSS support).

    http://www.w3development.de/css/hide_css_from_browsers/ has a whole
    range of CSS-hiding methods for various browsers.

    [1] Sometimes better, sometime worse. For that matter, Mac IE and
    Windows IE have incredibly different CSS support, and Win IE5 and Win
    IE6 are different in places too - the CSS hiding tricks let you be a
    bit more flexible.

    --
    Chris
     
    Chris Morris, Aug 6, 2003
    #5
  6. Neil White

    Neil White Guest

    Hi DU,

    Can I first of all say thanks for your reply. Like many people here, I'm
    learning, playing with ideas, so every reply is gratefully received, even if
    it does, erm, knock me around a bit. :)

    Du wrote:
    > I have not examined your code a lot but a few issues strike me. I think
    > you over-create containers in your code.
    > E.g.:
    > 1-
    > <body>
    > <!-- The main container for the page -->
    > <div id="divMainContainer">
    > <!-- The container for the left hand section of the page-->
    > (...)
    > </div>
    > <!-- End of divMainContainer-->
    > </body>
    >
    > Why not eliminate the div id="divMainContainer" and transfer its css
    > declarations to the body? After all, isn't the body element the main
    > container of a page's content?


    I use the divMainContainer to create a surrounding border effect using the
    body's background colour, and put a further 2px ridge border around the
    container. I kind of like the effect, and it means that I can at some point
    place a background image on the body, hopefully interacting with the
    background image in divMainContainer. I also played around with the size and
    positioning of the container as I can see then what happens to the flow of
    other div elements in the page, and just get a feel for different looks.

    > 2-
    > <div id="divRandomQuote">
    > <p>"Art is making something out of nothing and selling it."<br />
    > <strong>Frank Zappa (1940 - 1993)</strong></p>
    > </div>
    >
    > Why not compress this as:
    > <p id="divRandomQuote">"Art is making something out of nothing
    > and selling it."<br />
    > <strong>Frank Zappa (1940 - 1993)</strong></p>
    >
    > or :
    > <blockquote id="divRandomQuote">
    > "Art is making something out of nothing and selling it."<br />
    > <strong>Frank Zappa (1940 - 1993)</strong>
    > </blockquote>
    >
    > I'm convinced you can make your html markup much more compact here.


    The divRandomQuote container has moved around the page a lot. That's the
    reason it's a div. It seems to me to make more logical sense to style a div
    for position/size/clip and so on. It will almost certainly move again, so I
    think I'm likely to keep it as it is.

    > Your scripts are not the most efficient either. Your entire writedate
    > function could be optimized to render the same content but with much
    > more efficient code. It could be reduced from 60 lines to 10 lines or so.


    I'll take a look at that.

    > If you drop the span in this instruction
    > document.write("<span class='date'>"+dateText+"</span>");
    > (and you really do not need to create a span here since there is a
    > wrapping <p> in the code), then you could gain up to 300% of parsing and
    > rendering execution with other code.


    Good point. The <span> is there from old renderings of the script in other
    pages. In this page it's clearly unnecessary (you might have noticed that
    there's no "date" class at all in the style sheet) so I'll drop it.

    > Your code has already superfluous containers and your scripts create
    > others. Also, it is widely known that innerHTML and document.write are
    > the most overused and misused non-W3C-web-standards methods of
    > dynamically writing into an HTML document. I do not recommend innerHTML
    > and document.write for many reasons: there is always a much better
    > alternative.


    Um, I've seen a page somewhere that used pure CSS (CSS1 I think) with no
    javascript at all to change the text on pages, but I can't remember where.
    I'll certainly look into the alternatives, but I had no idea that innerHTML
    and document.write were not acceptable methods. Where can I find out more?

    Thanks again. You've certainly provided me with food for thought.

    Best regards
    Neil
     
    Neil White, Aug 6, 2003
    #6
  7. Neil White

    Neil White Guest

    Hi Chris,

    >
    > Over-complicated. Just use one of the many CSS-hiding tricks that
    > work on IE.
    >
    > /* everyone sees this */
    > p { font-weight: bold; }
    >
    > /* IE/Windows doesn't see this */
    > html>body p { font-weight: normal; font-style: italic; }
    >
    > /* or alternatively you could use this one if Mac IE is also a problem */
    >
    > /* IE/Windows and IE/Mac don't see this */
    > p, [hideme] { font-weight: normal; font-style: 200%; }
    >
    > > I can give more info on how to do this if you feel this might be a good
    > > option?

    >
    > Using CSS selector parsing bugs to hide CSS property parsing bugs is
    > usually much simpler and more effective. And doesn't require any
    > server-side browser detection (which can be unreliable, especially
    > given the number of browsers that fake their UA as Internet Explorer,
    > but have different [1] CSS support).
    >
    > http://www.w3development.de/css/hide_css_from_browsers/ has a whole
    > range of CSS-hiding methods for various browsers.
    >
    > [1] Sometimes better, sometime worse. For that matter, Mac IE and
    > Windows IE have incredibly different CSS support, and Win IE5 and Win
    > IE6 are different in places too - the CSS hiding tricks let you be a
    > bit more flexible.
    >
    > --
    > Chris


    Sheesh. Using _this_ bug to hide _that_ bug? My head hurts.

    Thanks.
    Neil
     
    Neil White, Aug 6, 2003
    #7
  8. Neil White

    Chris Morris Guest

    Toby A Inkster <> writes:
    > DU wrote:
    > > <blockquote id="divRandomQuote">
    > > "Art is making something out of nothing and selling it."<br />
    > > <strong>Frank Zappa (1940 - 1993)</strong>
    > > </blockquote>

    >
    > Better:
    >
    > <p id="divRandomQuote">
    > <quote>"Art is making something out of nothing and selling it."</quote>
    > <br />
    > <cite>Frank Zappa (1940 - 1993)</cite>
    > </p>


    There's no such thing as a <quote> element, though.

    <div id="RandomQuote">
    <blockquote>"Art is making something out of nothing and selling
    it."</blockquote>
    <cite>Frank Zappa (1940 - 1993)</cite>
    </div>

    --
    Chris
     
    Chris Morris, Aug 7, 2003
    #8
  9. Neil White

    DU Guest

    Chris Morris wrote:
    > Toby A Inkster <> writes:
    >
    >>DU wrote:
    >>
    >>><blockquote id="divRandomQuote">
    >>>"Art is making something out of nothing and selling it."<br />
    >>> <strong>Frank Zappa (1940 - 1993)</strong>
    >>></blockquote>

    >>
    >>Better:
    >>
    >><p id="divRandomQuote">
    >> <quote>"Art is making something out of nothing and selling it."</quote>
    >> <br />
    >> <cite>Frank Zappa (1940 - 1993)</cite>
    >></p>

    >
    >
    > There's no such thing as a <quote> element, though.
    >
    > <div id="RandomQuote">
    > <blockquote>"Art is making something out of nothing and selling
    > it."</blockquote>
    > <cite>Frank Zappa (1940 - 1993)</cite>
    > </div>
    >


    Why do you use a div for that? What is the purpose pursued with wrapping
    divs almost everywhere? Why you need to give a wrapping div to the
    blockquote. Then why not

    <div id="ThenWhyNot">
    <div id="RandomQuote">
    <blockquote>"Art is making something out of nothing and selling
    it."</blockquote>
    <cite>Frank Zappa (1940 - 1993)</cite>
    </div>
    </div>


    Why can't you just use <q cite="..." ...> or just <blockquote>... here
    in an already well defined block-level element?

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Aug 7, 2003
    #9
  10. Neil White

    Chris Morris Guest

    DU <> writes:
    > Chris Morris wrote:
    > > <div id="RandomQuote">
    > > <blockquote>"Art is making something out of nothing and selling
    > > it."</blockquote>
    > > <cite>Frank Zappa (1940 - 1993)</cite>
    > > </div>
    > >

    >
    > Why do you use a div for that? What is the purpose pursued with
    > wrapping divs almost everywhere? Why you need to give a wrapping div
    > to the blockquote. Then why not


    It groups the blockquote and the cite and makes styling them easier.
    It's not essential all the time.

    > <div id="ThenWhyNot">
    > <div id="RandomQuote">
    > <blockquote>"Art is making something out of nothing and selling
    > it."</blockquote>
    > <cite>Frank Zappa (1940 - 1993)</cite>
    > </div>
    > </div>


    That <div> is unnecessary, though, yes :)

    > Why can't you just use <q cite="..." ...> or just
    > <blockquote>... here in an already well defined block-level element?


    <p><q>quote</q> - <cite>author</cite></p> would be equally good for
    short quotes, yes.

    However, that is the same number of elements as
    <div><blockquote>quote</blockquote> <cite>author</cite></div>

    The <div> (or the <p> in the inline example) is basically just to
    group the quote element with the <cite>, as I don't feel the <cite>
    belongs as part of the quotation itself.

    --
    Chris
     
    Chris Morris, Aug 7, 2003
    #10
  11. Neil White

    DU Guest

    Chris Morris wrote:
    > DU <> writes:
    >
    >>Chris Morris wrote:
    >>
    >>><div id="RandomQuote">
    >>><blockquote>"Art is making something out of nothing and selling
    >>>it."</blockquote>
    >>><cite>Frank Zappa (1940 - 1993)</cite>
    >>></div>
    >>>

    >>Why do you use a div for that? What is the purpose pursued with
    >>wrapping divs almost everywhere? Why you need to give a wrapping div
    >>to the blockquote. Then why not

    >
    >
    > It groups the blockquote and the cite and makes styling them easier.
    > It's not essential all the time.
    >
    >
    >><div id="ThenWhyNot">
    >> <div id="RandomQuote">
    >> <blockquote>"Art is making something out of nothing and selling
    >> it."</blockquote>
    >> <cite>Frank Zappa (1940 - 1993)</cite>
    >> </div>
    >></div>

    >
    >
    > That <div> is unnecessary, though, yes :)
    >


    <div id="divRightContainer">
    (...)
    <div id="divRandomQuote">
    <p>"Art is making something out of nothing and selling it."<br />

    <strong>Frank Zappa (1940 - 1993)</strong></p>
    </div>
    </div>

    Then you agree to remove that divRightContainer then, right...?

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Aug 7, 2003
    #11
  12. Neil White

    Chris Morris Guest

    DU <> writes:
    > Chris Morris wrote:
    > > That <div> is unnecessary, though, yes :)

    >
    > <div id="divRightContainer">
    > (...)
    > <div id="divRandomQuote">
    > <p>"Art is making something out of nothing and selling it."<br />
    >
    > <strong>Frank Zappa (1940 - 1993)</strong></p>
    > </div>
    > </div>
    >
    > Then you agree to remove that divRightContainer then, right...?


    That depends on what the (...) is and why the divRightContainer is
    there in the first place.

    Probably for a quote that short,
    <div id="divRightContainer">
    (...)

    <p id="divRandomQuote"> <!-- *div*RandomQuote? -->
    <q>"Art is making something out of nothing and selling it."</q> -
    <cite>Frank Zappa (1940 - 1993)</p>

    </div>

    --
    Chris
     
    Chris Morris, Aug 7, 2003
    #12
  13. Neil White

    DU Guest

    Here's another one (and if you look closely, you'll find many occurences
    of extra redundant/unnecessary - at least, at first sight - containments
    at the OP page):

    <p class="pMenuItem"><span onmouseover="onLink(1)"><a
    href="services.html">Services</a></span> | </p>

    Can you explain why the span in there? I'm not questioning the purpose
    here. I'm questioning the code to achieve the purpose: is it compact,
    straightforward and necessary to achieve the purpose?
    If you need an onmouseover event attribute, then I would expect you to
    need to have an onmouseout event attribute as well. Otherwise you might
    just need an hover pseudo-class for the link and no onmouseover, no
    onmouseout and no span. But here, you do not have this.
    Without having examined the code carefully, this strikes me as a
    doubtful way of coding.

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Aug 7, 2003
    #13
  14. Neil White

    DU Guest

    Chris Morris wrote:
    > DU <> writes:
    >
    >>Chris Morris wrote:
    >>
    >>>That <div> is unnecessary, though, yes :)

    >>
    >><div id="divRightContainer">
    >>(...)
    >> <div id="divRandomQuote">
    >> <p>"Art is making something out of nothing and selling it."<br />
    >>
    >> <strong>Frank Zappa (1940 - 1993)</strong></p>
    >> </div>
    >> </div>
    >>
    >>Then you agree to remove that divRightContainer then, right...?

    >
    >
    > That depends on what the (...) is and why the divRightContainer is
    > there in the first place.
    >
    > Probably for a quote that short,
    > <div id="divRightContainer">
    > (...)
    >
    > <p id="divRandomQuote"> <!-- *div*RandomQuote? -->
    > <q>"Art is making something out of nothing and selling it."</q> -
    > <cite>Frank Zappa (1940 - 1993)</p>
    >
    > </div>
    >


    If you choose an inline element (like <q>, <cite>, <span>,etc,) then you
    might need to do this but not with block-level elements like
    <blockquote>, <p>, <div>: when you do that, you over-populate the
    document tree for no justifiable reasons and you increase chances of
    differential renderings in browsers and browser versions because your
    code is more complex, redrawing and reflow will be more complex, longer
    to do also. Thus another reason why the code should be as
    straightforward, compact and to-the-point as possible. It's not just the
    nested nature of elements in the containment hierarchy (DOM tree) but
    also and certainly its depth that causes eventual rendering problems/issues.

    Bugs and rendering differentials among browsers in simple pages are not
    that frequent or common; they have been identified and are well known by
    now.

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
     
    DU, Aug 7, 2003
    #14
  15. Chris Morris wrote:

    > Toby A Inkster <> writes:
    >> DU wrote:
    >> > <blockquote id="divRandomQuote">
    >> > "Art is making something out of nothing and selling it."<br />
    >> > <strong>Frank Zappa (1940 - 1993)</strong>
    >> > </blockquote>

    >>
    >> Better:
    >>
    >> <p id="divRandomQuote">
    >> <quote>"Art is making something out of nothing and selling it."</quote>
    >> <br />
    >> <cite>Frank Zappa (1940 - 1993)</cite>
    >> </p>

    >
    > There's no such thing as a <quote> element, though.


    Sorry. Should be <q>. But <q> is replaced by <quote> in the XHTML 2 draft.

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://(nothing)
     
    Toby A Inkster, Aug 7, 2003
    #15
  16. Chris Morris wrote:

    > <div><blockquote>quote</blockquote> <cite>author</cite></div>


    This is invalid anyway. Should be:

    <div><blockquote><p>quote</p></blockquote><p><cite>author</cite></p></div>

    as <cite> is inline (so needs a <p> outside it) and <blockquote> cannot
    directly comtain CDATA -- it needs an internal <p>.

    --
    Toby A Inkster BSc (Hons) ARCS | mailto: | pgp:0x6A2A7D39
    aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
    http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
    playing://(nothing)
     
    Toby A Inkster, Aug 7, 2003
    #16
  17. Neil White

    Chris Morris Guest

    Toby A Inkster <> writes:
    > Chris Morris wrote:
    > > <div><blockquote>quote</blockquote> <cite>author</cite></div>

    >
    > This is invalid anyway. Should be:


    Valid in Transitional, but yes, I missed that.

    > <div><blockquote><p>quote</p></blockquote><p><cite>author</cite></p></div>
    >
    > as <cite> is inline (so needs a <p> outside it)


    It already has a <div> outside it.

    > and <blockquote> cannot
    > directly comtain CDATA -- it needs an internal <p>.


    In Strict, yes. Hmm, suggests that the example used was definitely a
    case for <q> rather than <blockquote>.

    --
    Chris
     
    Chris Morris, Aug 8, 2003
    #17
  18. Neil White

    Neil White Guest

    Hi m

    <snip>
    > > However, the issue with IE6 remains. What a... curious quirk. Still,

    rather
    > > than ignore it, as Headless suggests, I'd like to get rid of it. Am I

    faced
    > > with completely restructuring the CSS to achieve the same layout, but

    using
    > > different methods (e.g. positioning rather than float etc.)?


    > You might try commenting out sections of
    > markup and sections of CSS to see which
    > ones make the problem go away. Once you
    > find the offending sections, you will be
    > able to focus more clearly. Sometimes
    > this works, sometimes it doesn't!


    I did this, and found the error. It was a width problem, basically - I
    forgot to take into account the padding and margin stuff. Interestingly,
    Netscape still rendered the thing fine, and so did IE6 to a point, except
    for repeating the last few characters of divs elsewhere on the page. Another
    Microsoft buffer overflow problem? Hmm.

    Anyway, thanks for the suggestion. It's done the trick. Considerable other
    stuff has gone on too, noted in other posts I'm making.

    Best regards
    Neil
     
    Neil White, Aug 8, 2003
    #18
  19. Neil White

    Neil White Guest

    Hi all,

    Chris Morris wrote:
    > >>
    > >>>That <div> is unnecessary, though, yes :)
    > >>
    > >><div id="divRightContainer">
    > >>(...)
    > >> <div id="divRandomQuote">
    > >> <p>"Art is making something out of nothing and selling it."<br />
    > >>
    > >> <strong>Frank Zappa (1940 - 1993)</strong></p>
    > >> </div>
    > >> </div>
    > >>
    > >>Then you agree to remove that divRightContainer then, right...?

    > >
    > >
    > > That depends on what the (...) is and why the divRightContainer is
    > > there in the first place.
    > >
    > > Probably for a quote that short,
    > > <div id="divRightContainer">
    > > (...)
    > >
    > > <p id="divRandomQuote"> <!-- *div*RandomQuote? -->
    > > <q>"Art is making something out of nothing and selling it."</q> -
    > > <cite>Frank Zappa (1940 - 1993)</p>
    > >
    > > </div>
    > >


    Du replied
    >
    > If you choose an inline element (like <q>, <cite>, <span>,etc,) then you
    > might need to do this but not with block-level elements like
    > <blockquote>, <p>, <div>: when you do that, you over-populate the
    > document tree for no justifiable reasons and you increase chances of
    > differential renderings in browsers and browser versions because your
    > code is more complex, redrawing and reflow will be more complex, longer
    > to do also. Thus another reason why the code should be as
    > straightforward, compact and to-the-point as possible. It's not just the
    > nested nature of elements in the containment hierarchy (DOM tree) but
    > also and certainly its depth that causes eventual rendering

    problems/issues.
    >
    > Bugs and rendering differentials among browsers in simple pages are not
    > that frequent or common; they have been identified and are well known by
    > now.
    >
    > DU


    Thanks for the informative (and informed!) discussion. I've gone for this in
    the end:

    <div id="divRandomQuote">
    <q>Art is making something out of nothing and selling it.</q>
    <cite>Frank Zappa (1940 - 1993)</cite>
    </div>

    Even though Netscape provides quotes for <q> and IE doesn't, I'm happy with
    this as the way I want to do it. It seems properly formed. I understand your
    concerns regarding extra nesting in the page, and I have gone quite some way
    to address this DU, including removing the main outer container div,
    removing unnecessary <span>s and even <p>s. However, I like the discrete
    logic to containing certain page elements in <div>s, which is why I've
    decided to keep this particular container. I've also attempted to "optimise"
    the CSS and the javascript, though I'm still unclear on how to better
    achieve the document.write/innerHTML effect.

    Thanks to everyone who has made suggestions and comments. This has been a
    couple of days of really useful work for me.

    The page as it is now is at http://www.nowpc.co.uk/nowpcNEWSITE2/index.html
    (Old http://www.nowpc.co.uk/nowpcNEWSITE/index.html)

    If the technical HTML/CSS/script aspects are considered more or less ok,
    I'll be posting at html.critique for stylistic reviews. While that's going
    on, I can carry on with shaping content... :)

    Thanks again, best regards,
    Neil
     
    Neil White, Aug 8, 2003
    #19
  20. Neil White

    Neil White Guest

    Hi DU.

    Neil White wrote:
    > >
    > > Thanks for the informative (and informed!) discussion. I've gone for

    this in
    > > the end:
    > >
    > > <div id="divRandomQuote">
    > > <q>Art is making something out of nothing and selling it.</q>
    > > <cite>Frank Zappa (1940 - 1993)</cite>
    > > </div>
    > >
    > > Even though Netscape provides quotes for <q> and IE doesn't, I'm happy

    with
    > > this as the way I want to do it. It seems properly formed. I understand

    your
    > > concerns regarding extra nesting in the page, and I have gone quite some

    way
    > > to address this DU, including removing the main outer container div,
    > > removing unnecessary <span>s and even <p>s. However, I like the discrete
    > > logic to containing certain page elements in <div>s, which is why I've
    > > decided to keep this particular container. I've also attempted to

    "optimise"
    > > the CSS and the javascript, though I'm still unclear on how to better
    > > achieve the document.write/innerHTML effect.
    > >


    Du replied:
    > For your writedate() function, I recommend to use toLocaleString. I.e.:
    >
    > <p><script type="text/javascript">var today = new
    > Date().toLocaleDateString(); document.write(today);</script></p>
    > <noscript><p>Friday, August 8th 2003</p></noscript>
    >
    > and the date will appear according to the regional parameters and
    > language settings of the user's os, so the output must user-friendly
    > since only the user defines the date format on his PC. Your writedate
    > has been trimmed from 11 lines, 4 variables including 2 arrays (with
    > initialisations) to 2 lines with 1 variable and with localization

    formating.
    >
    > More info/possibilities here:
    >

    http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/date.html#1193217

    That's an excellent example of scripting. It demonstrates a major facet of
    JavaScript (and other scripting languages) that has surprised me as I've
    learned more. I've come from C/C++ programming, where the basic library
    functions are limited. With JavaScript, the functions available are
    enormous, to the point of daunting, but clearly it pays to learn them as
    they're pretty much precompiled, ready-to-run gifts, aren't they? You've
    pushed that point home, which has been a useful result.

    Having said that, in the next revision this script won't be used on this
    site, at least in its present context, since reviewers on alt.critique (I
    jumped the gun and submitted there already) have said that they don't need
    to know the date from my page. Hmm. So ok, the date script has got to go,
    unless/until it finds some actual purpose for being there!

    > Regarding your function onLink(link), I don't even understand why all
    > these links need to be dynamically created.
    > Will these links need to be modified in the future?
    >
    > text="<p><a href='services.html'>NOWPC services</a></p>";
    > if(link==2) text="<p><a href='info.html'>About NOWPC</a></p>";
    > if(link==3) text="<p><a href='links.html'>Portfolio and other
    > sites</a></p>";
    > if(link==4) text="<p><a href='gifts.html'>NOWPC Freebies!</a></p>";
    > if(link==5) text="<p><a href='costs.html'>Get an online

    quotation</a></p>";
    >
    > ... aren't these links pretty permanent in your page?
    >
    > ...and if, for some reason, they need to be modified dynamically, then
    > just modifying the href attribute value and the first child node (i.e.:
    > anchorRef.href = "somewhere.html"; anchorRef.childNodes[0].nodeValue =
    > "New text for a link") would be amply sufficient.
    > Document.write and innerHTML use a lot of cpu, RAM and resources to be
    > performed, carried out; they are not as efficient than other methods.


    I intend to create a submenu for each main menu context, though the content
    has still to be properly organised. Therefore, it exists right now simply as
    a test for the functionality of the scripting. Though I take your point
    regarding efficiency, currently the scripting you suggest refers to DOM
    knowledge I just don't have. At least, I think it's DOM... It gives me good
    references to Google for, though. :)

    > You'll need to optimize the CSS. Combining and compressing css rules,
    > using wisely the inheritance of properties. Hint: I see a lot of
    > color:#000000; and background declarations.


    I do know what you're getting at (ok, it's pretty obvious!), and I'll
    re-examine that.

    >Knowing well the default
    > (browser) values of properties and if they inherit help a lot. I'm sure
    > you can make the code a lot more compact.
    > Here's an unsurpassed resource on this issue:
    >
    > http://richinstyle.com/masterclass/perfection.html
    >
    > I see that you remove position:absolute on a selector: I think this is a
    > good decision since there was no need AFAICS for that.


    Well, I worked on commenting out sections of the CSS as suggested by "m" in
    another reply to my original problem. Whatever made no apparent change
    across my three test browsers (IE6sp1, Opera7.11 and Netscape7) got deleted.
    Sometimes, it taught me better ways to achieve the same thing. It also
    resulted in me discovering the cause of the problem for the original query.

    Err, dumb off-the-map question, but what does AFAICS mean?

    > I would suggest to add a small section or warning of some sort for users
    > having old browsers, non-compliant web browsers (those who don't support
    > or don't support well CSS1, DOM1 and HTML 4.01) since you're using XHMTL
    > 1.0. Don't change the DTD: you're ok here. It's people not upgrading. In
    > any case, if your page uses nothing extraordinary in terms of CSS, DOM,
    > javascript, then 96% of all users using browsers out there should view
    > your page without problems. If your target audience is also screen
    > readers, PDA, mobile phones, then you'll need to test your page more
    > with text browser viewer (delorie.com has a lot of useful tools for such
    > testing; colorfilter.wickline.org has a good viewing tool turning off
    > CSS and javascript for testing).


    Thanks for the advice/links. I _hope_ to avoid using "extraodinary"
    markup/scripts/structure. I _do_ wish the site to be as universal as I can
    achieve, and that is across abilities and platforms. I absolutely _will_
    work on this.

    > One last suggestion: you need to establish colors that match well,
    > constrasting enough (between background and text) but not too much
    > constrasting: white on black and/or black on white is very contrasting.
    > webstyleguide.com has a good chapter on this issue (color balance,
    > constrast,etc).
    > Here, I would choose a distinct, unique color for the links on all your
    > website pages and it would be underlined on a mouseover. Just a
    > a:hover {text-decoration:underline;}
    > declaration added would do this... along with other css declarations.
    > Right now, your links and text are white and links are not graphically
    > reactive on a mouseover. J. Nielsen had a comment on this...
    >
    > Top Ten Mistakes in Web Design
    > "8. Non-Standard Link Colors
    > Links to pages that have not been seen by the user are blue; links to
    > previously seen pages are purple or red. Don't mess with these colors
    > since the ability to understand what links have been followed is one of
    > the few navigational aides that is standard in most web browsers.
    > Consistency is key to teaching users what the link colors mean."
    > http://www.useit.com/alertbox/9605.html
    >
    > You could choose another color than the standard, default blue
    > (unvisited) and purple (visited) but then you would have to be using
    > your colors consistently in all your pages (so that your visitors don't
    > get disoriented, confused) and such colors would have to
    > be easily perceptible on your background.


    I know this is somewhat contentious, but I happen to agree with the school
    that thinks links can be whatever colour the site designer desires, as long
    as they're consistent within the site. I also agree that underlining is a
    good clue to links that should be used carefully, if at all, in other
    elements. However, since I have no artist's eye for colour I have to develop
    schemes with method and tools. If the results don't work aesthetically for
    others, it's good information for me. I need to start again. I do try to
    maintain contrast and feel, though. (I often feel I would work much better
    in league with an actual real live proper artist though...!)

    > DU


    Sincerely, thanks very much DU. You've given far more than I could have
    asked for, and I'm genuinely grateful. You never know, all this might
    actually make me a better web worker. ;-)

    Best regards,
    Neil
     
    Neil White, Aug 8, 2003
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Peter
    Replies:
    4
    Views:
    415
    Scott Ellsworth
    Oct 18, 2004
  2. Headless

    Re: IE6 has beat me up

    Headless, Aug 6, 2003, in forum: HTML
    Replies:
    2
    Views:
    401
  3. Headless

    Re: IE6 has beat me up

    Headless, Aug 6, 2003, in forum: HTML
    Replies:
    0
    Views:
    401
    Headless
    Aug 6, 2003
  4. Jan Faerber
    Replies:
    6
    Views:
    360
    Jan Faerber
    Oct 11, 2004
  5. KiwiBrian

    Got me beat...

    KiwiBrian, Jun 3, 2005, in forum: HTML
    Replies:
    4
    Views:
    535
    Adrienne
    Jun 3, 2005
Loading...

Share This Page