Hey guys...

So I'm working on the following site: wwwDOTbasecampmanagmentDOTcom (remove the quotes...can't post links yet, but you can go ahead and check it out), and I'm trying to make that top bar you see be the full width of the page. The button currently drops a menu down and should be centered in the page. Problem is, it is working perfectly in Chrome, IE, and Opera, and is being centered, but in Firefox it is being pushed 50% to the right.

In order to fix this, I changed

margin-left: auto;

to

margin-left: -50%;

and that moves it to the correct position in firefox, but screws up the button in Chrome, IE, and Opera.

So I guess my question is... should I just go with Javascript to detect if the browser is Firefox and change the margin-left based on the browser type or is there some cross-platform CSS way to make this work?

Thank you for your help in advance!!!

Here is the full code relating to all that top bar stuff:

/*
 * Header-top
 */
 	
#header-top-inside { background: #31637c url(images/ui-bg_white-lines_20_31637c_40x100.png) 50% 50% repeat; width: 100%; min-width: 775px; margin:auto; position: fixed;  z-index:1000; padding-bottom: 5px; height: auto;}

#header-top-inside-placeholder { width:100%; margin:auto; height: 100px;}

#header-frame {margin-left:auto; margin-right:auto; width: 981px; }

#header-top-dashboard {position: relative;  z-index:100; height:500px; margin-left: auto; margin-right:auto; background:  #31637c url(images/ui-bg_white-lines_20_31637c_40x100.png) repeat;}

#header-top-dashboard-button{ position: fixed; z-index:100; height:40px; margin-left:auto; margin-right:auto; width:100%; background:#31637c url(images/ui-bg_white-lines_20_31637c_40x100.png) 50% 50% repeat; border: 1px solid #31637c; border-radius: 6px; border-top-left-radius: 0px; border-top-right-radius: 0px;  color:#FFFFFF; font-size:12px; font-weight:bold; text-align:center;}

#header-top-dashboard-area{height:470px; margin:auto; margin-top:-15px; background: #FFFFFF; border-style: solid #FFFFFF; border-radius: 6px;}

#header-top-dashboard-framework{height:450px; width:530px;  background: #FFFFFF; float:left; margin:auto; text-align:center; padding-top:10px; margin-left: 10px;}

#header-top-dashboard-profile-outside{height:450px; width: 430px; background: #3baae3 url(images/ui-bg_flat_50_3baae3_40x100.png) 50% 50% repeat; float:left; margin-top:10px; margin-bottom: auto; border-style:1px solid #3baae3; border-radius: 12px;}

#header-top-dashboard-profile{height:430px; width: 410px; background: #FFFFFF; float:left; margin-left:10px; margin-top:10px; border-style:1px solid #FFFFFF; border-radius: 12px;}

#header-top-dashboard-profile-picture{width:100px; height:100px; float:left; margin-left: 10px; margin-top:10px; }

#header-top-dashboard-profile-name{width: 290px; height: 100px; float:left; margin-left:10px; text-align: left; font-size:15px; font-weight:bold;}

#header-top-dashboard-login{width:480px; height: 450px; margin-left:10px; margin-top:10px; text-align: left; float:left;}

#header-top-dashboard-register{ width:480px; height: 450px; margin-left:10px; margin-top:10px; text-align: left; float:left;}

#header-top-bar{z-index: 1001;height:75px;}

#header-top-inside-left {z-index: 1001; float:left; text-align:left; padding:1px 1px 1px 1px; color:#485766; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%;}

#header-top-inside-left a  { color: #6a87a3; }

#header-top-inside-left-feed { z-index: 1001; float:left; padding:5px 0 0 0; width:auto; margin-left: 107px; }

#header-top-inside-search { z-index: 2000; float:left; text-align:left; padding: 7px 1px 1px 1px;  color:#485766; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%;}

#header-top-inside-right { z-index: 2000; float:right; padding:1px 1px 1px 1px; }

#header-top-inside-right ul.menu  { float:right; display:block; padding:0; margin:0; position:relative; z-index: 1002;  }

#header-top-inside-right ul.menu li { display: inline-block; float:left; vertical-align: middle; padding:0 5px 0 0; margin:0; }

#header-top-inside-right ul.menu li.last { padding:0; }

#header-top-inside-right ul.menu li a { outline:none; padding: 5px 10px; text-decoration: none; display:block; color:#FFFFFF; font-size:12px; font-weight:bold; text-align:center; }

#header-top-inside-right ul.menu li a:hover, #navigation ul.menu li a.active{ text-decoration:none; color:#ffffff; border-radius: 5px; -moz-border-radius: 5px; background: #0d0f13; }

#header-top-inside-right ul.menu li a:after { content: none; }

#header-top-inside-right ul.menu li.expanded { position: relative; }

#header-top-inside-right ul.menu li.expanded:hover a { border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; background: #0d0f13; }

/* 2nd level */
#header-top-inside-right ul.menu li.expanded ul.menu { width: 190px; z-index: 1001;  font-size:10px; padding:0; background: #0d0f13; display: none; position: absolute;  }

#header-top-inside-right ul.menu li.expanded:hover > ul.menu { display: block; }

#header-top-inside-right ul.menu li.expanded ul.menu li a { font-size: 10px; color:#7A8090; padding:10px; display:block; width:180px; text-align:left; border-radius:0; -moz-border-radius:0; }

#header-top-inside-right ul.menu li.expanded ul.menu li a:hover { color: #ffffff; }

/* 3rd, 4th, 5th, (...) level  */
#header-top-inside-right ul.menu li.expanded ul ul { display: none; left: 190px; top:0; }

and here is the HTML/Javascript itself:

<?php 
drupal_add_js('jQuery(document).ready(
	function()
	{
		var switchTo5x=true;
		stLight.options({publisher: "4fb9c651-bbc3-40fd-a363-08bc118a8e1a"});
	});'

	);

drupal_add_js('jQuery(document).ready(
	function()
	{
		jQuery("iframe").each(
		function()
		{
			var url = jQuery(this).attr("src");
      		var result = url.search(/youtube/i);
      		if(result!=-1)
       		{
       			result = url.indexOf("?");
        			if(result!=-1)  
          		{
          			jQuery(this).attr("src",url+"&wmode=transparent");
          		}else 
          		{
          			jQuery(this).attr("src",url+"?wmode=transparent");
          		}
       		}
       	});

		var switchTo5x=true;
		

		jQuery("#header-top-dashboard").hide();
		jQuery("#header-top-dashboard-spacer").hide();
		jQuery("#header-top-dashboard-button").click(
			function(e)
			{
				jQuery("#header-top-dashboard-spacer").toggle("blind");
				jQuery("#header-top-dashboard").toggle("blind");
				jQuery(".dblabel").toggle();
				e.preventDefault();
			});
	});','inline');
$logged_in = user_load($user->uid);
?>


<!--header-top-->
<div id="header-top-inside">
	<div id="header-frame" class="clearfix">
    		    
		<div id="header-top-inside-search">		
			<?php print render($page['header_center']);?>				
		</div>

		<div id="header-top-inside-left"><?php print render($page['header_left']);?>
 			<!--header-top-inside-left-feed-->
			<div id="header-top-inside-left-feed">   		
				<div id="topSocial">
					<ul>
					   	<li><span class='st_facebook_large'></span></li>
					   	<li><span class='st_twitter_large' ></span></li>
					   	<li><span class='st_linkedin_large'></span></li>
					   	<li><span class='st_googleplus_large'></span></li>
					   	<li><span class='st_google_reader_large'></span></li>
					   	<li><span class='st_email_large'></span></li>
					</ul>
				</div> 			
			</div>
			<!--EOF:header-top-inside-left-feed-->
		</div>
		<!--EOF:header-top-inside-left-->        

		<!--header-top-inside-left-right-->
		<div id="header-top-inside-right">
			<?php 
				if(user_is_logged_in())
				{
					print render($page['user_logged_in']);
				}else
				{
					print render($page['user_not_logged_in']);
				}
			?>
		</div> 
		<!--EOF:header-top-inside-left-right-->
		<div id="header-top-dashboard-spacer" class="toggler" style="height:60px; z-index:-1000; "></div>

		<div id="header-top-dashboard" class="toggler">
			

			<div id="header-top-dashboard-area" class="clearfix">
				
				<?php if($user->uid):?>
					<div id="header-top-dashboard-framework" class="inside clearfix">
						<h1>My Progress</h1>
						<img src="<?php print base_path() . drupal_get_path('theme', 'taylor') . '/images/framework.jpg'; ?>" width="525" height="300" style="margin-top:40px; margin-left:-10px;"usemap="#frameworkmapresized" title="Framework Image"/>
					</div>
					<div id="header-top-dashboard-profile-outside" class="inside clearfix">
						<div id="header-top-dashboard-profile" class="inside clearfix">
							
							<div id="header-top-dashboard-profile-picture">
							<pre><?php $filename = ($logged_in->picture->filename);?></pre>
							
							</div>
							<div id="header-top-dashboard-profile-name">
								<h1><?php print_r($logged_in->name);?></h1>
								<!--<pre><?php print_r($logged_in);?></pre>-->
								
							</div>
						</div>
					</div>
				<?php else:?>
					<div id="header-top-dashboard-not-logged-in">
						<div id="header-top-dashboard-register">
							<?php print render($page['header_registration']);?>
						</div>
						
						<div id="header-top-dashboard-login" class="array{links, inline, clearfix}">
							<?php print render($page['header_login']);?>
						</div>
					</div>
				<?php endif;?>
			</div>
		</div>	
	</div>
	<button href="#" id="header-top-dashboard-button"/><label class="dblabel" for="header-top-dashboard-button">Show Quick Dashboard</label><label class="dblabel" for="header-top-dashboard-button" style="display: none;">Hide Quick Dashboard</label>
</div>

<div id="header-top-inside-placeholder"></div>
</div>

	

<!--EOF:header-top-->

The easiest way to make a bar fill the full width of the page, and what I've always done is

position:absolute;
width:100%;
top:0;
left:0;

If you're getting horizontal scrollbars, set

html,body{width:100%;overflow-x:hidden}

Which is really bad for accessibility, but I tested the first code and it works fine without scrollbars for me.

You shouldn't need complicated Javascript and CSS hacks to do something that should be simple. If you're getting horizontal scrollbars still (don't use the second code block, it sucks), make a div with just the first code, then put your second div that is actually visible inside it, with a margin instead of padding on the first. I'm just thinking verbally, and haven't tried this, but in my mind it works.

Thanks so much! The first option worked perfectly and I was afraid it might not work because of the property differences between "fixed" and "absolute" but it seemed to work well even with the animation we have put in there.

Any idea as to why there is this difference between Firefox and other browsers and if there is a good way around it besides obviously doing what we did?

Thank you so much for your quick response again!