tom 0

I want to achieve an effect similar to toolbars Google use in GMail and Google Reader.

It's basically a row of buttons touching each other with rounded corners on the two outside buttons.

I don't really want to change the html markup, but it doesn't seem possible to get the <button> to touch even with button {margin:0;} Firebug doesn't seem to offer any clues.

Is there a way to remove this space? Where's it coming from?

See my code here.

3 answers

2
points

As I said, they're inline elements, so whitespace is relevant.

try this:

<button type="button" class="bar left">Left</button><button type="button" class="bar">Middle</button><button type="button" class="bar">Middle</button><button type ="button" class="bar right">Right</button>

or wrap them in a fieldset or div, and float them.

P.S. I assume you've read the breakdown on how the google buttons are created? http://stopdesign.com/archive/2009/02/04/recreating-the-button.html

Answered over 6 years ago by Tony Crockford
0
points

We really need to see your actual code. Looking at a picture of the problem isn't enough to be able to guess what you've done.

I suspect you might be using inline elements and then whitespace is significant, so any spaces in your code will matter.

Answered over 6 years ago by Tony Crockford
  • Sorry. I've uploaded the code here now: http://tomrandle.com/buttons.html tom over 6 years ago
tom 0
0
points

Yes thanks.

Brilliant. All those work!

I'd never really realised that white space would affect this. It make sense when your styling text but somehow seems wrong that it would alter how the buttons are spaced.

I think floating is my preferred solution because it won't break when the code gets prettified.

Thanks again.

Answered over 6 years ago by tom