Pop Quiz - Tricky CSS Issue, Can You Figure Out the Problem?

[Skemcin]

Concept:Within a page, the intent is to set up a table of content look, where you have text on the left, a series of periods going from the last letter of the text to the far right where the page number is placed.

<style>.col_container {width:100%; border-bottom:1px dotted black;}.col_left {float:left; border-bottom:1px dotted white; position:relative; top:1px;}.col_right {float:right; border-bottom:1px dotted white; position:relative; top:1px;}.col_clear {clear:both;}</style><!-- row 1 --><div class="col_container">	<div class="col_left">	Curabitur est sem.<br />	</div>	<div class="col_right">	1<br />	</div>	<div class="col_clear"></div></div><!-- row 2 --><div class="col_container">	<div class="col_left">	Curabitur fringilla venenatis elit.<br />	</div>	<div class="col_right">	2<br />	</div>	<div class="col_clear"></div></div><!-- row 3 --><div class="col_container">	<div class="col_left">	Praesent adipiscing felis.<br />	</div>	<div class="col_right">	3<br />	</div>	<div class="col_clear"></div></div><!-- row 4 --><div class="col_container">	<div class="col_left">	Vestibulum egestas turpis sit amet sem.<br />	</div>	<div class="col_right">	4<br />	</div>	<div class="col_clear"></div></div><!-- row 5 --><div class="col_container">	<div class="col_left">	Vivamus diam turpis, eleifend eget, sagittis eu, egestas vel, lacus.<br />	</div>	<div class="col_right">	5<br />	</div>	<div class="col_clear"></div></div>

Issue:In all browsers, some of the rows turn out like expected. But in each browser, one row might work, but in another browser it doesn'tConclusion:What is actually happening here is not a bug. The reason it appears to work correctly but different from line to line and browser to browser is because the actual character width sometimes aligns the dotted lines a little farther in one direction. Since the original code has a complete dotted underline around the container, the idea was to have the nested <div>s overlap the bottom border just where the text is. If the 1px relative positioning is removed, you can clearly see the logic here. Once moved down to line up, it covers up the dotted line.Resolution:The solution is just as Synook offer, simply change the nested <div> borders from dotted to solid and the border will be completely overlapped - no need to worry about lining dots up.Note:The code has to be as LIGHT as possible. It will be regenerated over and over again through a database loop. Use as little CSS as possible - in other words - don't just slap something together, review and refine (more than once).Have Fun!

[Synook]

If you mean "problem" as in some rows have the dashed line going under the text, this is just a bug with the border-style:dashed property. Change the border-style in .col_left and .col_right to solid.As for optimisation, I don't see why you need to break in the .col_left divisions. Break emulation could also be achieved through .col-right:after { content:"\A"; } but this won't work in older browsers.

[Kingy]

A pop quiz? How very interesting, we should have more of these. =)

[Skemcin]

I thought a few more would have a look at this - but anyway, the original post is updated.