I am using Dreamweaver and every time I convert any of my tables into layers, I get allot of overlapping. Has anyone else had this problem? I am using IE 7. This also happens when I look at other sites using div tags.

First of all, they are NOT LAYERS !! "Layers" is an old holdover from the Netscape Navigator days. They are DIVs, meaning 'divisions'.

I'll bet you that when you convert from tables to DIVs with DW it's creating a ton of absolutely positioned divs - which is bad.

Better to start over, set up your layout BY HAND FIRST, then copy your content into the new layout.

Without a url or seeing your code, no one can help much.

Originally Posted by LadynRed

Without a url or seeing your code, no one can help much.

I put a link on my site labeled div in the footer on the main page so you can see my code. www.amnicodirect.com

Thanks.
Ok, part of your problem is that you are re-using the same ID over and over again. You cannot do that, ID's MUST be unique, use them one time per page. If you want to reuse a set of rules for something, then define them as a CLASS.

You have a serious case of div-itis there. All those divs at the top are horrendous. When converting away from tables, you must also abandon the mindset of how you 'slice' your images, there is no longer any need to think in 'table cells' that piece together an image. Think broader !

That whole banner-top, banner-middle, banner-bottom thing.. make ONE dive call it 'banner' and put the banner image in there as a background to the div. On the banner section of yours, I'd take a small piece of it and and use it as a tile-able image that you repeat horizontally only. Then I'd place the logo and the girl inside the banner div and float them left and right respectively.

For your 'category list' - use an actual unordered LIST <UL> and not a bunch of divs. You can use 1 div on the side to contain the nav and categories.

I would also recommend you get rid of all the 'position: absolute' on everything and use the normal document flow and floats. Absolute positioning takes the element OUT of the document flow and therefore nothing else in the page interacts with it.

I don't see any of the overlapping you describe, is it on something specific ? Does it only do it in IE ??

I don't see any of the overlapping you describe, is it on something specific ? Does it only do it in IE ??

I think it is only happing with IE when anyone else looks at it, it looks fine. I don't get why? The buttons on the header are mirrored, and the product pic overlaps the text.

Thank you for all you other information!~ That is great help.

I would also recommend you get rid of all the 'position: absolute' on everything and use the normal document flow and floats. Absolute positioning takes the element OUT of the document flow and therefore nothing else in the page interacts with it.

What do you recommend using? When I use relative it tiles everything.(might be IE?)

You don't need to position everything. Position only those elements where it's necessary. I normally only set position:relative on my wrapper div, little else gets positioned. Once in a while I'll use position:absolute for something, depends on the design, but I don't use it all over the place.

Use the normal document flow - left to right, top to bottom. You might want to read thru some of this info:
http://css-discuss.incutio.com/?page=FloatLayouts

Thank you for your help.

Actually, when do you have to use the z-index attribute?
Only for 2 or more overlapping div's?
Also in a container-div with a few other div's in it?

Z-index only works with absolutely or relatively positioned elements, otherwise it's pointless.