7 replies [Last post]
andyhd
Offline
newbie
Last seen: 18 years 4 days ago
Joined: 2004-05-25
Posts: 8
Points: 0

Hello,

I'm trying to implement CSS buttons which expand to fit the label, using the sliding doors technique.

My problem is that the button insists on expanding to 100% width. I can't set a width on the button, because I want it to expand to fit the text label inside. I can't use inline elements, because then I can't set a height. I've tried making all the elements float:left, but IE still makes them 100% wide, and I can't center the buttons.

I'd really like to avoid falling back on tables.

Any suggestions?

Here's the offending code:

<style>
div.button {
  height: 29px ;
  width: auto ;
  margin: 0 auto ;
  padding: 0 ;
  background: red ;
}
div.button span {
  display: block ;
  height: 30px ;
  margin: 0 ;
}
div.button span.left {
  padding: 0 0 0 10px ;
  background: blue;
}
div.button span.right {
  padding: 0 10px 0 0 ;
  background: green ;
}
div.button a {
  display: block ;
  height: 30px ;
  background: yellow ;
}
</style>
<div class="button">
  <span class="left">
    <span class="right">
      <a href="#button">Click Me!</a>
    </span>
  </span>
</div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Sliding doors block width problem

Hi andyhd,
Have you tried setting the button div to display inline.

andyhd
Offline
newbie
Last seen: 18 years 4 days ago
Joined: 2004-05-25
Posts: 8
Points: 0

Sliding doors block width problem

Thanks for your reply,
Making the div display:inline causes the label part of the button to disappear Sad
I thought inline elements cannot have specified heights? And they can't contain block elements?
If I make all the spans and such display:inline, the button width sizes to fit the content, but the height is ignored.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Sliding doors block width problem

Hi andyhd,
Yes your correct, inline elements can not contain block elements.
From the quick look I had before, it looked as though you only had inline elements (span, a) inside the div.
I only just noticed that you had set them to display block.

Shoot me if this is too obvious, but are you worried about text resize or just don't know how much text there will be?

andyhd
Offline
newbie
Last seen: 18 years 4 days ago
Joined: 2004-05-25
Posts: 8
Points: 0

Sliding doors block width problem

Np, it's not that clear, i suppose - they ought to be divs.

The button needs to auto size because the label can be any length (within reason, I don't expect it to be multi-line). Although it would be nice to dynamically size based on text size, the height of the button end images is fixed, and that's not what I'm after.

I might think about dynamically sizing the button height as well, if needs be, but not right now.

It seems like it should be the same as the sliding doors example at A List Apart, but I seem to be missing something.

Maybe I should make them all inline, like you suggest, and set a line-height on the anchor tag...

andyhd
Offline
newbie
Last seen: 18 years 4 days ago
Joined: 2004-05-25
Posts: 8
Points: 0

Sliding doors block width problem

Nope, that just pushes the button down the page, without stretching the button height.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Sliding doors block width problem

Hi andyhd,
Have you tried using lists like the sliding doors example.

<html><head><style> 
<style type="text/css"> 
 #header { 
  float:left; 
  width:100%; 
  background:#DAE0D2 url("bg.gif") repeat-x bottom; 
  font-size:93%; 
  line-height:normal; 
  } 
#header ul { 
  margin:0; 
  padding:10px 10px 0; 
  list-style:none; 
  } 
#header li { 
  float:left; 
  background-color:red; 
  margin:0; 
  padding:0 0 0 9px; 
  } 
#header a { 
  float:left; 
  display:block; 
  background-color:green; 
  padding:5px 15px 4px 6px; 
  text-decoration:none; 
  font-weight:bold; 
  color:#765; 
  } 
/* Commented Backslash Hack 
   hides rule from IE5-Mac \*/ 
#header a {float:none;} 
/* End IE5-Mac hack */ 
#header a:hover { 
  color:#333; 
  } 
 
 
</style> 
</head> 
<body> 
<div id="header"> 
<ul> 
<li class="button"> 
  <span class="left"> 
    <span class="right"> 
      <a href="#button">Click Me! and me</a> 
    </span> 
  </span> 
</li>  
 
<li class="button"> 
  <span class="left"> 
    <span class="right"> 
      <a href="#button">Click Me!</a> 
    </span> 
  </span> 
</li>  
</ul> 
</div> 
</body>  
</html>

Hope that helps

andyhd
Offline
newbie
Last seen: 18 years 4 days ago
Joined: 2004-05-25
Posts: 8
Points: 0

Sliding doors block width problem

Thanks for your suggestion Smile

Even though this produces the look I'm trying to get, floating the buttons takes them out of the page flow and makes it impossible(?) to center the button on the page Sad

I know, I'm picky - maybe this is one of those occasions when tables are ok...

Thanks again,

Andy