issue with css: button image same size as link?

nevermore · February 24, 2011

I am having trouble with making my buttons the right size. They are each resizing themselves to the width of the link they are behind. Pic:

my problem is at #menu a

Here is the html coding:

<!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>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="site_logo">
</div>
</div>
</div>
<div id="menu_wrap">
<div id="menu">
<ul>
<li><a href="http://www..com/main/index.html">Home</a></li>
<li><a href="http://www..com/main/about.html">About</a></li>
<li><a href="http://www..com/fanfiction/index.php">Stories</a></li>
<li><a href="http://www..com/comics_art">Art</a></li>
<li><a href="http://www..com/forums">Forum</a></li>
<li><a href="http://www..com/chat">Chat</a></li>
<li><a href="http://www..com/tuts.html">Tutorials</a></li>


</ul>
</div>
</div>




</body>
</html>

Style sheet/CSS:

body {
margin:0px;
padding:0px;
background:#2b1b17;

}

#header_wrap{
width:100%;
height:114px;
margin:0px;
background:url(images/header_bg.png) repeat-x;

}
#header{
width:980px;
margin:0 auto;

}

#site_logo{
width:340px;
height:100px;
background:url(images/logo.png)no-repe…
}

#menu_wrap{
width:100%;
height:41px;
background:url(images/menu_bg.png) repeat-x;
overflow: hidden;
}

#menu{
width:980px;
height:41px;
margin: 0 auto;


}
#menu ul{
margin:0 0 0 28px;
padding:0px;
list-style:none;

}

#menu li {
margin:0px;
padding:0px;
display:inline;
}

#menu a {
margin:0 10px 0 10px;
float:left;
display:block;
height:36px;
width:150;
background:url(images/menu.png) no-repeat;
text-align:center;
font-size:14px;
text-decoration:none;
color:white;
font-weight:bold;
outline:none;


}

tried #menu li a

newseed · February 24, 2011

You are missing 'px' in your width property:

#menu a {

margin:0 10px 0 10px;

float:left;

display:block;

height:36px;

width:150px;

background:url(images/menu.png) no-repeat;

text-align:center;

font-size:14px;

text-decoration:none;

color:white;

font-weight:bold;

outline:none;

Edited February 24, 2011 by Eddie

nevermore · February 25, 2011

Well I feel silly. I guess its always good to have a second set of eyes. Thank you!

Sign In

issue with css: button image same size as link?

Recommended Posts

nevermore

newseed

nevermore

Join the conversation

Browse

Activity

Store

Support