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'></s cript>
<!-- 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/menuba r.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'><b>HOME</b ></a></ div>
<div id='submenu'>
<div><a href='http://f-source.com' target='_blank'>SubButton1 -1</a></di v>
<div><a href='http://f-source.com'>SubButton1-2</a></d iv>
<div><a href='http://f-source.com'>SubButton1-3</a></d iv>
<div><a href='http://f-source.com'>SubButton1-4</a></d iv>
</div>
<div><a href='http://f-source.com'><b>BLOG</b ></a></ div>
<div><a href='http://f-source.com'><b>ARTICLES&l t;/b></ a></div>
<div id='submenu'>
<div><a href='http://f-source.com'>SubButton3-1</a></d iv>
<div><a href='http://f-source.com'>SubButton3-2</a></d iv>
<div><a href='http://f-source.com'>SubButton3-3</a></d iv>
</div>
<div><a href='http://f-source.com'><b>NEWS</b ></a></ div>
<div id='submenu'>
<div><a href='http://f-source.com'>SubButton4-1</a></d iv>
<div><a href='http://f-source.com'>SubButton4-2</a></d iv>
<div><a href='http://f-source.com'>SubButton4-3</a></d iv>
<div><a href='http://f-source.com'>SubButton4-4</a></d iv>
</div>
<div><a href='http://f-source.com'><b>FILES</ b></a>< /div>
<div><a href='http://f-source.com'><b>FORUMS< /b></a> </div>
<div><a href='http://f-source.com'><b>MARKETPLAC E</b> ;</a></div >
<div><a href='http://f-source.com'><b>JOBS</b ></a></ div>
<div><a href='http://f-source.com'><b>MULTIMEDIA </b> </a></div>
<div><a href='http://f-source.com'><b>ABOUT</ b></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-AE 6D-11cf-96 B8-4445535 40000" 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.sw c" />
<param name="movie" value="nav2.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={_subButto nTextColor :#5B5B5C,_ subShowSpe ed:5,_subM enuColor:# fefefe,_ma inButtonHe ight:28,_s ubFont:'Ve rdana',_su bButtonHei ght:15,_me nuColor:#2 A75AF,_mai nButtonTex tColor:#FF FFFF,stret ch_width_t o:'760px', _mainFontS ize:10,bg_ Pic_URL:'N one',_main Font:'Verd ana',_main ButWidthEx t:12,_main HighlightC olor:#2A75 AF,xml_Pat h:'None',_ subFontSiz e: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>
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'></s
<!-- 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/menuba
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'><b>HOME</b
<div id='submenu'>
<div><a href='http://f-source.com' target='_blank'>SubButton1
<div><a href='http://f-source.com'>SubButton1-2</a></d
<div><a href='http://f-source.com'>SubButton1-3</a></d
<div><a href='http://f-source.com'>SubButton1-4</a></d
</div>
<div><a href='http://f-source.com'><b>BLOG</b
<div><a href='http://f-source.com'><b>ARTICLES&l
<div id='submenu'>
<div><a href='http://f-source.com'>SubButton3-1</a></d
<div><a href='http://f-source.com'>SubButton3-2</a></d
<div><a href='http://f-source.com'>SubButton3-3</a></d
</div>
<div><a href='http://f-source.com'><b>NEWS</b
<div id='submenu'>
<div><a href='http://f-source.com'>SubButton4-1</a></d
<div><a href='http://f-source.com'>SubButton4-2</a></d
<div><a href='http://f-source.com'>SubButton4-3</a></d
<div><a href='http://f-source.com'>SubButton4-4</a></d
</div>
<div><a href='http://f-source.com'><b>FILES</
<div><a href='http://f-source.com'><b>FORUMS<
<div><a href='http://f-source.com'><b>MARKETPLAC
<div><a href='http://f-source.com'><b>JOBS</b
<div><a href='http://f-source.com'><b>MULTIMEDIA
<div><a href='http://f-source.com'><b>ABOUT</
</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-AE
<param name="flash_component" value="BusinessMenuFull.sw
<param name="movie" value="nav2.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={_subButto
<param name="wmode" value="transparent" />
</object>
<script type="text/javascript">var
</div></div><div id="navigation2">test</div
<p><img src="images/pix.png" alt="pix" width="760" height="10" /> </p>
</body>
</html>
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/menuba r.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>
=========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/menuba
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>
ASKER
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Of course. Microsoft has to be different, The div inside the div did the trick. THANK YOU!
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'></s
<!-- 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/menuba
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'><b>HOME</b
<div id='submenu'>
<div><a href='http://f-source.com' target='_blank'>SubButton1
<div><a href='http://f-source.com'>SubButton1-2</a></d
<div><a href='http://f-source.com'>SubButton1-3</a></d
<div><a href='http://f-source.com'>SubButton1-4</a></d
</div>
<div><a href='http://f-source.com'><b>BLOG</b
<div><a href='http://f-source.com'><b>ARTICLES&l
<div id='submenu'>
<div><a href='http://f-source.com'>SubButton3-1</a></d
<div><a href='http://f-source.com'>SubButton3-2</a></d
<div><a href='http://f-source.com'>SubButton3-3</a></d
</div>
<div><a href='http://f-source.com'><b>NEWS</b
<div id='submenu'>
<div><a href='http://f-source.com'>SubButton4-1</a></d
<div><a href='http://f-source.com'>SubButton4-2</a></d
<div><a href='http://f-source.com'>SubButton4-3</a></d
<div><a href='http://f-source.com'>SubButton4-4</a></d
</div>
<div><a href='http://f-source.com'><b>FILES</
<div><a href='http://f-source.com'><b>FORUMS<
<div><a href='http://f-source.com'><b>MARKETPLAC
<div><a href='http://f-source.com'><b>JOBS</b
<div><a href='http://f-source.com'><b>MULTIMEDIA
<div><a href='http://f-source.com'><b>ABOUT</
</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-AE
<param name="flash_component" value="BusinessMenuFull.sw
<param name="movie" value="nav2.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={_subButto
<param name="wmode" value="transparent" />
</object>
<script type="text/javascript">var
</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)