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


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?

Answered about 7 years ago by Tony Crockford

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 about 7 years ago by Tony Crockford
  • Sorry. I've uploaded the code here now: tom about 7 years ago
tom 0

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 about 7 years ago by tom