A Few Little Finicky Html, Css And Js Issues

October 11, 2024 Post a Comment

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 t

Solution 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><scriptlanguage="javascript">
timerID = setTimeout("exPDF.print();", 1000);
</script><body><objectid="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.

Solution 2:

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.

Solution 3:

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

*{
    margin:0;
    padding:0;
}

Html5 Academy