in the Mac application I am currently developing the users will need to be able to print lists and reports of some of their data. I would like to use html and css so that the reports will be slightly more customizable.
I tried to do a test with the background-color css styling applied to a div and although the color would show up in the WebView nothing I tried would cause it to show up in the print preview. Is there any way to allow the background-color style to be printed?
I tried to do a test with the background-color css styling applied to a div and although the color would show up in the WebView nothing I tried would cause it to show up in the print preview. Is there any way to allow the background-color style to be printed?
Yes.
Related
We have been using empty anchor tags with css for years to allow hover states with no issues. Here is a sample of the css and html.
a#phone:link, a#phone:visited { width:34px; height:34px; display:inline-block; background:url(phone.png) center top no-repeat; }
a#phone:active, a#phone:hover { background:url(phone-hover.png) center top no-repeat; }
After a lot of digging I finally got cke to stop deleting my empty anchor tags, here is what I did if interested or helpful. I tried to set the removeEmpty but that didn't work until I added protectedSource:
config.contentsCss = '/css/editor.css';
config.protectedSource.push(/<a[^>]*><\/a>/g);
enterCKEDITOR.dtd.$removeEmpty.a = 0; code here
That finally prevented cke from deleting the tag, however the icons still does not appear in the wysiwyg editor. Its all there in code view...
I have stylesheetparser installed and the other styles in the linked css file are displaying correctly, including floating divs that have a width/max-width defined.
When I view the web page in Dreamweaver or a web browser, all the icons are there and working great, but the links/icons don't appear in cke. I can/have added a no-break space, but that adds margin/line-height, and just messes up the alignment design and layout.
What am I missing? Is this expected behavior? I don't think it should be. Is this a bug?
Any thoughts/ideas/help? Thanks!
I currently have a right-aligned image in the main body of a WordPress post, which I have placed using the WYSIWYG editor. However, I would like to prevent this image from displaying on devices with a max-width of 320px.
I am using a responsive theme but do not wish to change the way that other images on the website behave. For this reason, is it possible to target that image specifically? If so, how would I do this?
Bonus: I originally wanted to change the alignment and margins of the image at mobile width but have been unable to figure out how to do this without changing the way that it behaves at bigger screensizes.
Have been unable to find a solution thus far.
Thanks!
you could use media queries on the editor go to the html editor an add an id to that particular image for example <img id="target" src="some/image.jpg" />
then you could paste this on your style.css file
#media only screen and (min-device-width : 320px) {
#target{ display: none; }
}
I am using Fancybox v2.1.4 throughout a site with no problem, except in ie8 (even ie7 is ok). When I apply fancybox to a div in ie8, all background css is lost.
Here is what it is supposed to look like, and looks great in all browsers but ie8:
http://hallyb.com/images/good.jpg
And here is how it renders in ie8:
http://hallyb.com/images/bad.jpg
Nothing I change with the fancybox.css affects this black background; in fact, the background color is set to #fff first, with a background image added second Nothing about it says "black".
Thanks for any insight to this problem.
SOLVED!
This one was tricky because I am using PIE (http://css3pie.com) to wonderfully render css3 effects in older IE. For some reason, IE8 does not like it when the PIE.htc behavior file is called on nested elements, such as the fancybox 'wrap' code I am using here. IE7 doesn't seem to care. Remove the duplicate behavior attribute from the fancybox css and all is well.
It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.
I need to show the ellipses(...) if the text overflows in DIVs and SPANs.
I have a CSS attribute called text-overflow:ellipses. But this works only in IE.
I want to display the same in other browsers like Firefox/Chrome etc..
This article (http://mattlaine.com/blog/?p=49) explains how to do it for Firefox.
There is also a jQuery plugin that will add the ellipses for Firefox.
text-overflow: ellipsis works on a few other browsers, like Safari. Opera uses -o-text-overflow.
try
text-overflow: ellipsis | clip
This property is not implemented in Firefox ..
They mention that you can use the -moz-binding to simulate this
reference: https://developer.mozilla.org/en/CSS/text-overflow