I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.
The padding disappears if you change the doctype to xhtml1.0
here is the simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technic-Al</title>
<style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>
<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>
changeing the doctype to any of the others removes the bottom-padding (green from the background)
Quite a few people have come on here to suggest the fix
line-height=0
I believe there is another fix that works as well.
Or should I say "work-around"
but surely this is a bug with the html5 doctype?
who do we speak to about it?
who deals with a bug like this?
how do we get it fixed?
Does anybody here know how to get this fixed?
It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.
It's not padding - it's the consequence of the computed height of the line box.
There's no hope of getting it changed, Too many web pages depend on the existing behaviour.
The appropriate authority for this is the W3C CSS working group.
I had an issue where page was showing padding in bottom of page
img { display:block ; }
writing above in css file solved my problem. Hope this help
Use the vertical-align property in your css :
img{
vertical-align:top;
}
Related
i have a pdf form that i need to be able to import as a background then use Dompdf to overlay html/text.
can this be done?
thanks
Dompdf is a library for converting HTML -> PDF. I'm no expert on that particular library but as far as I can tell it doesn't do things like overlaying html/text.
PDF cannot be imported into HTML because it isn't an HTML format and it isn't an image. There might be a parser library somewhere (e.g. http://www.pdfonline.com/easyconverter/sdk/pdf-to-html/), but without your own fairly extensive work you wont get that PDF document to be displayed in HTML.
HOWEVER, you CAN use something like this, it'll show your PDF document as the background, create a div that covers the screen just above the PDF document to make it non-interactive, then you can put all your contents above that. Note that there will be controls showing on the sides which as far as I know can't be prevented since they're provided by the browser when displaying a PDF file (you could use some fancy JS/CSS to prevent it I'm guessing but I don't know exactly how off the top of my head).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF as background</title>
</head>
<body>
<iframe src="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" style="width: 100vw; height: 100vh;position:absolute;top:0;z-index:0;"></iframe>
<div style="position:fixed;width:100%;height:100%;z-index:1"></div>
<div id="content" style="position: absolute;top:50%;left: calc(50% - 4cm);z-index:2">
<h1 style="font-size:20px;background:#00ff00;">I am on top of the PDF document!</h1>
</div>
</body>
</html>
I am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
I have multiple forms with tinyMCE textareas that saves content to the database in order to generate a PDF with the content from the database. The user can input text or images to the textarea.
Whenever the user center-align the image with TinyMCE, it doesn't show in the PDF. It doesn't give me any errors, it simply doesn't show. If I go back to the form and right-align the image, it shows again, but the users of the system required full control of the interface.
does anyone knows what could be causing this?
Notes:
I'm aware of this bug however none of the suggestions I found there fixes my issue.
I'm using Laravel-dompdf
This is a sample of the view that is being used by DOMPDF, the image is contained within product description.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{Lang::choice('page_elements/general.proposal', 2)}}</title>
<style type="text/css">
</style>
</head>
<body>
<div class="product_section">
<div class="text-block">{{($proposalProduct->description)}}</div>
</div>
</body>
</html>
This is a sample of what the product description (formatted by TinyMCE) is returning.
<p>This is a sample product, using images and tinyMCE.</p>
<p><img style="-webkit-user-select: none; margin-left: auto; margin-right: auto;" src="http://mywebsite.com/products/images/product1.png" alt="" /></p>
Thanks for the help.
Imagine a fairly simple HTML document
<!DOCTYPE HTML >
<html>
<body>
<table> <tr> <td> This is a test </td> </tr> </table>
</body>
</html>
where we are applying this css
body {background-color: ffffff;
font-size:100px;
font-style: normal;
font-family: MankSans,Arial,Helvetica, sans-serif;
}
In every single modern browser out there the font properties will apply. in my WebView however, they wont.
Looking around I found out that the problem is that the WebView goes into quirksmode, where the td tag lacks inheritance so the body css doesnt apply.
Im aware that there are ways around this, like using a more explicit 4.01 doctype, or adding this to the css
table, thead, tbody, tr, td, th {
font-size: inherit;
font-family: inherit;
}
these however dont fix the root of the problem, which is that WebView decides against all logic to suddenly "missunderstand" the HTML5 doctype and switch to quirksmode, when all other WebKit-based browsers (Safari, Chrome, etc) behave correctly.
Is there any way to programmatically fix this?
Ok, my stupid mistake
it turns out that the doctype is getting screwed because before sending the HTML document to the webview im treating it, and adding an internal ID to all tags (this internal ID is required for features inside my app)
but in case someone screws up in the same way I did and wonder whats going on, I'll offer a lenghty explanation.
DOMDocumentType has several fields, among them you have name, publicId and systemId.
for example, consider the typical HTML 4.01 transitional doctype
it can be divided in
name = html
publicId = -//W3C//DTD XHTML 1.0 Transitional//EN
systemID = http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
and you can add a Custom ID to it as long as the format is preserved, like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" CustomID="1">
the problem with the HTML 5 DOCTYPE is that while it looks like a)
<!DOCTYPE html>
for the DOM, it actually is b)
<!DOCTYPE html PUBLIC "" "">
long story short, adding my CustomID="1" at the end of a) caused the DOM to not recognize it as a valid DOCTYPE, hence switching my WebView into quirksmode. If you want to have an HTML5 DOCTYPE and add a custom id to it you should do
<!DOCTYPE html PUBLIC "" "" CustomId="1">
w3schools.com tells us that the id attribute is not valid in: base, head, html, meta, , script, style, and title.
they should warn us that, poorly placed, it can also screw your DOCTYPE =)
i have an jpg where the height is larger than a regular 8.5x11 piece of paper (the height is around 2000px)
here is the link
http://i39.tinypic.com/121d7ur.jpg
so obviously when you try to print this picture its going to print on more than 1 piece of paper ....however when i try to print the page (or even go to print preview)...it only shows half the image on the first page....but there is no second page?...there should be a second page to show the rest (or even a 3rd page)
if i use FF there is no problem...it prints on 3 pages....but with IE 7 i'm limited to just printing 1 piece of paper.
i have right right clicking on the image itself within IE7 and clicking "print this image" and still no luck.
anyone have a solution for this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blank XHTML 1 Transitional Page</title>
<style>
#media print {
html { height: 100%; }
img { height: 100%; }
}
</style>
</head>
<body>
<img src="bigimage.jpg" />
</body>
</html>
EDIT: Sorry, didn't initially realize your image was too TALL rather than too WIDE. To reduce the image height whilst maintaining aspect ratio, use CSS to set both HTML and IMG to have a height of 100% - see modified example.
I know this probably isn't the answer you are really looking for, but if you are intending on the users printing the image, I would consider putting it into a PDF. That way it will always print the same, everytime for everyone.
Try wrapping the image in a div, in the div css apply the following:
image_wrapper {*height:1%; position:relative}
The star/* selector should limit to IE, this is a variant of the holly hack.