Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

virus187

macrumors newbie
Original poster
Apr 23, 2009
17
0
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

http://www.beats2buy.com

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
Virus187
 

Matek

macrumors 6502a
Jun 6, 2007
535
1
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.
 

virus187

macrumors newbie
Original poster
Apr 23, 2009
17
0
Hi Matek

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

Thanks
Virus187
 

Matek

macrumors 6502a
Jun 6, 2007
535
1
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.
 

virus187

macrumors newbie
Original poster
Apr 23, 2009
17
0
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
virus187
 

Matek

macrumors 6502a
Jun 6, 2007
535
1
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.
 

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
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.

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.

-jim
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.