iweb layering internet explorer (IE)

Discussion in 'Web Design and Development' started by virus187, Apr 23, 2009.

  1. virus187 macrumors newbie

    Apr 23, 2009
    Hi All,

    I have published my iweb created site via cyberduck FTP and it works great in firefox and safari but when i go to this on a PC (internet explorer) the layers are all messed up and the flash menu and banner hyperlinks become inactive.
    Also the yellow paypal image has been pushed behind the flash banner instead of appearing in front, who am i doing wrong

    my website created in iweb


    NOTE - I created hyperlinks over the flash menu and banner by adding a text box (which is transparent) over each circle button and the whole banner and added hyperlinks to them but for some reason internet explorer has pushed these text box layers behind the flash images so now the links dont work. Is it something to do with the z index layers??

    PLEASE HELP!?...

    Thank you in advance
  2. Matek macrumors 6502a

    Jun 6, 2007
    It looks strange in Google Chrome and Firefox 2 as well, the long flash banner is covering the yellow paypal banner. Welcome to web design.

    Browsers nowadays support different standards and interpret certain settings in different ways, it's up to the webdesigner to design the page in such a way that it will work correctly in all browsers. Older versions of IE are particularly problematic.

    This is much easier if you know the inner workings of HTML/CSS and fix them by hand. It will probably be much more difficult to fix in iWeb or other WYSIWYG editors. In your case "layers" a.k.a. absolutely-positioned elements are causing most of the problems. You can usually avoid the use of such elements by smartly placing elements in non-absolute ways, try and give that a shot.
  3. virus187 thread starter macrumors newbie

    Apr 23, 2009
    Hi Matek

    Thanks for the advice. Sorry I am not totally getting what you mean by "placing them in non-absolute ways?"

  4. Matek macrumors 6502a

    Jun 6, 2007
    When you create an element, like an image, you can either set its exact coordinates in pixels and its z-index to determine which element should be placed under and which over it. This is called absolute positioning a.k.a. layers, because the elements don't care about other elements surrounding them.

    The more "usual" way is simply placing elements one after another and then determining their positions by setting margins and paddings that tell you how far apart from each other they should be. I hate to judge, but this is the "correct" way to do things. It is usually also easier to achieve browser-compatibility by doing things this way.
  5. virus187 thread starter macrumors newbie

    Apr 23, 2009
    Thanks mate

    I noticed when i right click view source that the wording of both flash menu and banner are absolute..........I can open this html page up in dreamweaver to edit but what word do i enter instead of absolute? =nonabsolute?

    sorry to sound silly but its all self taught for me!

    Thank you
  6. Matek macrumors 6502a

    Jun 6, 2007
    You can either leave it empty or use "relative". But expect things to become problematic after that, you will have to set margins and paddings to make it work.
  7. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    Exactly, and well said. I'd like to expand on that a little, when designing the page, I often create all the div containers and set static height and width in the CSS, before adding any content. I often add borders temporarily so I can see how they all fit and use up the screen space. Once I'm happy, I then add content, remove heights only where necessary and kill the borders. The whole time just a simple matter of editing the style sheet.

    To each their own, of course, but thought this might be helpful to some.

  8. vivithemage macrumors 6502a


    Jul 12, 2008
    weird, IE7 also shows the layers are ... off.
  9. melblu2 macrumors newbie

    Oct 28, 2009
    simple solution to getting iWeb to cooperate in IE?

    hi all

    am not a developer but am trying to help a friend resolve how the site she built in iWeb can stop fracturing in IE. the formatting shifts on both navigation and in content frames. any ideas for the lay person?



Share This Page