i am working with divs. i have a header div with menu and under that i have 2 divs that contiain jpegs using float left and float right.
in mozila and ie7 the 2 divs under the header are positioned correct but in ie6 there is a space that i dont know how to control?
here is the link:
http://www.tamisivan.com/temp/global/Added%20Value.html

First, when you float an element, you MUST give it a defined width.

Second, you're triggering IE6's doubled-float margin bug when you put a left margin on a left-floated div. Same goes for float right and margin right.

In order to stop that bug, you need to add display:inline to those floated divs BUT put that in a separate CSS file and call it with conditional comments to target JUST IE6.

That menu div is picking up the default font of 12px, which IE is going to make room for even if there's nothing there. You shouldn't be using px for font sizing anyway.

i decided to use a diffrent method. i created a main div with position:relaive;
margin:0 auto;
and all other divs are in the main div, the header is divided to a jpeg and flash. the divs underneath contain the main text on top of a picture using z-index. my problem is that the picture on the right hand side is positiond lower in IE so i had to add position:relative;
top:-16px; so now it looks good in IE but in MOzila ad safari its to high...
is there away to effect only one of he browzers?

Positioning is going overboard, and not necessary. Z-index ONLY works on elements that are absolutely or relatively positioned.

slowly i am changing every thing and running into new problems.....
now i realized that i can use background-image: instead of the z-index. i did that for the menu background div , and when i add the menu (<ul>) to the div i get a space in mozila between the menu div and the header div above. in IE 7 its good....

That space appears to be coming from the Flash div.
as for Flash, you shouldn't be using <embed>. Read the stickies for alternatives.

i am using:

 <div class="menuCont1"> <div class="menuContainer"><ul id="menu">
<li style="margin-left:-19px;"><a href="Added Value.html">Added Value</a></li>
<li style="margin-left:2px;"><a href="Water.html">Water</a></li>
<li style="margin-left:22px;"><a href="Fire.html">Fire</a></li>
<li style="margin-left:20px;"><a href="Energy.html">Energy</a></li>
</ul></div></div>

and i found out that using a list? is what is causing the problem-i checked the embed end even if i replaced the flash with a jpeg i still have the space.....
in the css i have this:

.menuCont1{
background-image:url(images/menuBg.jpg);
height:35px;
}
.menuContainer{
height:35px;
}
 
ul#menu
{
padding-top:10px;
list-style-type: none;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
#menu li
{
display: inline;
padding-left:26px;
list-style:none;
}
#menu a:link, #menu a:visited
{
color:#ffffff ;
text-decoration: none;
}
#menu a:hover
{
color: #cccccc;
}