I would like to prevent the web page rendering like this
Fill the whole background with #51a025
Tile images/bg.png
Tile content_bg.png
Those steps can be quite visibly distracting, and depending on the browser/machine can take a while
So my question is, "How can I prevent that effect?"
The content is generated from php and mysql so I'm guessing the drawing is linked to the database interaction.
Here's the CSS
body {
font-size: 75.5%; /* Resets 1em to 10px */
font-family: Tahoma, Arial, Sans-Serif;
background:#51a025 url('images/bg.png') repeat-x 0 0;
color: #000;
text-align: center;
}
#page {
background: url('images/content_bg.png') repeat-y 0 0;
text-align: left;
}
How big are bg.png and content_bg.png? If the files are large then the delay you're seeing is likely just how long they're taking to download.
You could maybe try OptiPNG or a similar tool to get the file size down.
You cannot force one css rule to evaluate before another. Generally, they are evaluated in the order they are placed in the file/tag. CSS is really, really, really fast, even at it's slowest it loads faster than the human eye can detect. So my answer is you can't prevent this effect, but it doesn't matter because CSS is super fast.
The content is generated from php and
mysql so I'm guessing the drawing is
linked to the database interaction.
Nope, the content is generated server-side and delivered to your browser as HTML. The drawing is done purely by the browser (client-side).
Related
I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.
To illustrate my purpose, I simplified my code to a html page with a single red bordered table that should be 210mmx297mm (A4 paper size):
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
}
html, body
{
width: 210mm;
padding:0;
margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */
}
html
{
background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
}
table
{
width:100%;
height:297mm;
-moz-box-sizing: border-box;
border: solid 3px red;
border-spacing:0;
border-collapse: collapse;
}
td
{
padding: 0;
text-align: center;
box-shadow: inset 0 0 0 1000px white;
}
</style>
</head>
<body>
<table><tr><td>Hello world!</td></tr></table>
</body>
</html>
When I try to print this with Firefox (49.0.2), and carefully setting all margins to 0 and rendering size to 100%, I get a table which obviously is oversized:
If I select 'Adapt to page' for rendering size, I get a table which obviously is downsized:
I'm not much more lucky if I try with Chrome (54.0.2840.87 m)
I tried to force size to 210mmx297mm all the way round in the css, but there's still something wrong. I can't figure out what it is ... either a bug in rendering engine or setting missing in my code.
Note
Contextually I'm trying to create automatic reports all in html+css+javascript so they can be easily be viewed and eventually printed to pdf or paper from a web-browser. Cover page should be filled with some image up the very edges of A4 paper.
Here is some more complete example:
Example (JSFiddle)
I'm almost there, everything display nicely on screen (firefox+chrome) but there's still those margins when printing (printing works with firefox+nomargin+adaptsize only ... chrome is bugged for repeating table header/footer when printing).
You are tackling a difficult problem which is a bane of many programmers' existence. Printing from HTML and ensuring compatibility with different browsers is basically a unicorn. You shouldn't manage that concern yourself. The quirks of CSS styling and the fragmentation of the browser ecosystem will make sure you don't succeed.
My advice is that you take a look at a PDF generator API like PDF Kit or iText.
From my research, page and form printing is especially problematic on Firefox. As you've noticed from first hand experience, you can't manage margins in a sane way. I also tried with Firefox 49.0.2 without success.
I thought about using #media print{} but Firefox was unwilling to collaborate.
That being said, your code worked just fine for me running Chrome on the version you mentioned. Note that I set the margins to 'none'.
Cover page should be filled with some image up the very edges of A4 paper.
You're never going to satisfy this requirement. Trust me, I've been doing dashboards and reports on the web for a long time and you simply don't get fine-grained control over rendering like this. The web isn't designed for it.
You can still generate some great reports if you're willing to work within a margin and not try for pixel-perfect layouts. Web reports can look super sharp and you can cover multiple media with one code base.
But for situations where pixel-perfect rendering matters, in addition to control over page breaks and such, only a PDF library will suffice. There are some good ones out there--I've had success with PDFSharp.
Why don't you display a cover image that doesn't span the entire page?
You could use phantomjs to render your pdf (you ask for pdf eventually). In php I have successfully used https://github.com/kriansa/h2p to generate pdf's. (also with rendering javascript based charts with d3.js). It is not easy but with headless browsing you can make it work.
This question already has an answer here:
CSS shorthand vs longhand?
(1 answer)
Closed 8 years ago.
I'm trying to optimize my CSS. Which of the following equivalent pieces of code will my browser process faster?
margin: 0px;
margin-right: 10px;
or
margin: 0px 10px 0px 0px;
Perhaps just:
margin-right: 10px;
Any savings made by choosing one form over the other are utterly negligible in comparison with optimizations that can be made from image processing, cutting down on HTTP calls, removing unnecessary javascript, and other such measures.
The advantage of specifying margin: 0 10px 0 0 over margin-right: 10px is that you're much less likely to suffer from other margin styling declarations acting on whatever you've applied the 10px right margin to. Of course, in some situations, you may want to inherit margin styling from parent elements or classes, so it may be preferable not to specify values.
Optimising css should be done within a broader sweep of web page optimizations; I've yet to have a web page load slowly due to its css file, whereas there are plenty of websites I've abandoned while waiting for some huge image to load, some fancy (but ultimately useless) JS effect, or the mere sight of a flash plugin. Look at Google Page View or Yahoo's YSlow, and concentrate your efforts on areas that will yield noticeable benefits.
The render speed in this case would be irrelevant. Let's consider at least two points of view:
1 - Less written stuff:
Defining only shorthanded technically there are less bytes on the file.
margin: 0;
margin-right: 10px;
vs
margin: 0 10px 0 0;
2 - Less rules to render:
On the other hand, shorthanded you'd be making the browser render unecessary rules (top, right, bottom, left), when you could use just one:
margin: 0 10px 0 0; /* Defines top right bottom left; */
vs
margin-right: 10px; /* Only right */
CONCLUSION:
Your decision on use or not an shorthanded property should not be based on speed, but on quality. Shorthands have a specific purpose:
From MDN
Definition
Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy.
I am managing my school's website (mpkosis28.com) with NO prior programming experiences. If any, I'm just a 15yo computer technician.
I made a subdomain: http://28cup.mpkosis.com/index.html (yes, I really need to learn php to get rid of html files. And some graphic designing as well.) and I need to put an image behind the content. Something like twitter's background which is shown around the twitter feed.
I can't copy my css code, because I am confused with the formatting here, but here it is.
EDIT: putting a background on the white bars on the side. Like a floating page container with an image behind it.
You probably just need to add the image to the body tag, like this:
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: url(path/to/image/file.jpg);
}
The white bars is just a default page background. Use the above code in your css and make the path correct and it will work
I am styling a drop down in Firefox on Mac OS X, but it is changing the arrow from the standard look to an ugly down arrow. What can I do to keep the standard form element with the nice up and down arrows, rather than the ugly down arrow? I figure that my custom styles are causing it, but I want to be able to identify what causes the browser to switch it.
Here are the styles I'm using...
select {
font: 400 16px/16px "Maven Pro";
margin: 2px 0;
text-transform: capitalize;
padding: 0;
height: auto;
}
That's not the CSS causing the difference. It's actually a browser difference. Form elements are something that you will have a very hard time standardizing across all browsers, except maybe submit buttons, which can be swapped out for images.
You can check around for some javascript plugins, but I wouldn't worry so much to get the safari select. Folks using Firefox / IE are already used to seeing this type of select.
I have been able to create a section for profile pic and the name and location and some other info to the right of the image. However, to adjust the image with the info, I had to go through extra steps to make it look acceptable, but coding wise its not accurate, since it might create cross browser issues.
What CSS can I use to create a user profile pic and name plus other info in a way stackoverflow does it, for e.g: https://stackoverflow.com/users/441049/aaa
The top section of this is what I am looking for. I am still in the process of learning. Thanks.
This is the code:
#manpic {
margin-left:30px;
margin-top:20px;
background-color: #FFFFFF;
padding: 5px;
display:block;
}
#manname {
color: #D7D7D7;
margin-left: 150px;
margin-top:-60px;
font-family: "Lucida Grande", Verdana;
font-weight:bold;
font-size: 20px;
}
I don't see any issues with your code, except the padding might be an issue, test it out.
I would use IEtester to check the page out in IE7 and IE8
http://www.my-debugbar.com/wiki/IETester/HomePage
Test in Firefox, Safari and Chrome.
If you don't see anything in those browsers then I really wouldn't worry about the code.
If you are using floats, then make sure you have clears. With IE I have found that padding sucks and you should always use MARGIN to adjust spacing in most cases between divs.
Hope that help!
Chris