I am producing a 20+ page report in HTML and wish to control the page breaks, margins etc carefully.
I have one particular DIV that is repeated many times and contains various floated DIVs, SVGs etc. This is styled with page-break-before: always;, and works well.
However when printing in Chrome (and only seen in print preview and the final hard copy) the height of the DIVs appears to vary randomly, with other paras split across pages. It's as if Chrome gets confused about the height of one element and then carries this mistake on, causing other elements to split across page breaks.
I can fix this by putting border:1px solid white; on the DIV. Why does this work?
I guess this is something to do with box-sizing and collapsing margins or is it just a quirk?
And is there a better, more universal way to achieve this? I've tried box-sizing: border-box but this doesn't correct it like the white border does.
Related
I'm printing a form that contains two main divs. One will be cut from the paper once it printed and the other one just contains information about clients. The problem is that the second div's size depends on the amount of information we have on the client themselves. So if we have a lot of information about a particular client, we would need to print muli-pages. Wanting to save paper, having double-sided is fine with us. Is there a way or trick with css that we can make it where the second div will continue at a certain height if a muli-page print is needed so that when we cut the first div, none of the information about the client is cut out too. Below is a simple picture of the desired outcome layout where the red box is what going to be cut, the blue box would be where the client's information would be, and the dash line red box would be just empty space.
Desired Outcome Layout
Use the #page css rule to set a margin on all pages besides the first. Margins are given in cm like margin-top: 10cm;
#page:not(:first) {
margin-top: <<height of the red div>>;
}
Note that #page does not allow defining any pages besides the first, so this top gap will still be present on the 3rd, 4th, etc. pages.
Also note that #page does not have support for safari and possibly other browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/#page
There are two divs. The left one has specified it's css like this:
max-width:30%;
min-width:450px;
The right one has a
flex-grow:1
There is a lot of other styling but Im hopefully just pointing out the most relevant.
Inside the right div there are a few elements.
The innerst element is a p-tag where I have tried to put all possible directives to make it break long words.
The last attempt is this:
word-break: break-all;
word-wrap: break-word;
I also tried to combine with other directives, like
max-width:100%
width:100%
display: block (but even all other possible values)
Many people seem to have solved this using microsoft specific word-break/wrap. In my case it doesn't succeed.
When having a word composed by for example 50 characters (without white space) a big part of the word is not visible as it goes outside the browser.
The page itself doesn't have an horizontal scroll (there is maybe other styling that stops this).
Even adding
overflow:hidden/scroll
inside the p-tag didn't help. I see the horizontal scroll but it doesn't really let you scroll to the right, even if the scrollbar is there.
This is crazy situation. Debugging with explorer devtools is not the best experience.
Anyone that can help?
I have a really weird issue thats seen in Safari and Chrome. Somehow it works just fine in Firefox.
Look at this URL in one of the above browsers: https://musik.dk/therollingstones/videoer
If you scroll down, you'll notice a videothumb that floats very different than the rest. The "sinner" is the video starting with the name "Arrive in Japan" thats just a single pixel height than the rest.
I've looked into the inspector, but everything is exact as heigh and wide as all others (its the same template) and the image is 100% the same height and width. It could be a render issue, but its the same video all the time.
Can anyone figure that out?
Screenshot:
The floated article in question is "snagging" on the article to the left above it, which is slightly taller than the others. That's the problem with floating.
My advice would be to remove all of the float: left; declarations (there are two for desktop and various instances within media queries as well) and use display: inline-block instead, perhaps with a reduced right margin of, say, 0.5% (although these get a bit inaccurate).
Instead of right margins, you could apply text-align: justify to the container of all those articles. That will only mess up the last row if there aren't 4 articles, but that's fixable, too.
Or you could use flexbox, which is the modern way to do this, though not fully supported across the board yet.
The reason is due to that video having japanese characters in the name. For whatever reason, they render slightly larger, making the .ellipsis box 1px larger.
As mentioned by ralph.m I would make then display:inline-block; and remove the float, then set margin-right: 23.8%;
I'm looking to create a simple WordPress page that will display several images, along with some descriptions.
This page is for a customer who would like to update it on her own in the future. She has no familiarity with HTML or CSS.
I'm using a child theme based on "Attitude", although I think this issue would apply to most themes.
The layout I'm hoping for is one where an img is given the class "alignleft", to which I've appended the margin-right to be 50px.
So, it looks gorgeous as long as the text is beside the image. But, once the text gets below the image, it wraps back to the left of the page... just as it should, I suppose! :)
Only, for my page, I'd like for the text to stay "indented", even past the image.
The kicker is that the images are not all going to be the same height or width. Although the height and width dimensions will be between 100px and 300px in almost every case.
WHAT I'M HOPING FOR:
WHAT I'M GETTING:
Things I've already considered are...
div's. If it were just me updating the page, div's would be super easy to implement. But I don't want her to have to do any HTML. (Maybe I could make a template. Hmm...)
Tables. I feel like maybe this isn't ideal because of the variable widths of the images. I suppose I could set the alignment of the "images" column to be "right", and then set cell padding to 50px on the right side.
A NextGen Gallery. If I do this, then I lose the ability to have bullet points in the text part (since the "Description" section of NextGen photos doesn't appear to handle that sort of thing).
Adding a margin-bottom to the .alignleft class. But, again, the images will be different heights AND the paragraphs will be different lengths.
You know, I think I'm on to something here.
It may not be the most eloquent solution. But I think it's going to work.
I'm going with tables!
First off, I have the TinyMCE WordPress plugin installed, so adding tables using WordPress's visual editor is easy enough for anyone to do.
I've added the following CSS to my child themes style.css file (Again, I'm using a child theme of Attitude):
.entry-content table tr td { width:auto;text-align:justify;vertical-align:top;}
.entry-content table tr td:first-child { width: 36%}
.entry-content table tr td:first-child img {width:100%;height:auto;}
I might make a few tweaks. But otherwise, I think this'll work pretty well.
The images will now be the same width. Which is great. My friend can now upload images of different sizes (again, probably between 100px and 300px in height and width), and the CSS will take care of formatting. Huzzah!
For example, if I make a block of four images that are absolutely positioned with 50% width and 50% height, the result in Internet Explorer looks like this:
http://img716.imageshack.us/img716/8376/96774641.png
The images are placed right next to each-other, as would be expected.
But the same code in Chrome produces this:
http://img560.imageshack.us/img560/7976/chrome.png
The images are shrunken slightely to make room for the spacing in-between.
My styles already include:
border-style: none;
border-width: 0;
padding: 0;
margin: 0;
... so why is Chrome spacing my images apart from each-other, and how can I fix it without altering the display for other browsers that render correctly in the first place?
EDIT: <link removed>
Be aware that the actual page is much more complicated, with over 1,000 <img> elements.
It will load slowly in any browser that is not hardware accelerated.
I have confirmed that FireFox renders it identically to IE8, with the images next to each-other as they should be.
This could be a rounding issue: A width of 50% may well end up as 223.5px for example.
Seeing as you're using images with a fixed size, why not specify the positions in pixels as well?
Are you using a CSS reset? Browser default styles can cause irritating problems like paragraphs with differnt top margin heights or other quirks of layout. This particular case may not be fixed with a CSS reset, but it would eliminate the possibility.
Sadly, the CSS3 option to set a background image scale is not yet available in any reliable way, or you could set the image as a repeating background image scaled to 50%, which of course would have no gaps. That won't be an optin for quite some time, most likely.
Have you tried using the Inspector (right-click on the image, select Inspect element) to trace where that spacing is coming from?