creating form type boxes with half-height borders 2

[jpadie]

I have a task to create a no-tables, no-images version of a form that must mimic precisely its paper progenitor.

imagine a long box for data entry where each character of that entry is delineated from the next with a half-height border rising from the bottom edge, with the totality of the long box being bordered.

this is what I have so far (where the internal boxes do NOT have the half-height ticks).

<style type='text/css'>
.singleBox {border-top: 1px black solid; border-bottom:1px black solid; width: 25px; float:left; line-height:1;}
.end {border-right: 1px black solid;}
.start {border-left: 1px black solid;}
.wrapper {clear:left; overflow-y:hidden;}
</style>
<div class="wrapper">
<div class="singleBox start">&nbsp;</div>
<div class="singleBox ">&nbsp;</div>
<div class="singleBox ">&nbsp;</div>
<div class="singleBox end">&nbsp;</div>
</div>

As said, the solution (if there is one) needs to be css only. no tables or table-type mark up and also no images. there are reasons for these requirements but they are not relevant to the exercise.

I would rather not create additional mark up inside each box (as the form is already coded and difficult to manage) but if that is the solution then I will grasp it gratefully!

Can anyone see a way though this conundrum?

tia
Justin

 

[feherke]

Hi

Is cheating allowed ?

[teal].inner[/teal][teal]-[/teal]box[teal]-[/teal]with[teal]-[/teal]half[teal]-[/teal]whatever [teal]{[/teal]
  [COLOR=coral]background-image:[/color] [COLOR=darkgoldenrod]url[/color]('[COLOR=coral]data:[/color][COLOR=darkgoldenrod]image[/color]/[COLOR=darkgoldenrod]png[/color];[COLOR=darkgoldenrod]base64[/color],[gray]/*image comes here*/[/gray]');
[teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[jpadie]

nope sorry - no images at all. even little ones!

 

[feherke]

Hi

To clarify, you want something like the character separators in this form ?

http://www.payment-solutions.com/images/wu-quickpay-form.gif

Feherke.

http://free.rootshell.be/~feherke/

 

[jpadie]

yes - but only half the line height. those look like full height boxes without left and top borders

 

[feherke]

Hi

[teal].wrapper[/teal] [teal]{[/teal]
  [COLOR=coral]border:[/color] [COLOR=darkgoldenrod]solid[/color] [COLOR=darkgoldenrod]red[/color] [COLOR=darkgoldenrod]thin[/color];
[teal]}[/teal]
[teal].wrapper[/teal] span[teal]:[/teal]not[teal](:[/teal]first[teal]-[/teal]child[teal])::[/teal]before [teal]{[/teal]
  [COLOR=coral]content:[/color] "|";
  [COLOR=coral]font-size:[/color] [COLOR=darkgoldenrod]50%[/color];
  [COLOR=coral]color:[/color] [COLOR=darkgoldenrod]green[/color];
[teal]}[/teal]

[b][COLOR=blue]<div[/color][/b] [COLOR=darkgreen]class[/color][COLOR=darkred]=[/color][COLOR=red]wrapper[/color][b][COLOR=blue]>[/color][/b]
[b][COLOR=blue]<span>[/color][/b]J[b][COLOR=blue]</span><span>[/color][/b]u[b][COLOR=blue]</span><span>[/color][/b]s[b][COLOR=blue]</span><span>[/color][/b]t[b][COLOR=blue]</span><span>[/color][/b]i[b][COLOR=blue]</span><span>[/color][/b]n[b][COLOR=blue]</span>[/color][/b]
[b][COLOR=blue]</div>[/color][/b]

Feherke.

http://free.rootshell.be/~feherke/

 

[jpadie]

nice try, Fehereke. But no cigar.

1. span's don't maintain a constant width (the absence of which, apparently, will break the form scanner)
2. the 'tick' does not descend to the lower border
3. the content needs to be centered but the ticks need to be on the borders.

might it be possible to position a block element with a half-line height and a right hand border in the bottom right of each floated block?

 

[jpadie]

here is what i have come up with. i'd love there to be an easier solution though!

<style type="text/css">
.wrapper {
	overflow-y:hidden;
}
.wrapper div {
	width: 25px;
	float:left;
	text-align:center;
	border-top:1px solid black;
	border-bottom:1px solid black;
	font-size:14px;
}
.wrapper div.start{
	border-left:1px solid black;
}
.wrapper div.end{
	border-right:1px solid black;
}
.wrapper div.o{
	line-height:0.5;
	border:none;
	border-right:1px solid black;
	width:2px;
	float:right;
	margin-top: 9px;	
}
</style>
<div class="wrapper">
	<div class="start">J<div class="o">&nbsp;</div></div>
	<div>u<div class="o">&nbsp;</div></div>
	<div>s<div class="o">&nbsp;</div></div>
	<div>t<div class="o">&nbsp;</div></div>
	<div>i<div class="o">&nbsp;</div></div>
	<div class="end">n</div>
</div>

 

[BillyRayPreachersSon]

To meet your own requirements in Firefox (i.e. the lines have to touch the bottom border), and to stop the last cell looking bad in Safari and Chrome, I've made a few small changes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />

	<style type="text/css">
		.wrapper {
			overflow-y: hidden;
		}
		.wrapper div {
			width: 25px;
			float: left;
			text-align: center;
			border-top: 1px solid black;
			border-bottom: 1px solid black;
			font-size: 14px;
		}
		.wrapper div.start {
			border-left: 1px solid black;
		}
		.wrapper div.end {
			border-right: 1px solid black;
		}
		.wrapper div.o {
			line-height: 0.5;
			border: none;
			border-right: 1px solid black;
			width: 2px;
			float: right;
			margin-top: 9px;
			[!]position: relative;
			top: 1px;[/!]
		}
		[!].wrapper div.end div.o {
			border-right-color: white;
			width: 1px;
			top: 0px;
			overflow: hidden;
		}[/!]

	</style>
</head>

<body id="backToTop">

	<div class="wrapper">
		<div class="start">J<div class="o">&nbsp;</div></div>
		<div>u<div class="o">&nbsp;</div></div>
		<div>s<div class="o">&nbsp;</div></div>
		<div>t<div class="o">&nbsp;</div></div>
		<div>i<div class="o">&nbsp;</div></div>
		<div class="end">n[!]<div class="o">&nbsp;</div>[/!]</div>
	</div>

</body>

</html>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[jpadie]

Many thanks to you both

feherke for setting me on a solid thought path and Dan for the fix (in fact the only relevant browser is webkit as the page will only ever be rendered into pdf but I have implemented it nonetheless).

the importance here was to minimise resultant file size as the pdf is delivered over mobile. tcpdf and fpdf solutions for this single page are in the region of 120kb. adding even light weight images seems to increase the file size disproportionately. using pure css/html and then rendering to pdf using wkhtmltopdf on a headless box seems to save on cycles and definitely brings the file size down to c.20kb.

lazy of me, I know, but I implemented the extra markup using jQuery. there are hundreds of boxes on the page and doing it manually was a pain. two lines of jquery and it was done then just copy the generated source back into the heredoc and bob's your proverbial uncle.

If there is a better solution that anyone has - i'm all ears!

thanks again
Justin