Solved

Space betwwen two DIV tags in IE

Posted on 2007-04-09
5
476 Views
Last Modified: 2012-06-27
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>
0
Comment
Question by:SiriusPhil
  • 3
5 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 18880084
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
 

Author Comment

by:SiriusPhil
ID: 18880094
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
 

Author Comment

by:SiriusPhil
ID: 18880135
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
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 18880751
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
 

Author Comment

by:SiriusPhil
ID: 18881379
Of course.  Microsoft has to be different,  The div inside the div did the trick.  THANK YOU!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question