I'm trying to print a web page I created.
I also created a style.css with specific rules for print.
I have some div boxes representig comments I need not to be split inside among pages.
I added this property:
page-break-inside: avoid;
This worked for the the shape (the bubble is correctly not split inside), but the box-shadow is still split among pages.
IMAGE
How can I solve this issue?
Related
I am attempting to style the horizontal rule elements on my site (or separators, as Wordpress likes to call them). I have added the CSS to my style sheet, but for some reason, the styling is not applying to all instances of horizontal rule.
I am very new to web development and this is my first time amending style.css. I feel I may be missing something obvious.
I have added the following to the top of style.css:
hr {
background-color:#06185F !important;
height:0.5px !important;
}
I expected that styling to apply across all horizontal rule elements on my site. However, it appears to be applying inconsistently, as seen here: https://emotionallyhealthyschools.org/whole-school-approach/
The middle of the three separators I have used in the body of this page is showing with a different style to the other 2. Please advise?
The css seems to be fine - However, it's actually the middle hr that is displayed correctly with a height of 0.5px.
I would actuall refrain from dimensioning below 1px because of potential unintended renderings due to rounding errors. If you add
min-height: 1px;
the hrs are rendered with the same height.
add the CSS in bottom of the style.css
bootstrap is adding some styling, including a border-top value to your hr.
add border-top: none or border-top: unset and it should work as expected.
Also change your px-value to a full px.
with pixels you either have one or not, there aren't half-values.
have a small problem with facebook comments. For some reason my theme is not very compatible with the plugin.
If you click to inspect the element, it will fix on it's own then (no idea why).
Also I would like if you add more text into the comment box the content below the box doesn't move down. So is there a way to align the box correctly only with the css? ( I have tried 2-3 different plugins, but I had the same problem)
Website: http://www.viskasseimai.lt/
P.S. it works great on a singple post, but something is wrong inside the home page...
Plugin used: https://wordpress.org/support/plugin/facebookall/page/3
The problem lies in the absolute positioning of the .blog-grid elements. The position and top values are explicitly declared and set as inline styles before the facebook comment box is appended to the element. So these calculations don't factor in the additional element because they occur before it's introduced.
CSS
.blog-grid.element.column-1.masonry-brick {
position: relative !important;
top: auto !important;
}
The above rules will over-qualify the inline rules for every instance of the element since the !important declaration has been used.
If you want these rules to only apply to the home page, add .home as a preceding selector before .blog-grid, same methodology would apply to archive pages or specific taxonomy type pages.
Given a document with h2 elements followed by p elements, I some times get a page break between the h2 and the first p, when using wkhtmltopdf.
I have tried:
h2 {
page-break-after: avoid;
break-after: avoid;
}
h3 + p {
page-break-before: avoid;
}
which I think should avoid page breaks after all h2 elements, and avoid all page breaks before a p element that follows a h2.
Neither of these seem to have any effect. Perhaps I am misusing them.
What does seem to work is page-break-inside: avoid;, but that means I have to wrap the header and first paragraph in an element and apply that style to it. Perhaps that is the only solution right now, but it causes me some other problems.
Can anyone offer any help?
From: http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf_0.10.0_rc2-doc.html
The current page breaking algorithm of WebKit leaves much to be
desired. Basically webkit will render everything into one long page,
and then cut it up into pages. This means that if you have two columns
of text where one is vertically shifted by half a line. Then webkit
will cut a line into to pieces display the top half on one page. And
the bottom half on another page. It will also break image in two and
so on. If you are using the patched version of QT you can use the CSS
page-break-inside property to remedy this somewhat. There is no easy
solution to this problem, until this is solved try organising your
HTML documents such that it contains many lines on which pages can be
cut cleanly.
I think that means page-break-inside: avoid; is the only option that works right now (although I am using version 0.12.1.1).
I am trying to replicate a page http://www.haylockpittman.co.uk/ onto http://www.haylockpittman.co.uk/new-refurb-publish/ but it can't get the images at the top to align correctly.
They call a div id 'outer' for the sizing but it appears correctly on te home page and not on the new page.
How can I change it so it calls the correct code on the new page without messing up the original page.
Thanks in advance.
Wordpress adds a series of utilities classes to your <body> tag; in your case the CSS targets .home #outer while the second page you linked is not the home page and is added other css classes. In order to make this work, you can change your css (style.css::976) selector from
.home #outer
to
.page #outer
this will target both your pages (as your home gets the page class as well). You can decide a different selector, perhaps just #outer, if you want to make sure that it will work also on articles.
That really depends on your goal.
Images have a diffrent class applied to them, causing resizing issue and the div is 600px instead of 400. I would change the page template to match all used classes/ids for all elements and make sure they are the same for both the homepage and this subpage.
I am working on a webpage in ASP.Net/C# that uses absolute positioning for a textbox, for several in fact. It was working just fine, until I added some more text boxes. That is, the existing text boxes still positioned correctly, but the new ones did not, despite the fact that I created new styles in the CSS for them just like the others. An exampe is below:
.pieceBox {
position: absolute;
top: 425px;
left: 133px;
background-color: White;
color: Black;
width: 132px;
font-weight: bold;
text-align: center;
}
Identical styles in the same CSS file (with different names of course) both above and below this one work fine. I have checked, double-checked, and triple-checked the name of the style in the CssClass attribute of the and it is correct. However, no matter what I do, including giving it a new name, copying the old entries, and renaming them, etc., these three new text boxes position themselves at the top of the page, whereas the others show in their correct absolute positions. I looked at the aspx source page and made sure they are not in some other DIV, etc. I am at my wits end with it. I did come up with a workaround for now, but it is not how I want to leave it (involves programmatically creating some HTML inside an Asp:Literal.)
I checked the resulting source (via IE's viewsource) and the class is set correctly in the resulting HTML.
One more thing in case this matters; this website project was originally created in VS 2005 and converted to VS 2008 format. Not that it should matter, but thought I would mention it.
Has anyone else experienced this type of behavior?
If you have absolutely positioned elements that have a parent that is either absolutely or relatively positioned, they will position themselves relative to their container instead of the whole page.
In other words, your elements might be positioning themselves from different origin points.
It is difficult to explain problems like this if no actual code is provided, but my first guess would be that you're having problem with new controls that are not using the same parent containers as the old ones.
Have you checked the css rules that apply for parent containers of properly working text boxes? They usually should be set to "position: relative;" if you want to have your child controls aligned according to them.
Also make sure that the layout problem isn't occurring due to overlapping of the controls i.e. two text boxes might have similar or near positions and then one comes over another.
In any case, if you want proper and straight solution to your problem, i would suggest that you post part of your code.