TraxWeb

Hey all, First time posting here so I hope I am following the proper protocol. My first problem I had was re-creating a WordPress header + menu over my SMF forum (I want them to look exactly the same). I had a friend help me out and we are really close! My WordPress site - http://test.inglouriousbasterds.org and my SMF forum - http://test.inglouriousbasterds.org/forum At first glance they are very very similar, however there is one problem. If you notice on the WordPress menu, the background color stretches across the entire 960px div, however on my SMF it doesn't. I want the menu to appear all the way across in SMF as it does in WordPress. Below you'll find the css I have for the header/menu divs in SMF. This was all custom work. /* Styles for header------------------------------------------------------- */#ibheader { margin-left: auto; margin-right: auto; display: block;} #ibmenu{ margin-left: auto; margin-right: auto; display: block; width: 960px; height: 67px; /*background-color: #111111;*/ background: #333333;}#ibmenu ul { width: 960px; background: #333333; margin: 0; padding-top: 7px; padding-left: 0px; list-style-type: none; list-style-image: none; text-align: center; font-size: 13px;} #ibmenu li { margin: 0; padding: 0; display: inline;}#ibmenu a { /*text-decoration:none; color: white; padding: .2em 1em;*/ /* background: #191919 url(/images/nav.gif); */ background: #222222; border-right: 1px solid #161616; border-bottom: 1px solid #161616; border-top: 1px solid #3c3c3c; color: #cccccc; float: left; font: bold 1em Verdana,sans-serif; line-height: 49px; padding: 0px 20px; text-decoration:none;}#ibmenu a:hover { background: #2a2a2a; color: #fff;} Now this is the css for the header section in WordPress. This was the stock CSS that came with the theme. /*menu*/#access { background: #191919 url(images/nav.gif); display: block; float: left; margin: 0 auto; width:100%; }#access .menu-header,div.menu { font-size: 13px;}#access .menu-header ul,div.menu ul { list-style: none; margin: 0;}#access .menu-header li,div.menu li { float: left; position: relative;}#access a { background: #191919 url(images/nav.gif); border-right: 1px solid #161616; color: #CCC; float: left; font: bold 1em Verdana,sans-serif; line-height: 51px; padding: 0 20px; text-decoration:none;}#access ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 50px; left: 0; float: left; width: 180px; z-index: 99999;}#access ul ul li { min-width: 180px;}#access ul ul ul { left: 100%; top: 0;}#access ul ul a { background: #191919 url(images/nav.gif); line-height: 1em; padding: 10px; width: 160px; height: auto;}#access li:hover > a,#access ul ul :hover > a { background: #333 url(images/nav_hover.gif); color: #fff;}#access ul li:hover > ul { display: block;}#access ul li.current_page_item > a,#access ul li.current-menu-ancestor > a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a { color: #fff;}* html #access ul li.current_page_item a,* html #access ul li.current-menu-ancestor a,* html #access ul li.current-menu-item a,* html #access ul li.current-menu-parent a,* html #access ul li a:hover { color: #fff;} Any help would be greatly appreciated. I am a bit of newbie when it comes to HTML and CSS, what little I know is self taught and with the help of Google. Hope someone can help me out!