Space betwwen two DIV tags in IE

Using the code below I have create two IDs that site next to each other.  The Navigation ID is designed to be a container for a flash menu.  The Navigation 2 ID fills in the elftover space with an image representing a slice of the flash menu.  This creates a continous menu all the way accross the page.  The problem is that in IE, a 1 or 2 pixel space appears between the two divs creating a gab between the actual menu and the filler graphic.  I added background colors so I could see the box.

Is there a way to fix this?

It works fine in Safari, Firefox (Mac & PC), but not in IE

Thanks

Phil

========Sample Code============

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<!-- saved from url=(0014)about:internet -->
<!-- The script to prevent blocking in IE and for other menu maintenance -->
<script src='http://f-source.com/support/ActiveContent3_2a.js' type='text/javascript'></script>
<!-- If you are testing the menu locally or want to speed up script loading, download the script, -->
<!-- save it in your directory and point to a local file instead of src='http://f-source.com... -->
<style type="text/css">
<!--
#navigation {
      height : 48px;
      float : left;
      background-color: #FFFF00;
      width: 760px;
      margin: 0px;
}
#navigation2 {
      height : 48px;
      background-image: url(/common/wrapper/menubar.jpg);
      background-repeat: repeat-x;
      margin-left: 760px;
      background-color: #00FF00;
}
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
}
-->
</style>
</head>

<body>
<!-- f-source menu navigation settings (search engines friendly) -->
<!-- Change these links and press F12 to test -->
<div id="navigation">
  <div id='menu' style='position:absolute; visibility:hidden;'>
    <div><a href='http://f-source.com'>&lt;b&gt;HOME&lt;/b&gt;</a></div>
    <div id='submenu'>
      <div><a href='http://f-source.com' target='_blank'>SubButton1-1</a></div>
      <div><a href='http://f-source.com'>SubButton1-2</a></div>
      <div><a href='http://f-source.com'>SubButton1-3</a></div>
      <div><a href='http://f-source.com'>SubButton1-4</a></div>
    </div>
    <div><a href='http://f-source.com'>&lt;b&gt;BLOG&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;ARTICLES&lt;/b&gt;</a></div>
    <div id='submenu'>
      <div><a href='http://f-source.com'>SubButton3-1</a></div>
      <div><a href='http://f-source.com'>SubButton3-2</a></div>
      <div><a href='http://f-source.com'>SubButton3-3</a></div>
    </div>
    <div><a href='http://f-source.com'>&lt;b&gt;NEWS&lt;/b&gt;</a></div>
    <div id='submenu'>
      <div><a href='http://f-source.com'>SubButton4-1</a></div>
      <div><a href='http://f-source.com'>SubButton4-2</a></div>
      <div><a href='http://f-source.com'>SubButton4-3</a></div>
      <div><a href='http://f-source.com'>SubButton4-4</a></div>
    </div>
    <div><a href='http://f-source.com'>&lt;b&gt;FILES&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;FORUMS&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;MARKETPLACE&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;JOBS&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;MULTIMEDIA&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;ABOUT&lt;/b&gt;</a></div>
  </div>
  <!-- You don't need to change this code directly. Read about proper menu configuration http://f-source.com/buy/mmStyleMenu/#menu_config -->
  <div id="f-source-menu" style="top:10px;">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="760" height="48" >
      <param name="flash_component" value="BusinessMenuFull.swc" />
      <param name="movie" value="nav2.swf" />
      <param name="quality" value="high" />
      <param name="FlashVars" value="flashlet={_subButtonTextColor:#5B5B5C,_subShowSpeed:5,_subMenuColor:#fefefe,_mainButtonHeight:28,_subFont:'Verdana',_subButtonHeight:15,_menuColor:#2A75AF,_mainButtonTextColor:#FFFFFF,stretch_width_to:'760px',_mainFontSize:10,bg_Pic_URL:'None',_mainFont:'Verdana',_mainButWidthExt:12,_mainHighlightColor:#2A75AF,xml_Path:'None',_subFontSize:10}" />
      <param name="wmode" value="transparent" />
    </object>
    <script type="text/javascript">var connected; if (connected){ Run_f_source_menu() }else{ alert("The page is not connected with script file ActiveContent3_2.js") };</script>
  </div></div><div id="navigation2">test</div>
  <p><img src="images/pix.png" alt="pix" width="760" height="10" /> </p>

</body>
</html>
SiriusPhilAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

VirusMinusCommented:
few things to try:

1. an alternate approach would be to have the floated navigation inside of navigation2 which is 100% wide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<!-- saved from url=(0014)about:internet -->
<!-- The script to prevent blocking in IE and for other menu maintenance -->
<script src='http://f-source.com/support/ActiveContent3_2a.js' type='text/javascript'></script>
<!-- If you are testing the menu locally or want to speed up script loading, download the script, -->
<!-- save it in your directory and point to a local file instead of src='http://f-source.com... -->
<style type="text/css">
<!--
#navigation {
      height : 48px;
      float : left;
      background-color: #FFFF00;
      width: 760px;
      margin: 0px;
}
#navigation2 {
      height : 48px;
      background-image: url(/common/wrapper/menubar.jpg);
      background-repeat: repeat-x;
      width: 100%;
      background-color: #00FF00;
}
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
}
-->
</style>
</head>

<body>
<!-- f-source menu navigation settings (search engines friendly) -->
<!-- Change these links and press F12 to test -->
<div id="navigation2">
<div id="navigation">
  <div id='menu' style='position:absolute; visibility:hidden;'>
    <div><a href='http://f-source.com'>&lt;b&gt;HOME&lt;/b&gt;</a></div>
    <div id='submenu'>
      <div><a href='http://f-source.com' target='_blank'>SubButton1-1</a></div>
      <div><a href='http://f-source.com'>SubButton1-2</a></div>
      <div><a href='http://f-source.com'>SubButton1-3</a></div>
      <div><a href='http://f-source.com'>SubButton1-4</a></div>
    </div>
    <div><a href='http://f-source.com'>&lt;b&gt;BLOG&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;ARTICLES&lt;/b&gt;</a></div>
    <div id='submenu'>
      <div><a href='http://f-source.com'>SubButton3-1</a></div>
      <div><a href='http://f-source.com'>SubButton3-2</a></div>
      <div><a href='http://f-source.com'>SubButton3-3</a></div>
    </div>
    <div><a href='http://f-source.com'>&lt;b&gt;NEWS&lt;/b&gt;</a></div>
    <div id='submenu'>
      <div><a href='http://f-source.com'>SubButton4-1</a></div>
      <div><a href='http://f-source.com'>SubButton4-2</a></div>
      <div><a href='http://f-source.com'>SubButton4-3</a></div>
      <div><a href='http://f-source.com'>SubButton4-4</a></div>
    </div>
    <div><a href='http://f-source.com'>&lt;b&gt;FILES&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;FORUMS&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;MARKETPLACE&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;JOBS&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;MULTIMEDIA&lt;/b&gt;</a></div>
    <div><a href='http://f-source.com'>&lt;b&gt;ABOUT&lt;/b&gt;</a></div>
  </div>
  <!-- You don't need to change this code directly. Read about proper menu configuration http://f-source.com/buy/mmStyleMenu/#menu_config -->
  <div id="f-source-menu">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="760" height="48" >
      <param name="flash_component" value="BusinessMenuFull.swc" />
      <param name="movie" value="nav2.swf" />
      <param name="quality" value="high" />
      <param name="FlashVars" value="flashlet={_subButtonTextColor:#5B5B5C,_subShowSpeed:5,_subMenuColor:#fefefe,_mainButtonHeight:28,_subFont:'Verdana',_subButtonHeight:15,_menuColor:#2A75AF,_mainButtonTextColor:#FFFFFF,stretch_width_to:'760px',_mainFontSize:10,bg_Pic_URL:'None',_mainFont:'Verdana',_mainButWidthExt:12,_mainHighlightColor:#2A75AF,xml_Path:'None',_subFontSize:10}" />
      <param name="wmode" value="transparent" />
    </object>
    <script type="text/javascript">var connected; if (connected){ Run_f_source_menu() }else{ alert("The page is not connected with script file ActiveContent3_2.js") };</script>
  </div></div>test</div>
  <p><img src="images/pix.png" alt="pix" width="760" height="10" /> </p>

</body>
</html>

few other things to remembers that may not be the issue in this case:

2. add this at the top of your CSS:
*{margin:0;padding:0}
/*this will zero out all margins and paddings as browsers have different defaults. now you can apply them where required*/

3. sometimes whitespaces in the code can cause a gap of a few pixels.
eg.
<div id="navigation">
<div id="navigation2">

to be written in HTML as

<div id="navigation"><div id="navigation2">

(without any spaces)
0
SiriusPhilAuthor Commented:
Even the folowing stripped down version causes a gap between the two div tags.

=========Stripped Down==============
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#navigation {
      height : 48px;
      float : left;
      background-color: #FFFF00;
      width: 760px;
      margin: 0px;
}
#navigation2 {
      height : 48px;
      background-image: url(/common/wrapper/menubar.jpg);
      background-repeat: repeat-x;
      margin-left: 760px;
      background-color: #00FF00;
}
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
}
-->
</style>
</head>

<body>
<div id="navigation">
</div>
<div id="navigation2">test</div>

</body>
</html>
0
SiriusPhilAuthor Commented:
VirusMinus-

Thanks for trying.

#1 won't work becuase of a shadow created by the flash menu.  

#2.  Tried that.  No luck.

#3.  Tied that too.  Still no luck.
0
TNameCommented:
I'm afraid this is an IE6 bug  triggered by the fact that the #navigation2 div has a height declared:
height : 48px;

Maybe this?
http://www.positioniseverything.net/floatmodel.html
http://www.positioniseverything.net/explorer/threepxtest.html


You could try this: delete the height for the #navigation2 div and give those 48px height to a div *contained* in the #navigation2 div:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
div {margin:0; padding:0; border:0;}
#navigation {
      height : 48px;
      float : left;
      background-color: #FFFF00;
      width: 760px;
      margin: 0;


}
#navigation2 {
     
      background-image: url(/common/wrapper/menubar.jpg);
      background-repeat: repeat-x;
      margin-left: 760px;
      background-color: #00FF00;
}
}
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;      

}
-->
</style>
</head>

<body>

<div id="navigation"></div>
<div id="navigation2"><div style="height:48px;">test</div></div>

</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SiriusPhilAuthor Commented:
Of course.  Microsoft has to be different,  The div inside the div did the trick.  THANK YOU!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.