Link to home
Start Free TrialLog in
Avatar of SiriusPhil
SiriusPhil

asked on

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>
Avatar of VirusMinus
VirusMinus
Flag of Australia image

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)
Avatar of SiriusPhil
SiriusPhil

ASKER

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>
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.
ASKER CERTIFIED SOLUTION
Avatar of TName
TName

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Of course.  Microsoft has to be different,  The div inside the div did the trick.  THANK YOU!