Jump to content

0 Margin And 0 Padding, But Still A Gap? :l


Cryzabey
 Share

Recommended Posts

Test LinkI'm having some trouble. I have an X-axis with tick marks beneath it. I've established margins and paddings to be 0, so I don't quiet understand why a gap still exists between the X-Axis and tick marks. Any help would be appreciated. (Problem is consistent throughout all browsers.)
<!--- X-Axis Display Code ---> <div style='width: 886px; margin-top: 2px; padding-top: 2px;'></div> <div style='background: url(bargraph_images/bar.jpg) repeat-x; width: 722px; height: 3px; margin: 0px; padding: 0px;'></div>   <!--- Tick Marks ---> <img style='margin: 0px; padding: 0px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' />  <!--- Cash Increments ---> <div style='clear:both; padding:0; margin:0; background:none;'></div> <div style='width: 100%; color: #000000; font-size: 14px;'>  <div style='display: inline-block; float: left; padding-bottom: 5px; width: 60px;'>$0</div><center> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$20,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$40,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$60,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$80,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$100,000</div>  <div style='text-align: center; float: left; width:120px; display: inline-block; padding-bottom: 5px;'>$120,000</div></center>  </div>

Link to comment
Share on other sites

Interestingly, this is the third thread this week with the same problem, but the solution hasn't been the same each time.Try putting the tick images in the div that comes before them, and then assigning the div a line height of 3px. That brings them up to touch, but you get a weird problem where the first two ticks are right next to each other...so, not perfect but an idea.Ah, good, you fixed it. Somehow, my solution worked out its little bunching up problem...strange.

Edited by chibineku
Link to comment
Share on other sites

wouldn't this be a better solution:<style type="text/css">/*set widths*/.middlebars{width:120px;}.firstbar, .endbar{width:60px;} /*half width of middle bars*/.endbar span{ position: relative; right: -30px;} /* position minus right to centre last cost price*/.firstbar, .endbar, .middlebars{border-top: 3px solid #000; float:left; height: 20px; padding-top: 7px;}.firstbar{ background:url(bar2.jpg) top left no-repeat;}.endbar{ background:url(bar2.jpg) top right no-repeat;}.middlebars{background:url(bar2.jpg) top center no-repeat; text-align:center;}</style><div class="firstbar">$0</div><div class="middlebars">$20,000</div><div class="middlebars">$40,000</div><div class="middlebars">$60,000</div><div class="middlebars">$80,000</div><div class="middlebars">$100,000</div><div class="endbar"><span>$120,000</span></div><div style="clear:both;"></div>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...