MyBB Community Forums

I'm trying to skin MyBB to look like my site, I've copied the CSS required and the HTML has been added to the header but for some reason it displays incorrectly.

The CSS and HTML itself is fine, it works perfectly on my site, but there is a problem with it in MyBB.

The problems are numerous:
Internet Explorer: The left section appears centered and not the left.
Firefox/Opera/Safari: The menu buttons appear way too low and in Firefox, with a bullet point above.

My site isn't open yet so I can only post the code and screenshots, here is in the bar in IE. The file named regular shows what it should look like, and does on my site.

Here is the CSS I use on both my site and the forum:

#wrapper {
	width: 802px;
	background-color:#D9D9D9;
	margin:0px auto;
             border-left: 1px solid #000;
             border-right: 1px solid #000;
	text-align:left; /* IE 5.x */
	position: relative;
}

#sheader {
	display:block;
	height:42px;
	width:802px;
	border-top: solid #080808 1px;
	background:url(http://the-big-bang-theory.com/templates/v1BBT/images/Header_Top.png) top left no-repeat;
}
#main_menu {
	height:31px;
  width: 802px;
	font:12px/14px "Lucida Console","courier new",monospace;
	text-transform:uppercase;
	background:#DDD url(http://the-big-bang-theory.com/templates/v1BBT/images/Header_Middle_Background.png) 0px 0px repeat-x;
	list-style:none;
}
#main_menu_left {
		float:left;
		width:344px;
		margin:0; padding:0;
		display: block;
}
#main_menu_right {
		float:right;     
		width:345px;
		margin:0; padding:0;
}
#main_menu_centre {
    float:left;
		width: 113px;
		height: 31px;
		padding: 0px;
	  background:#DDD url(http://the-big-bang-theory.com/templates/v1BBT/images/Header_Middle_Logo.png) no-repeat;
}
.mmull li {
	float: left;
}
.mmulr li {
	float: right;
}
#main_menu a {
	float:left;
	height:23px;
  text-align: center;
	width: 81px;
	padding-top: 8px;
  color: #FFF9FF;
  font-weight: bold;
	list-style:none;  	
	background:#DDD url(http://the-big-bang-theory.com/templates/v1BBT/images/InactiveTab.png) no-repeat;
}
#main_menu h2 {
  font-size: 14px;
  height: 14px;
  font-weight: bold;
	list-style:none;
}
#main_menu a:active,
#main_menu a:hover {
  color: #FFF9FF;
  font-weight: bold;  
	display:block;
	float:left;
	height:23px;
  text-align: center;
	width: 81px;
	padding-top: 8px;	
	background:#bbb url(http://the-big-bang-theory.com/templates/v1BBT/images/ActiveTab.png) no-repeat;
}
#main_menu_bottom {
	display:block;
	height:27px;
  width: 802px;
  padding: 0px;
	font:12px/14px "Lucida Console","courier new",monospace;
	text-transform:uppercase;
	background:#DDD url(http://the-big-bang-theory.com/templates/v1BBT/images/Header_Bottom.png) 	no-repeat;
	list-style:none;
	border-bottom: solid #080808 1px;
}

and the HTML:

<!-- start: header -->
<div id="wrapper">
	<div id="sheader"></div>
	<div id="main_menu">
	 <!-- MAX CAP: 4 -->
    <div id="main_menu_left"> 
      <ul class="mmull">
        <li><h2><a href="/">Home</a></h2></li>
        <li><h2><a href="/Cast/">Cast</a></h2></li>
        <li><h2><a href="/EpisodeGuide/">Episodes</a></h2></li>       
      </ul>
    </div>
	  <div id="main_menu_centre">   </div>  	    
  	<div id="main_menu_right">
      <ul class="mmulr">
        <li><h2><a href="http://forum.the-big-bang-theory.com">Forums</h2></a></li>
        <li><h2><a href="http://gallery.the-big-bang-theory.com">Gallery</a></h2></li>
        <li><h2><a href="http://the-big-bang-theory.com/blogs/">Blogs</a></h2></li>
      </ul></div>
  </div>
	<div id="main_menu_bottom">
	</div>

I've tried looking for any CSS values which MyBB might use and that interfere but I didn't find anything.

----

Just to clarify on the attachments (from left to right):
1. Firefox, 2. IE, 3. Opera, 4. how it looks on my site and should look here.

To get rid of the bullet point you should use list-style: none; in the "mmull" class.

DrPoodle Wrote:To get rid of the bullet point you should use list-style: none; in the "mmull" class.

Thanks.

Can you find the reason why the buttons display a lot lower than they should, and too far right for the left nav bar? Its fine in IE, but as my picture shows above in opera and firefox, the buttons are in the wrong place.