Hello, everyone. I'm hoping someone on the board can help me figure this out. This weekend I was able to get a Flash placeholder into the header of my new blog (http://www.partywithtabs.com), and it appears to display correctly in all browsers except IE 6. For some reason IE 6 is pushing down the search bar and nav below the header as in this browsershots screenshot: http://img.skitch.com/20090119-tk39xjmdgdqnmapteb9pm4gp49.jpg This is driving me crazy. I've been wrestling with it for hours. Does anyone know what might be happening here?? I'm assuming it's due to one of IE6's box model bugs, but I haven't been able to figure it out.
I don't have time to play around with it right now, but at quick glance it looks like the issue is the #top div. You've specified a height for your flash banner and since that's contained within the #top container, IE6 assumes you want the container to be at least equal to that height. The other browsers don't make that assumption. At least, that's what it looks like is happening. I'll check back a little later to see if you or anyone else made any progress. Sorry I can't help more right now. : )
Sorry it took me a while to post, but it took me a little while to figure this out! : ) First, the CSS I changed: /*I added this declaration. But, you can change the width to whatever you want.*/ #background{ width:960px;margin:0 auto; } #top{ padding: 8px 0 0 0; font-size:11px;background:red;float:left;position:relative;z-index:1; } #topmenu{ position:relative; height: 33px; margin-bottom:20px;background:blue;float:left;width:100%; } #altFlashbanner{ overflow:hidden; /* padding-top:1px;*/ display:inline;float:left; } #header{ height: 172px;width:auto;float:left;width:220px;display:inline;background:yellow; } #header h1{width:0px;height:0px;text-indent:-9999px;} #rss{margin-top:-3px; display: inline; float:right;position:relative;z-index:2; } ***************************** HTML changes I made: I moved the header div and its contents inside of the "top div". This seemed to be what you were trying to do, and it worked in IE6 and FF2. (You may want to check, though, because I may have removed one of the grid divs while I was testing. Not sure.) -- code below -- ***************************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title> Party with Tabs | Just another WordPress weblog </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="stylep.css" media="screen" /> <link rel="stylesheet" type="text/css" href="http://www.partywithtabs.com/wp-content/themes/freshnews/960.css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.partywithtabs.com/?feed=rss2" /> <link rel="pingback" href="http://www.partywithtabs.com/xmlrpc.php" /> <script type="text/javascript" src="http://www.partywithtabs.com/wp-content/themes/freshnews/includes/js/suckerfish.js"></script> <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]--> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.partywithtabs.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.partywithtabs.com/wp-includes/wlwmanifest.xml" /> <script type='text/javascript' src='http://www.partywithtabs.com/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script> <meta name="generator" content="WordPress 2.7" /> <link href="http://www.partywithtabs.com/wp-content/themes/freshnews/styles/1-default.css" rel="stylesheet" type="text/css" /> <!-- Show custom logo --> <script type="text/javascript" src="http://www.partywithtabs.com/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; params.loop = "true"; params.menu = "false"; params.wmode = "window"; var attributes = {}; swfobject.embedSWF("http://www.partywithtabs.com/PWT-BANNER-sh.swf", "altFlashbanner", "725", "180", "8.0.0", false, flashvars, params, attributes); </script> </head> <body> <div id="background"> <div id="top" class="container_16"> <div class="grid_12"> <ul class="nav1"> <li class="current_page_item" ><a href="http://www.partywithtabs.com/">Home</a></li> <li class="page_item page-item-2"><a href="http://www.partywithtabs.com/?page_id=2" title="About">About</a></li> </ul> <!--/nav1--> </div> <!-- end .grid_12 --> <div class="grid_4"> <span class="subscribe">Subscribe: <a href="http://www.partywithtabs.com/?feed=rss2">Posts</a> | <a href="http://www.partywithtabs.com/?feed=comments-rss2">Comments</a> | <a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=" target="_blank">Email</a></span> </div> <div id="altFlashbanner"> <a href="http://www.partywithtabs.com/"><img src="http://www.partywithtabs.com/PWT-BANNER-sh.jpg" height="180" width="725"></a> </div> <div id="header"> <h1 class="grid_12"><a href="http://www.partywithtabs.com/" title="Party with Tabs">Party with Tabs</a></h1> <form method="get" id="searchform" action="http://www.partywithtabs.com/"> <div id="search"> <input type="text" value="Enter search keyword" onclick="this.value='';" name="s" id="s" /> <input name="" type="image" src="http://www.partywithtabs.com/wp-content/themes/freshnews/images/btn-search-trans.png" value="Go" class="btn" /> </div> <!--/search --> </form> </div> <!--/header --> <div id="topmenu"> <ul id="nav" class="grid_15"> <li class="cat-item cat-item-1"><a href="http://www.partywithtabs.com/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> </li> <li> </li> </ul> <div id="rss" class="grid_1 alignright"> <a href="http://www.partywithtabs.com/?feed=rss2"><img src="http://www.partywithtabs.com/wp-content/themes/freshnews/images/ico-rss-trans.png" alt="RSS" /></a> </div><!--/rss --> </div> <!--/topmenu--> </div> <!--/top--> <div id="page" class="container_16"> <div id="centercol" class="grid_10"> <!-- Continues on from here, but I only moved the end div tag for "top". --> *********************************************************** I only tested this in IE6 and FF2, because they're both running on the same machine. You'll have to see what it looks like in the other browsers. I ran my changes through the validator and the only errors had to do with an image tag not being closed and an anchor tag not having an alt attribute. Hope this helps you. If you have any questions or problems, let me know.