I'm having some trouble making a site, identical to viewing it in the browser, for print. It looks good, the only thing that got me stuck is that it refuses to display backgrounds. The images are fine though, it's just backgrounds. I haven't tried setting an image as a background, but that shouldn't be necessary anyways, right?
I'm applying the background to a DIV element, with hex colors, if that matters.
Is there any way around this? I searched for it but i didn't find anyone was having the same problem.
Thanks!
By default many browsers does not print background images and colours. You need to enable that in the print options. Chrome does not have that option but to make a WebKit browsers (Safari, Google Chrome) print the background image or colour you should add the following CSS style to the element:
-webkit-print-color-adjust: exact;
Background images being printed or not is not something you can force via CSS: it's a browser's setting and most (if not all) browsers default to the 'not'.
You could try using two separate elements, for example a paragraph and an image, and then setting the z-index of the image lower than the z-index of the paragraph and then absolutely positioning the image behind your content. But I would recommend not having the background print. Otherwise you're messing with users' expectations and people will probably get annoyed.
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all browsers and on table cells and rows.
Related
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.
As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.
When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.
This happens on all parts of the site where using the font and only occurs when using the webfont.
I've tried adjusting text rendering modes and line heights, neither fixed the problem.
The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.
Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.
SOLUTION
Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.
Thanks
It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.
Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)
I have a single background for my site fixed to the top center. I have some blank s that, on mouseover, should toggle the display of an absolutely positioned with a different background that should line up against the original background.
The functionality all works fine; however, the with the background doesn't always line up. It varies depending on the size of the screen by 1px.
This is happening in Chrome, but not Dreamweaver. I haven't tested other browsers.
Any ideas?
The problem was in fact a subpixel rendering issue. I just changed the element's css from "left: 0px;" to "left: -0.5px;" and everything works fine.
Thanks to Mike Robinson for his comment and link: http://css3wizardry.com/2010/10/05/subpixel-rendering-2/
Dreamweaver's Live view is a joke, don't trust it for anything other than a rough preview, particularly single pixel differences. Test in the major browsers and use a CSS reset or normalize.css before applying your own styling if things like single pixel differences are an issue for you.
CSS Reset - Resets all styling to 0 so all browsers will start with the same baseline styles. The downside is you have to style every element you intend to use, things like lists will no longer have default styling and appear as plain text. http://meyerweb.com/eric/tools/css/reset/
Normalize.css - This is a little more user friendly than a reset, it gives all the base elements the same styling so that all the major browser defaults are covered and rendered the same. http://necolas.github.com/normalize.css/
I am trying to get CSS3 behavior on IE8 using the .htc file
So there are two things that I am applying on the same element (rounded corner & gradient)
But for some reasons, I cannot get the two effects to work simultaneously: the gradient is applied, but rounded corner is not. It works if I apply the class individually (i.e. only rounded corner OR only gradient).
You can see the page at
http://uiux.atwebpages.com/skeletal.html
(See the Curriculum/Classes divs)
Not possible to tell without looking at your CSS code, but there's probably a syntax error in your CSS which is causing one of them to fail. To confirm this, add a property directly below the one that fails and you should see it has no effect.
Edit: this doesn't work in IE8, but it doesn't cause my CSS to break in IE8 either.
border-radius: 10px;
Microsoft also has its propriety gradient tool:
filter:progid:DXImageTransform.Microsoft.gradient(...);
But the best way to show a gradient is to draw one on photoshop, then cut the width to 1px and use that image as a background image.
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/