A few little finicky HTML, CSS and JS issues

Question

My attempts are viewable on http://bit.ly/S4je19

Issue 1: The upload button should be moved down about 5px to be inline with the "select image" file input. I can't seem to get it to move that drop down, why?

Issue 2: Name, Postcode and Email sit basically inline (end at the same area) on jsfiddle, but when uploaded to the server they don't?

Issue 3: On jsfiddle the absolute submit button on the bottom right does what it should, and the checkbox and "tick" text are inline. On the server off jsfiddle, the submit button sits inline with the checkbox and tick text and the checkbox sits higher than the "tick" text rather than inline? Why?

Issue 4: The download and prinst links. The download link should automatically download (cross-browser) but won't for all browser? The print link should open the file with a print dialog automatically (cross-browser) but again won't for all browsers? My code is in the JS area of my jsfiddle. This should work for any browser - maybe someone can provide a better solution?

Thanks!

Dave

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

1. Issue 1:

#BrowserVisible {
    background: url('http://www.joelandamywedding.com/images/upload.JPG') 100% 5px no-repeat;
    height: 32px;
}

2. Issue 2 & 3:

Use a CSS Reset. Either Normalise or Eric Meyer's. Or if you are not sure, you can use this, but it doesn't solve everything:

* {margin: 0; padding: 0; list-style: none;}

3. Issue 4:

In your server side, please give the header: Content-disposition: attachment; in order to force browsers to download instead of viewing inline.

Printing a PDF from the browser:

You can use JavaScript from the browser to communicate with the reader that shows the file. I found this other approach in a question that might worth trying:

<html>
<script language="javascript">
timerID = setTimeout("exPDF.print();", 1000);
</script>
<body>
<object id="exPDF" type="application/pdf" data="111.pdf" width="100%" height="500"/>
</body>
</html>

The idea is to use javascript in the browser to instruct the PDF reader to print the file. This approach will work on PDF files embedded in a HTML page.

edited May 23 '17 at 12:21

Community

1
1

answered Oct 28 '12 at 03:54

Praveen Kumar Purushothaman

164,888
24
203
252

1

Perfect response, thank you. I'll also give the content-disposition a try. Have anything for the print? – Dave Oct 28 '12 at 04:03
1

You can use a Print CSS! `:)` But still I am not sure about the question. – Praveen Kumar Purushothaman Oct 28 '12 at 04:03
Lemme check out and get back ASAP! `:)` – Praveen Kumar Purushothaman Oct 28 '12 at 04:04
Thank you!! :) basically need the print link to send the pdf to the printer with dialog even is fine :) – Dave Oct 28 '12 at 04:05
Thanks @Praveen Kumar - trying to get this working in a jsfiddle but doesn't want to work :/ also, would love to have it bring up the print dialog by clicking a text link? Thank you again! :) – Dave Oct 28 '12 at 04:22

score 0 · Answer 2 · answered Oct 28 '12 at 03:54

Your form [type=text] rule sets a margin-top of 5px. In #FileField, override that and set it to 0.
JSFiddle, by default, uses a minimal CSS reset. You may want to include a similar one.
Probably the same as 2.
I don't know. The download thing should work on most browsers; the print thing is probably harder to control since it is often the case that plugins handle displaying PDFs.

score 0 · Answer 3 · answered Oct 28 '12 at 03:59

0

For issue 2, you probably don't need a full CSS reset, just use

*{
    margin:0;
    padding:0;
}

answered Oct 28 '12 at 03:59

Charlie

11,380
19
83
138

Spot on with this one @Charlie ! – Dave Oct 28 '12 at 04:02

A few little finicky HTML, CSS and JS issues

3 Answers3

1. Issue 1:

2. Issue 2 & 3:

3. Issue 4:

Printing a PDF from the browser:

Linked