Third_floor
Posts: 4

My website (here) uses layers that are displayed on the current page.  On IE6 they display wonderfully, but on Firefox and Opera they are offset.  In GoLive, I had to offset the layers in order for them to line up correctly with the other navigation buttons.  Can anyone tell me why this is happening, and what I can do to fix it, both in GoLive (so I don't have to adjust the layers by eye) and so it looks acceptable in all browsers?

EDIT: Maybe I should have posted this in the layout thread...  Sorry, I'm relatively new to both design and to forums, so please excuse any newbie-ishness that I emanate.

Joe Gillespie
Posts: 528

Hi, I can't see the offsets you are talking about, you seem to be using tables instead of divs? It looks fine to me on Mozilla (Mac).

One thing I will say is that it would be better if you set the body colour to black, it seems to be white initially in my browser and takes a few seconds to become black. Put

body {background-color: black; color: white }

in your style declarations.

Jdenny
Posts: 65

Welcome newbie!  

1st of all, welcome to the crazy world of cross-browser compatability!

2nd, I suggest instead of floating layers, you simply change the src="" of the navigation button image.

Third_floor
Posts: 4

Hey, I did not expect such a quick response.  Thanks for the hints, I'll try it out and let you know how it works... I never liked the idea of using layers for navigation, but I couldn't think of a way around it.

*Changing bg color to black and getting rid of layers*

Third_floor
Posts: 4

I got rid of the layers now, and just changed the "src=" to the rollover image.  Thanks.

I also changed the background color to black, as you suggested.  Now, about divs...  I use GoLive and their layout grids and I'm not really that great with the actual code.  Is there any way you suggest that I could change my page to divs from tables?

Joe Gillespie
Posts: 528

GoLive is very good for making layer-based layouts - provided they are position:absolute. All you need to do is create a layer(<div> that corresponds to each table cell and put the appropriate table cell contents inside them.

The trouble is that that produces a rigid web page and rigid web pages are likely to break - especially if the type size is changed by the user. The content of <divs> should be allowed to expand - at least downwards, but preferably sideways as well as the browser is resized.

Fluid designs are slightly more challenging, but that's what you should be aiming for.