IE -v- FF layering problem

Discussion in 'HTML' started by no@mail.thanks, Jun 15, 2009.

  1. Guest

    Beavering away at a new layout and viewing my changes with firefox, it
    suddenly occurred to me to check IE. Wish I hadn't bothered...
    http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
    works fine in Firefox, but loading the page in explorer7 puts a
    relatively positioned image on top of the menu tables. My laptop has
    IE8, which 'appears' to place the menu on the highest Z-index and keep
    the absolute image underneath, but 'breaks' the layout of the right
    column anyway.
    Worse, on individual product pages like this demo
    http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
    menu as soon as the cursor drifts over the transparent content lower
    down the page. (IE8 seems to get this page right, though).
    Anyone offer any help on the above, before I give up! Cheers in
    advance
    , Jun 15, 2009
    #1
    1. Advertising

  2. Neredbojias Guest

    On 15 Jun 2009, ks wrote:

    > Beavering away at a new layout and viewing my changes with firefox,
    > it suddenly occurred to me to check IE. Wish I hadn't bothered...
    > http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
    > works fine in Firefox, but loading the page in explorer7 puts a
    > relatively positioned image on top of the menu tables. My laptop has
    > IE8, which 'appears' to place the menu on the highest Z-index and
    > keep the absolute image underneath, but 'breaks' the layout of the
    > right column anyway.


    Looks the same to me in both. -And I don't see any columns?? (per se)
    Are you using the latest version of ie7? Were you out drinking last
    night?



    > Worse, on individual product pages like this demo
    > http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
    > menu as soon as the cursor drifts over the transparent content lower
    > down the page. (IE8 seems to get this page right, though).
    > Anyone offer any help on the above, before I give up! Cheers in
    > advance


    Okay, that I see. The reason is that it's "under" the "translucent"
    text container for some reason in ie7 instead of over it. Dunno why
    but a place to start looking.

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, Jun 16, 2009
    #2
    1. Advertising

  3. Guest

    On Mon, 15 Jun 2009 23:02:47 +0000 (UTC), Neredbojias
    <> wrote:

    >On 15 Jun 2009, ks wrote:
    >
    >> Beavering away at a new layout and viewing my changes with firefox,
    >> it suddenly occurred to me to check IE. Wish I hadn't bothered...
    >> http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
    >> works fine in Firefox, but loading the page in explorer7 puts a
    >> relatively positioned image on top of the menu tables. My laptop has
    >> IE8, which 'appears' to place the menu on the highest Z-index and
    >> keep the absolute image underneath, but 'breaks' the layout of the
    >> right column anyway.

    >
    >Looks the same to me in both. -And I don't see any columns?? (per se)
    >Are you using the latest version of ie7? Were you out drinking last
    >night?
    >

    The 'Browse catalogue' dropdown in the menubar (which has the five
    columns I mentioned :) ) appears BEHIND the image at the lower right
    which sits OVER the content div.
    >
    >> Worse, on individual product pages like this demo
    >> http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
    >> menu as soon as the cursor drifts over the transparent content lower
    >> down the page. (IE8 seems to get this page right, though).
    >> Anyone offer any help on the above, before I give up! Cheers in
    >> advance

    >
    >Okay, that I see. The reason is that it's "under" the "translucent"
    >text container for some reason in ie7 instead of over it. Dunno why
    >but a place to start looking.


    IE8 displays it OVER that translucent layer, as it should do. What I
    can't figure out is WHY, or more importantly, how to correct it!
    , Jun 16, 2009
    #3
  4. dorayme Guest

    In article <>, ks
    wrote:

    > Beavering away at a new layout and viewing my changes with firefox, it
    > suddenly occurred to me to check IE. Wish I hadn't bothered...
    > http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
    > works fine in Firefox, but loading the page in explorer7 puts a
    > relatively positioned image on top of the menu tables. My laptop has
    > IE8, which 'appears' to place the menu on the highest Z-index and keep
    > the absolute image underneath, but 'breaks' the layout of the right
    > column anyway.
    > Worse, on individual product pages like this demo
    > http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
    > menu as soon as the cursor drifts over the transparent content lower
    > down the page. (IE8 seems to get this page right, though).
    > Anyone offer any help on the above, before I give up! Cheers in
    > advance


    You have given me at least one possible good idea for a dropdown menu.
    Make it so big no one can slip off it and curse! <g>

    Some suggestions:

    Don't use transitional doctype unless you have a special reason. As a
    very famous person here called B said once, unless you are actually
    transitioning from something. (Best to use HTML 4.01, btw, IE copes
    badly or barely with XHTML)

    At least have a bit of a go at validating your HTML doc before
    submitting here. You do realise you are at alt.html, not anything goes
    here, mate! There are standards to be maintained.

    Best to use percentages or em for font size for web pages, not px.

    A header of width:920px; is too wide. Why impose horizontal scrolling on
    people? Your material does not really demand it.

    Look at the page as if the user needs the text bigger or smaller than
    you are used to and see what happens. You might be surprised.

    If you attend to these matters first and there is still an IE problem,
    that is the time to worry.

    --
    dorayme
    dorayme, Jun 16, 2009
    #4
  5. Neredbojias Guest

    On 15 Jun 2009, ks wrote:

    > On Mon, 15 Jun 2009 23:02:47 +0000 (UTC), Neredbojias
    > <> wrote:
    >
    >>On 15 Jun 2009, ks wrote:
    >>
    >>> Beavering away at a new layout and viewing my changes with firefox,
    >>> it suddenly occurred to me to check IE. Wish I hadn't bothered...
    >>> http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
    >>> works fine in Firefox, but loading the page in explorer7 puts a
    >>> relatively positioned image on top of the menu tables. My laptop
    >>> has IE8, which 'appears' to place the menu on the highest Z-index
    >>> and keep the absolute image underneath, but 'breaks' the layout of
    >>> the right column anyway.

    >>
    >>Looks the same to me in both. -And I don't see any columns?? (per
    >>se) Are you using the latest version of ie7? Were you out drinking
    >>last night?
    >>

    > The 'Browse catalogue' dropdown in the menubar (which has the five
    > columns I mentioned :) ) appears BEHIND the image at the lower right
    > which sits OVER the content div.


    Yeah, now I see it. Also, in ie8 that whole right side from "Latest
    News" to the image is lower than it should be.

    Something I notice in your source is several hovers on non-a elements.
    I don't believe ie7 supports this while compliant browsers do.

    >>> Worse, on individual product pages like this demo
    >>> http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on
    >>> the menu as soon as the cursor drifts over the transparent content
    >>> lower down the page. (IE8 seems to get this page right, though).
    >>> Anyone offer any help on the above, before I give up! Cheers in
    >>> advance

    >>
    >>Okay, that I see. The reason is that it's "under" the "translucent"
    >>text container for some reason in ie7 instead of over it. Dunno why
    >>but a place to start looking.

    >
    > IE8 displays it OVER that translucent layer, as it should do. What I
    > can't figure out is WHY, or more importantly, how to correct it!


    The trialindex page is pretty complicated and has 33 html validation
    errors. That could affect the integrity of the css (-which has 2
    errors).

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, Jun 16, 2009
    #5
  6. Guest

    On Tue, 16 Jun 2009 10:07:44 +1000, dorayme
    <> wrote:

    >In article <>, ks
    >wrote:
    >
    >> Beavering away at a new layout and viewing my changes with firefox, it
    >> suddenly occurred to me to check IE. Wish I hadn't bothered...
    >> http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
    >> works fine in Firefox, but loading the page in explorer7 puts a
    >> relatively positioned image on top of the menu tables. My laptop has
    >> IE8, which 'appears' to place the menu on the highest Z-index and keep
    >> the absolute image underneath, but 'breaks' the layout of the right
    >> column anyway.
    >> Worse, on individual product pages like this demo
    >> http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
    >> menu as soon as the cursor drifts over the transparent content lower
    >> down the page. (IE8 seems to get this page right, though).
    >> Anyone offer any help on the above, before I give up! Cheers in
    >> advance

    >
    >You have given me at least one possible good idea for a dropdown menu.
    >Make it so big no one can slip off it and curse! <g>
    >
    >Some suggestions:
    >
    >Don't use transitional doctype unless you have a special reason. As a
    >very famous person here called B said once, unless you are actually
    >transitioning from something. (Best to use HTML 4.01, btw, IE copes
    >badly or barely with XHTML)
    >
    >At least have a bit of a go at validating your HTML doc before
    >submitting here. You do realise you are at alt.html, not anything goes
    >here, mate! There are standards to be maintained.
    >
    >Best to use percentages or em for font size for web pages, not px.
    >
    >A header of width:920px; is too wide. Why impose horizontal scrolling on
    >people? Your material does not really demand it.
    >
    >Look at the page as if the user needs the text bigger or smaller than
    >you are used to and see what happens. You might be surprised.
    >
    >If you attend to these matters first and there is still an IE problem,
    >that is the time to worry.


    Okay, all taken on board - I'll have a fiddle and see what happens. TY
    both
    , Jun 16, 2009
    #6
  7. Guest

    On Tue, 16 Jun 2009 09:36:18 +0100, ks wrote:

    >On Tue, 16 Jun 2009 10:07:44 +1000, dorayme
    ><> wrote:
    >
    >>In article <>, ks
    >>wrote:
    >>
    >>> Beavering away at a new layout and viewing my changes with firefox, it
    >>> suddenly occurred to me to check IE. Wish I hadn't bothered...
    >>> http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
    >>> works fine in Firefox, but loading the page in explorer7 puts a
    >>> relatively positioned image on top of the menu tables. My laptop has
    >>> IE8, which 'appears' to place the menu on the highest Z-index and keep
    >>> the absolute image underneath, but 'breaks' the layout of the right
    >>> column anyway.
    >>> Worse, on individual product pages like this demo
    >>> http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
    >>> menu as soon as the cursor drifts over the transparent content lower
    >>> down the page. (IE8 seems to get this page right, though).
    >>> Anyone offer any help on the above, before I give up! Cheers in
    >>> advance

    >>
    >>You have given me at least one possible good idea for a dropdown menu.
    >>Make it so big no one can slip off it and curse! <g>
    >>
    >>Some suggestions:
    >>
    >>Don't use transitional doctype unless you have a special reason. As a
    >>very famous person here called B said once, unless you are actually
    >>transitioning from something. (Best to use HTML 4.01, btw, IE copes
    >>badly or barely with XHTML)
    >>

    Doctype changed to 4.01 (didn't help the problem though :( )

    >>At least have a bit of a go at validating your HTML doc before
    >>submitting here. You do realise you are at alt.html, not anything goes
    >>here, mate! There are standards to be maintained.
    >>

    Had a go at validating and got it down to just two errors - the first
    I don't understand at all, and the second seems 'wrong' somehow in
    that the <p> it complains about *is* open and needs closing!

    >>Best to use percentages or em for font size for web pages, not px.
    >>

    I'm going to have to look at that in more depth as its going to take
    longer to change than I have at the mo!

    >>A header of width:920px; is too wide. Why impose horizontal scrolling on
    >>people? Your material does not really demand it.
    >>

    Fair comment - I do intend to change it to somewhere around 800px once
    I've got all the other probs out of the way.

    >>Look at the page as if the user needs the text bigger or smaller than
    >>you are used to and see what happens. You might be surprised.
    >>

    This'll get corrected with the px/em bit above.

    >>If you attend to these matters first and there is still an IE problem,
    >>that is the time to worry.

    >

    Right, all that done and the problem persisted. I found a 'cure', but
    not sure what other implications of it might yet arise. Removing the
    'position: relative' attribute from the transparent div does now
    correctly 'hide' it under the drop down element in IE7. IE8 throws up
    another few problems now though - all text in the transparent div show
    as a hyperlink (GOD knows why!) and the horizontal size has 'broken'
    and forced the images in the right column down below the left div.

    >Okay, all taken on board - I'll have a fiddle and see what happens. TY
    >both
    , Jun 16, 2009
    #7
  8. dorayme Guest

    In article <>,
    ks wrote:

    > On Tue, 16 Jun 2009 09:36:18 +0100, ks wrote:
    >

    ....
    > >>> Beavering away at a new layout and viewing my changes with firefox, it
    > >>> suddenly occurred to me to check IE. Wish I hadn't bothered...
    > >>> http://www.a1gardenbuildings.co.uk/trialindex.html is an example,


    > Had a go at validating and got it down to just two errors - the first
    > I don't understand at all, and the second seems 'wrong' somehow in
    > that the <p> it complains about *is* open and needs closing!
    >

    ....

    Use:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    .... not quite what you have.

    Now you are using 4.01 Strict, don't use this style close

    charset=iso-8859-1" />

    This should now be

    ....charset=iso-8859-1">

    Ditto in many other tags.

    >
    > >>If you attend to these matters first and there is still an IE problem,
    > >>that is the time to worry.

    > >

    > Right, all that done and the problem persisted. I found a 'cure', but
    > not sure what other implications of it might yet arise. Removing the
    > 'position: relative' attribute from the transparent div does now
    > correctly 'hide' it under the drop down element in IE7. IE8 throws up
    > another few problems now though - all text in the transparent div show
    > as a hyperlink (GOD knows why!) and the horizontal size has 'broken'
    > and forced the images in the right column down below the left div.
    >
    > >Okay, all taken on board - I'll have a fiddle and see what happens. TY
    > >both


    Maybe I will have time tomorrow to take a look if the problem you are
    seeing is in IE7? Have not yet got quick access to IE8.

    --
    dorayme
    dorayme, Jun 16, 2009
    #8
    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. =?Utf-8?B?UGF1bCBLZWVnc3RyYQ==?=

    Layering Images in ASP.Net 1.1

    =?Utf-8?B?UGF1bCBLZWVnc3RyYQ==?=, Mar 28, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    639
    darrel
    Mar 28, 2005
  2. Grzegorz Stasica

    Layering struts application

    Grzegorz Stasica, Feb 19, 2004, in forum: Java
    Replies:
    1
    Views:
    625
  3. Mr. Magic

    Layering pictures.

    Mr. Magic, Jan 4, 2010, in forum: ASP .Net
    Replies:
    3
    Views:
    2,173
    Alexey Smirnov
    Jan 5, 2010
  4. Mike

    Problem problem problem :( Need Help

    Mike, May 7, 2004, in forum: ASP General
    Replies:
    2
    Views:
    521
    Bullschmidt
    May 11, 2004
  5. news.verizon.net

    javascript layering? Maybe wrong question..

    news.verizon.net, Jul 9, 2003, in forum: Javascript
    Replies:
    1
    Views:
    83
    Chris Leonard
    Jul 9, 2003
Loading...

Share This Page