Solved

Space betwwen two DIV tags in IE

Posted on 2007-04-09
5
470 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Of course.  Microsoft has to be different,  The div inside the div did the trick.  THANK YOU!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now