Extend the background

HTML & CSS
1

I’m trying to figure out how to extend the background of the selected tab in the m,enu so that a border doesn’t appear below it i it looks like an open tab?

http://coronadosandman.com/index.html
Thanks…

2

You have a couple of errors in your HTML, plus it could use some streamlining, but basically since you are clearing floats with overflow hidden, even if you were using the correct method, the bg would not be visible outside its container, so a different overall method is necessary.

try this:


body {
background: #195905; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */

}
#wrapper {
	width: 980px;
	border:1px solid black;
	margin:30px auto;	
	background-image:url(../images/Untitled-1_03.gif);
	background-repeat:repeat;
}
header {
display:inline-block;
width:100%;
border-bottom:1px solid #000;
vertical-align: bottom;
	
}

 #letterpress  {
	margin-top:0;
 	text-align:center;
	font-size:60px;
	padding-top:1em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #195905;
	text-transform: uppercase;
	text-shadow: 0px 2px 1px #bbbaba;
}
.mattblacktabs {
margin :0  0 -1px 10px ;
padding: 0;
float:left;
 font: bold 12px Verdana;
list-style-type: none;
 	border-right: 1px solid black;  
 	border-bottom: 1px solid black;  
 	border-top: 1px solid black;  
  }

.mattblacktabs li{
float:left;

}

.mattblacktabs li a{
text-decoration: none;
display:inline-block;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
color: black;
background: #0ff; /*background of tabs (default state)*/
border-left: 1px solid black;
border-right: 1px solid white; /*right divider between tabs*/

}
.mattblacktabs li a.current {
border-bottom:1px solid #32f32e;
margin-bottom: -1px;
background: #32f32e;
 }
.mattblacktabs li a:visited{
color: black;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: #32f32e; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

#content {
	background-color:#32f32e;
	min-height: 500px;
	padding:50px 15px;
  }
h2 {
	font:28px "Copperplate Gothic Bold", Veranda;
	text-align:center;
	margin-top:0;
	padding-top:25px;
	text-transform:uppercase;
}

p {
	font:16px "Copperplate Gothic Bold", Veranda;
	margin:10px 20px;
}
.shadow {
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
 width:500px; 
 height:650px; 
 padding:5px; 
 background:white; 
 border: 1px solid black; 
 margin:0 auto;
 filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}		




<div id="wrapper">
	<header>
		<h1 id="letterpress">Coronado Sandman</h1>
         <ul class="mattblacktabs">
	        <li><a class="current" href="index.html">Home</a></li>
	        <li><a href="about.html">Gallery</a></li>
	        <li><a href="media.html">Shop</a></li>
        </ul>
     </header>

   <div id="content">
   		<div class="shadow"> <img src="images/sandman.jpg" width="500" height="638"></div>
     </div>
</div>
3

thanks