Forums

kimsia

Long story short

Used progress bar code from CSS tricks. Cannot add border to the progress bar without making it look worse.

Long story

I used the progress bar code from CSS tricks at http://css-tricks.com/css3-progress-bars/

I made several changes to the original code to get something that looks like this

http://dl.dropbox.com/u/8743819/reducedtestcase/ProgressBars/custombar.html

What I wanted to accomplish

the meter > span has a gradient (done)
the meter and span are snug tight with no spacing between them (done)
the span has a 1 or 2px border of a different color.

Note that those marked (done) are accomplished. Please see the demo [here][2].

What I tried and gotten as a result

I have tried adding border to the meter > span but that resulted in the span being much larger.
I have tried adding padding to the meter > span. Same story.
I have tried adding margin to the meter itself. Then it looks like there is spacing.

What I need

Requirements 1 , 2, and 3 to work.

FAQs

is this your full app?

No. I did a reduced test case where i stripped out as much un-necessary code to explain my problem without affecting the problem statement as possible.

Disclosure

I have cross-posted this same question at stackoverflow.com over here to gather greater attention to my problem.

kimsia

Hat tip to sandeep at stackoverflow. http://stackoverflow.com/a/13929619/80353

If understand your question you can use CSS box-sizing property for this. Write like this:

.meter > span{
 border:2px solid red;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}

For more you can read this http://css-tricks.com/box-sizing/

treehouse : what would you like to learn today?