I need to draw a small vertical seperating line in my print document. When i apply it thro the CSS class ,it works pretty well with firefox and IE8, but the styles dont get applied for chrome. The styles are in #media print of my css file.
.verticalLine1
{border:0.5px #B1B1B1;
border-style:solid;
border-top-width:15px;
width:1px;
}
Any pointers to solve this problem?
Try this in your CSS file:
.verticalLine1 {
visibility: hidden;
border: 0.5px #B1B1B1;
border-style: solid;
border-top-width: 15px;
width: 1px;
}
#media print {
.verticalLine1 {
visibility: visible;
}
}
and include CSS file without media="screen" attribute and without any JavaScript click event
<link href="styles/print.css" rel="stylesheet" type="text/css"/>
After 2 pathetic days, I couldn't crack up with a proper fix.But had few alternatives
Writing styles inline with the code worked Pretty perfectly. Code looks as below
<div style="border:0.5px #B1B1B1;border-style:solid;border-top-width:15px;width:1px;"></div>
Since the previous approach is not a great coding practice I was forced to create an image with the above dimensions and I added it as a part of the code.
Thanks to chrome.Atleast it adds images, if not css.
Adding images for borders is never a good idea. Also, you need to keep in mind that chrome truncates the decimal values to closest lower number. Due to this 0.5px will be interpreted as 0px instead. I will suggest use 1px instead of 0.5px. This will remove so many issues.
Related
I'm making some printable calendar website using HTML, CSS and JS.
Unfortunately I cannot use CSS property called text-shadow, because shadow behind text prints as solid black text without any blur or transparency.
Same problem occurs when I'm trying to use box-shadow for any div - shadow prints like solid black color with no transparency.
I'm using Chrome with style html {-webkit-print-color-adjust: exact;} to ensure all background colors will be printed.
Any workaround? I would prefer not to use any background image.
Edit:
I don't want to hide shadows, it's very easy of course. I want to have shadows printed correctly.
I realise this is an old question, but just to note that it is possible to make shadows print correctly in Chrome. You need to set both -webkit-print-color-adjust and a filter, as found in this bug thread: https://code.google.com/p/chromium/issues/detail?id=174583
.thing {
-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
}
(I prefer to set opacity rather than blur as used in the bug, simply because it seems likely to cause fewer problems).
Note that this will limit the resolution of the print (filter makes it send a rasterised version), so text might become harder to read. If you really want to work around that, I'd suggest duplicating the div (one for the shadow, with the filter hack and transparent text, and another for the text with no shadow)
Here is the solution:
#media print {
.item {
-webkit-filter: drop-shadow(4px 4px 1px #ccc);
text-shadow: 4px 4px 1px #ccc;
}
}
If anyone is looking for a way to avoid rasterizing the content of the element with a box-shadow, this is what I used (extended from #Dave's answer):
.thing {
position: relative;
}
.thing::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: /* define your shadow here, not in .thing */;
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
This creates a pseudo-element at the beginning of the element you want to have a shadow. The pseudo-element is sized the same as the parent and then the drop shadow is applied to it only. That way, the drop shadow can be rasterized while the rest of the content of the parent is not.
There are a few issues if you have borders, if your element doesn't support children, etc. but this works in most cases.
I used all the possible solutions to this but the border shadow(with stepped gradient) would show up on my page, but not when I do a Ctrl+P on the page and either- print the page or save as PDF. I even used-
-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
I do the same Ctrl+P on this page- https://css-tricks.com/examples/BodyBorder/kottke.php and it works fine.
Solution: I had to remove the bootstrap.css included at the top of my page for the border shadow to show up on my PDF, or when I print the page.
<link href="/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" >
I tried
html {
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
But it causes links on PDF non-clickable for unknown reason.
After I change it to the css below, both shadow and link problems are solved.
.thing {
-webkit-print-color-adjust: exact;
-webkit-filter: blur(0);
}
You don't need to compromise your web page to make it look pretty printed. Simply define a print.css that makes the printed view suit your needs.
# index.html
<head>
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
</head>
# print.css
.shadow {
text-shadow: none;
}
For more, Smashing Magazine has a helpful article on How To Set Up A Print Style Sheet.
I'm, styling a hyperlink which has an own class.
.myLink
{
display:block;
padding: 4px 9px;
margin: 0px 6px;
}
.myLink:hover
{
background-color: #E4E4E4;
padding: 4px 9px;
margin: 0px 6px;
color:#000;
}
For the removing, I have this:
.myLink, .myLink:active, .myLink:visited
{
color:#000;
text-decoration:none;
}
In IE everything is working fine, but in Firefox my link gets underlined WHILE clicking on it.
I thought, if I definde the ":active" part, it's going to work, but it isn't.
Help please.
This sounds less like a CSS issue but more like browser preferences/overrides. I'd try to add !important to the text-decoration attribute, but actually looking for the reason would be the even better solution. Best solution would be checking the origin of the style using a tool (IE's developer tools or Firefox' Firebug).
If your are using a CMS or something with pre defined CSS files, it might be a browser specific CSS file causing this, as they will override the main CSS file. Even if you are not using a CMS or something with browser specific CSS files try Firebug in Firefox, this will tell you where in the CSS file the style is coming from and what CSS file is generating it.
www.getfirebug.com
Either use !important or make sure your ".myLink, .myLink:active, .myLink:visited" rules are below in order
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}
I want to change the scrollbar color in Firefox. How can I do that?
Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.
That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
Here's how it works:
Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.
This is where a vast majority of the magic happens:
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding:0;
}
#container {
height:100%;
width:100%;
margin: 0;
padding:0;
overflow: auto;
}
</style>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
});
</script>
This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.
Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the margin and padding of html and body to 0, and set the height to 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).
Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.
The html is then very simple.
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
If you've done everything right, your page should look like my example.
Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #969696;
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
background: #2B2B2B;
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #1A1A1A;
}
The only thing missing is for firefox to support this feature.
Since version 64 Firefox allows limited styling of scrollbars:
.my-scrollable {
scrollbar-color: red blue;
scrollbar-width: thin;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
It is not possible directly via CSS.
But if you can use jQuery, jscrollpane may help you.
you can't. as you can see here, this is only possible fpr IE5+ and Opera7.2+.
EDIT: with a bit of javascript it could be possible to build you own "html-scrollbars" that could be styled like you want them - but i don't think you should do that, writing this just to be detailed.
Well, I have heard someone saying "It's Impossible"...
But I don't believe in the impossible.
In the follwing example I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:
<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>
The Css will be:
.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}
.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}
Here are the final results:
(Note: The first image is the default scrollbar color).
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars
are shown in the window. This attribute is "replaceable"
in JavaScript. Read only
Firefox also has the following vendor specific properties:
overflow: -moz-scrollbars-none
other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.
for Firefox or cross browser you can use :
jQuery custom content scroller
more simple and easy to use
here sample i implement in magento and tested on firefox, opera, chrome and safari : http://i.stack.imgur.com/wnRCL.png
In Firefox V103 coloring scrollbar works with:
html, body{scrollbar-color: #f33942 #000;}
I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border:
input.button {
background: #eee;
border: 1px solid #ccc;
}
This looks just right in Firefox, Safari and Opera. The problem is with Internet Explorer, both 6 and 7.
Since the form is the first one on the page, it's counted as the main form - and thus active from the get go. The first submit button in the active form receives a solid black border in IE, to mark it as the main action.
If I turn off borders, then the black extra border in IE goes away too. I am looking for a way to keep my normal borders, but remove the outline.
Well this works here:
<html>
<head>
<style type="text/css">
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background:none;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<span class="button"><input type="button" name="..." value="Button"/></span>
</body>
</html>
if you dont want to add a wrapper to the input / button then try doing this. As this is invalid CSS then make sre its for IE only. Have the border as per for other browsers but use the filter:chroma for IE...
<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
worked for me.
I know I'm almost 2 years late to the game, but I found another solution (at least for IE7).
If you add another input type="submit" to your form before any other submit button in the form the problem will go away. Now you just need to hide this new, black-border-absorbing-button.
This works for me (overflow needs to be "auto"):
<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />
Note: I am using an HTML5 doctype (<!doctype html>).
I've found an answer that works for me on another forum. It removes the unwanted black border in ie6 and ie7. It's probable that some/many of you have not positioned your input="submit" in form tags. Don't overlook this. It worked for me after trying everything else.
If you are using a submit button, make sure it is within a form and not just a fieldset:
<form><fieldset><input type="submit"></fieldset></form>
I was able to combine David Murdoch's suggestion with some JQuery such that the fix will automatically be applied for all 'input:submit' elements on the page:
// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />')
.insertBefore("input:submit");
}
You can include this in a Master Page or equivalent, so it gets applied to all pages in your site.
It works, but it does feel a bit wrong, somehow.
I'm building on #nickmorss's example of using filters which didn't really work out for my situation... Using the glow filter instead worked out much better for me.
<!--[if IE]>
<style type="text/css">
input[type="submit"], input[type="button"], button
{
border: none !important;
filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
height: 24px; /* I had to adjust the height from the original value */
}
</style>
<![endif]-->
Right, well here's an ugly fix for you to weigh up... Stick the button in a <span>, nuke the border on the button and give the border to the span instead.
IE is a bit iffy about form element margins so this might not work precisely. Perhaps giving the span the same background as the button might help in that respect.
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background: #eee;
border:0;
}
and
<span class="button"><input type="button" name="..." value="Button"/></span>
The best solution I have found, is to move the border to a wrapping element, like this:
<div class='submit_button'><input type="submit" class="button"></div>
With this CSS:
.submit_button { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }
The main problem with this solution is that the button now is a block-element, and needs to be fixed-width. We could use inline-block, except that Firefox2 does not support it.
Any better solutions are welcome.
I think
filter:chroma(color=#000000); as metnioned a wile ago is the best as you can apply in certain class. Otherwise you will have to go and apply an extra tag on every button you have that is if you are using classes of course.
.buttonStyle {
filter:chroma(color=#000000);
BACKGROUND-COLOR:#E5813C solid;
BORDER-BOTTOM: #cccccc 1px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-RIGHT: #cccccc 1px solid;
BORDER-TOP: #cccccc 1px solid; COLOR:#FF9900;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px; FONT-WEIGHT: bold;
TEXT-DECORATION: none;
}
That did it for me!
I had this problem and solved it with a div around the button, displayed it as a block, and positioned it manually. the margins for buttons in IE and FF was just too unpredictable and there was no way for them both to be happy. My submit button had to be perfectly lined up against the input, so it just wouldnt work without positioning the items as blocks.
This is going to work:
input[type=button]
{
filter:chroma(color=#000000);
}
This works even with button tag, and eventually you can safely use the background-image css property.
The correct answer to this qustion is:
outline: none;
... works for IE and Chrome, in my knowledge.
A hackish solution might be to use markup like this:
<button><span>Go</span></button>
and apply your border styles to the span element.
add *border:none
this removes the border for IE6 and IE7, but keeps it for the other browsers
With the sliding doors technique, use two spans inside of the button. And eliminate any formatting on the button in your IE override.
<button><span class="open">Search<span class="close"></span></span></button>
I can't comment (yet) so I have to add my comment this way. I thing Mr. David Murdoch's advice is the best for Opera ( here ). OMG, what a lovely girl he's got btw.
I've tried his approach in Opera and I succeeded basically doubling the input tags in this way:
<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />
This way the 1st element is hidden but it CATCHES the display focus Opera would give to the 2nd input element instead. LOVE IT!
At least in IE7 you can style the border althogh you can't remove it (set it to none).
So setting the color of the border to the same color that your background should do.
.submitbutton {
background-color: #fff;
border: #fff dotted 1px;
}
if your background is white.
For me the below code actually worked.
<!--[if IE]>
<style type="text/css">
input[type=submit],input[type=reset],input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
</style>
<![endif]-->
Got it from #Mark's answer and loaded it only for IE.