IE Bug. Help!

redwall_hp · April 18, 2007

I'm developing in Firefox, and testing in IE7 as well. I have a tabbed menu at the top of my page (which is floated left sort of). It's one of the Dynamic Drive menus. In FF, it's fine. In IE7 it does this weird thing where it puts a bunch of empty space to the right of my layout (which adds a big horizontal scrollbar). Here's a screenshot:And the CSS:

h1,h2,h3 {color: #449f00;font-family: Verdana;font-weight: bold;}h1 {font-size: 23px;}#navigation {text-align: center;float: left; /*Set to "left" or "right" to position menu accordingly*/border-bottom: 1px solid #449805;width: 995px;margin-bottom: 10px;}#navigation ul {	font-family: Verdana;	font-size: 12px;	font-weight: bold;	text-decoration: none;	margin: 0;	padding: 0;	list-style:none;	}#navigation li {	display: inline;	background: url(http://www.ntugo.com/lib/images/greenbg.gif) repeat-x center top;	text-align: center;	padding: 0;	margin-right: 4px;		float: left;}#navigation a {	color: #663300;	background: url(http://www.ntugo.com/lib/images/greenleft.gif) no-repeat left top;	float: left;	margin:	0;	padding-left:7px;	text-decoration: none;}#navigation a:hover {	color: black;	background: url(http://www.ntugo.com/lib/images/greenleft.gif) no-repeat left top;	float: left;	margin:	0;	padding-left:7px;	text-decoration: none;}#navigation a span {	background: url(http://www.ntugo.com/lib/images/greenright.gif) no-repeat right top;	display: block;	padding:7px 13px 4px 5px;}#navigation a span {	float: none;}#dropmenudiv{position:absolute;border:1px solid black;border-bottom-width: 0;font:normal 12px Verdana;line-height:18px;z-index:100;}#dropmenudiv a{width: 100%;display: block;text-indent: 3px;border-bottom: 1px solid black;padding: 1px 0;text-decoration: none;font-weight: bold;color: black;}#dropmenudiv a:hover{ /*hover background color*/background-color: #e8f9af;color: black;}a:link {font: bold 13px arial; color: #449805; text-decoration: none;} a:active {font: bold 13px arial; color: #449805; text-decoration: none;}a:visited {font: bold 13px arial; color: #449805; text-decoration: none;}a:hover {font: bold 13px arial; color: #449805; text-decoration: underline;}#leftcolumn {border-right: 1px solid black;}.box {margin: 2px; padding: 2px; border: 1px solid #449805; color: black; background-color: #f5f5f5;}.notopmargin {margin-top: 0px;}div.bubble {font-size: 0.75em;margin-bottom: 24px;}div.bubble blockquote {margin: 0px;padding: 0px;border: 1px solid #c9c2c1;background-color: #feffbf;}div.bubble blockquote p {margin: 10px;padding: 0px;}div.bubble cite {position: relative;margin: 0px;padding: 7px 0px 0px 15px;top: 6px;background: transparent url(http://www.ntugo.com/lib/wordbubbletip.gif) no-repeat 20px 0;font-style: normal;}#wrapper {width: 995px;margin-right: auto;margin-left: auto;text-align: center;}#innerwrapper {text-align: left;position: relative;border-bottom: 1px solid #449805;}.headerbar {background-color: #428D0A;color: white;font-family: Verdana;font-weight: bold;font-size: 13px;padding: 3px;}

I need some help. I can't figure out why it's doing this, but I think it's related to the float on the tab menu. If I remove the "float:left" then it works fine in IE....but the botto border gets moved to ther top in FF.

ste · April 19, 2007

can you post the html too please? try clearing the float after the menu it looks like something is floating to the left of the menu creating the extra space there

Anders Moen · April 19, 2007

Try to put this in between <head> and </head> and copy the stylesheet and then it might work for IE 7 too:

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="style_for_sucky_ie_7.css" /><![endif]-->

ste · April 19, 2007

how will that make it work? you probably don't need another style sheet to fix this.

redwall_hp · April 19, 2007

Here's the HTML (I know it's not XHTML strict. I'm working on that)

<html><head><title>NTugo</title><link rel="stylesheet" type="text/css" href="http://www.ntugo.com/lib/style.css"><link rel="shortcut icon" href="http://www.ntugo.com/lib/images/favicon.ico" /><script type="text/javascript">//Contents for menu 1var menu1=new Array()menu1[0]='<a href="#">Link</a>'menu1[1]='<a href="#">Link</a>'menu1[2]='<a href="#">Link</a>'menu1[3]='<a href="#">Link</a>'//Contents for menu 2, and so onvar menu2=new Array()menu2[0]='<a href="#">Link</a>'menu2[1]='<a href="#">Link</a>'menu2[2]='<a href="#">Link</a>'//Contents for menu 'blogs'var blogs=new Array()blogs[0]='<a href="http://blogs.ntugo.com/">[All]</a>'blogs[1]='<a href="http://blogs.ntugo.com/ntugo/">NTugo</a>'blogs[2]='<a href="http://blogs.ntugo.com/computers/">Computers/Internet</a>'blogs[3]='<a href="http://blogs.ntugo.com/books/">Books</a>'blogs[4]='<a href="http://blogs.ntugo.com/movies/">Movies</a>'blogs[5]='<a href="http://blogs.ntugo.com/gaming/">Gaming (PC/Mac/Console)</a>'//Contents for menu 'Other'var other=new Array()//other[0]='<a href="#">RSS Reader</a>'//other[1]='<a href="#">Bookmark Manager</a>'//other[2]='<a href="#">Web Directory</a>'//other[3]='<a href="#">URL Shortener</a>'//other[4]='<a href="#">Aye</a>'other[5]='<a href="#">NTugo Network</a>'</script><script src="http://www.ntugo.com/lib/scripts.js" type="text/javascript"></script><script src="http://www.ntugo.com/lib/scriptaculous/prototype.js" type="text/javascript"></script><script src="http://www.ntugo.com/lib/scriptaculous/scriptaculous.js" type="text/javascript"></script></head><body><div id="wrapper"><div id="innerwrapper"><div style="position: absolute; right: 10px;"><a href="#" onClick="new Effect.Appear('login_dialog')">Login</a> | <a href=register.php>Register</a></div><a href="http://www.ntugo.com"><img src="http://www.ntugo.com/lib/images/logo.gif" border="0"></a><div id="navigation"><ul><li><a href="http://www.ntugo.com/"><span>Home</span></a></li><li><a href="http://www.ntugo.com/mail/"><span>Mail</span></a></li><li><a href="http://www.ntugo.com/"><span>Portal</span></a></li><li><a href="http://aye.ntugo.com/"><span>Aye</span></a></li><li><a href="sitemap.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, blogs, '170px')" onMouseout="delayhidemenu()"><span>Blogs+</span></a></li><li><a href="sitemap.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, other, '155px')" onMouseout="delayhidemenu()"><span>Other+</span></a></li></ul></div><br style="clear: both;">[Main Content]</div></div>©2007 NTugo, all rights reserved.<div id="login_dialog" style="width:350; height:150; background-color:#bfbfbf; position: absolute; top: 50px; right: 60px; border: 2px solid #449f00; padding: 5px; display: none;"><a href="#" style="position: absolute; right: 5px;" onClick="new Effect.Fade('login_dialog')">Close</a><h3 style="margin-top: 0px;">Login</h3><form name="loginform" method="POST" action="http://www.ntugo.com/lib/login/scr_login.php"><center><table border="0"><tr><td>Username:</td><td><input type="text" name="username"></td></tr><tr><td>Password:</td><td><input type="password" name="password"></td></tr></table><input type="submit" name="Submit" value="login"><br><a href="#">Forgot Password?</a></center></form></div><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-735643-3";urchinTracker();</script></body></html>

ste · April 19, 2007

this displays the same for me in IE & FFnote: i have combined the css & html into one documenti would also suggest adding a doctype and working through the code so it validates properly but as it is it should display properly now

<html><head><title>NTugo</title><style type="text/css">#body {text-align: center;}h1,h2,h3 {color: #449f00;font-family: Verdana;font-weight: bold;}h1 {font-size: 23px;}#navigation {text-align: center;float: left; /*Set to "left" or "right" to position menu accordingly*/border-bottom: 1px solid #449805;width: 980px;margin-bottom: 10px;}#navigation ul {	font-family: Verdana;	font-size: 12px;	font-weight: bold;	text-decoration: none;	margin: 0;	padding: 0;	list-style:none;	}#navigation li {	display: inline;	background: url(http://www.ntugo.com/lib/images/greenbg.gif) repeat-x center top;	text-align: center;	padding: 0;	margin-right: 4px;		float: left;}#navigation a {	color: #663300;	background: url(http://www.ntugo.com/lib/images/greenleft.gif) no-repeat left top;	float: left;	margin:	0;	padding-left:7px;	text-decoration: none;}#navigation a:hover {	color: black;	background: url(http://www.ntugo.com/lib/images/greenleft.gif) no-repeat left top;	float: left;	margin:	0;	padding-left:7px;	text-decoration: none;}#navigation a span {	background: url(http://www.ntugo.com/lib/images/greenright.gif) no-repeat right top;	display: block;	padding:7px 13px 4px 5px;}#navigation a span {	float: none;}#dropmenudiv{position:absolute;border:1px solid black;border-bottom-width: 0;font:normal 12px Verdana;line-height:18px;z-index:100;}#dropmenudiv a{width: 100%;display: block;text-indent: 3px;border-bottom: 1px solid black;padding: 1px 0;text-decoration: none;font-weight: bold;color: black;}#dropmenudiv a:hover{ /*hover background color*/background-color: #e8f9af;color: black;}a:link {font: bold 13px arial; color: #449805; text-decoration: none;}a:active {font: bold 13px arial; color: #449805; text-decoration: none;}a:visited {font: bold 13px arial; color: #449805; text-decoration: none;}a:hover {font: bold 13px arial; color: #449805; text-decoration: underline;}#leftcolumn {border-right: 1px solid black;}.box {margin: 2px; padding: 2px; border: 1px solid #449805; color: black; background-color: #f5f5f5;}.notopmargin {margin-top: 0px;}div.bubble {font-size: 0.75em;margin-bottom: 24px;}div.bubble blockquote {margin: 0px;padding: 0px;border: 1px solid #c9c2c1;background-color: #feffbf;}div.bubble blockquote p {margin: 10px;padding: 0px;}div.bubble cite {position: relative;margin: 0px;padding: 7px 0px 0px 15px;top: 6px;background: transparent url(http://www.ntugo.com/lib/wordbubbletip.gif) no-repeat 20px 0;font-style: normal;}#wrapper {width: 980px;margin: 0 auto;text-align: left;border-bottom: 1px solid #449805;}.headerbar {background-color: #428D0A;color: white;font-family: Verdana;font-weight: bold;font-size: 13px;padding: 3px;}</style><link rel="shortcut icon" href="http://www.ntugo.com/lib/images/favicon.ico" /><script type="text/javascript">//Contents for menu 1var menu1=new Array()menu1[0]='<a href="#">Link</a>'menu1[1]='<a href="#">Link</a>'menu1[2]='<a href="#">Link</a>'menu1[3]='<a href="#">Link</a>'//Contents for menu 2, and so onvar menu2=new Array()menu2[0]='<a href="#">Link</a>'menu2[1]='<a href="#">Link</a>'menu2[2]='<a href="#">Link</a>'//Contents for menu 'blogs'var blogs=new Array()blogs[0]='<a href="http://blogs.ntugo.com/">[All]</a>'blogs[1]='<a href="http://blogs.ntugo.com/ntugo/">NTugo</a>'blogs[2]='<a href="http://blogs.ntugo.com/computers/">Computers/Internet</a>'blogs[3]='<a href="http://blogs.ntugo.com/books/">Books</a>'blogs[4]='<a href="http://blogs.ntugo.com/movies/">Movies</a>'blogs[5]='<a href="http://blogs.ntugo.com/gaming/">Gaming (PC/Mac/Console)</a>'//Contents for menu 'Other'var other=new Array()//other[0]='<a href="#">RSS Reader</a>'//other[1]='<a href="#">Bookmark Manager</a>'//other[2]='<a href="#">Web Directory</a>'//other[3]='<a href="#">URL Shortener</a>'//other[4]='<a href="#">Aye</a>'other[5]='<a href="#">NTugo Network</a>'</script><script src="http://www.ntugo.com/lib/scripts.js" type="text/javascript"></script><script src="http://www.ntugo.com/lib/scriptaculous/prototype.js" type="text/javascript"></script><script src="http://www.ntugo.com/lib/scriptaculous/scriptaculous.js" type="text/javascript"></script></head><body>	<div style="position: absolute; right: 10px;">	<a href="#" onClick="new Effect.Appear('login_dialog')">Login</a> | <a href=register.php>Register</a></div><div id="wrapper"><a href="http://www.ntugo.com"><img src="http://www.ntugo.com/lib/images/logo.gif" border="0"></a><div id="navigation">	<ul>		<li><a href="http://www.ntugo.com/"><span>Home</span></a></li>		<li><a href="http://www.ntugo.com/mail/"><span>Mail</span></a></li>		<li><a href="http://www.ntugo.com/"><span>Portal</span></a></li>		<li><a href="http://aye.ntugo.com/"><span>Aye</span></a></li>		<li><a href="sitemap.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, blogs, '170px')" onMouseout="delayhidemenu()"><span>Blogs+</span></a></li>		<li><a href="sitemap.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, other, '155px')" onMouseout="delayhidemenu()"><span>Other+</span></a></li>	</ul></div><div style="clear: both;"></div>[Main Content]</div>©2007 NTugo, all rights reserved.<div id="login_dialog" style="width:350; height:150; background-color:#bfbfbf; position: absolute; top: 50px; right: 60px; border: 2px solid #449f00; padding: 5px; display: none;"><a href="#" style="position: absolute; right: 5px;" onClick="new Effect.Fade('login_dialog')">Close</a><h3 style="margin-top: 0px;">Login</h3></div><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-735643-3";urchinTracker();</script></body></html>

redwall_hp · April 20, 2007

THanks for the help. It's working great now. Yeah, I was about to go through and clean up my code before I noticed this odd glitch. I'll go off and do that now. Thanks again.

ste · April 20, 2007

glad to be of help

Sign In

IE Bug. Help!

Recommended Posts

redwall_hp

Link to comment

Share on other sites

ste

Link to comment

Share on other sites

Anders Moen

Link to comment

Share on other sites

ste

Link to comment

Share on other sites

redwall_hp

Link to comment

Share on other sites

ste

Link to comment

Share on other sites

redwall_hp

Link to comment

Share on other sites

ste

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity