Question

I have this sample page with links that look like buttons: http://www.problemio.com/problems/problem.php?problem_id=251

Most of the link-buttons actually look nice, but the one that says “suggest a solution” is extremely wide.

It is styled like this:

a:link.image_button 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-decoration: none;
}

a:visited.image_button 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-decoration: none; 
}

and kind of an interesting thing is that if you press that button, and then press “see existing changes” button, it brings back the original button looking like it was originally meant to.

Here is the html for it:

  <div id="solution_suggestions_title">

                <center><a class="image_button" id="add_existing_suggestion" href="#" title="Click to add your ideas for solving this issue!">Suggest a Solution</a> </center>         

               <center><a class="image_button" style="display: none;" id="show_existing_suggestions" href="#">See Existing Suggestions</a></center> 
           </div>

Answer 1

It is that wide because it has the property: display: block;.

If an element has display: block; it always takes the entire width of the parent container by default (unless defined otherwise).

P.S. I don’t think it does look bad 😛