Solved

Space betwwen two DIV tags in IE

Posted on 2007-04-09
5
480 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

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 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…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

617 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