I've got to produce a print out of our records as per Creative's requirements. The layout is fairly simple, but it still makes use of the occasional highlight box and hairline ruler to divide up sections.
We have to support IE8, but for now, I'm developing in FF.
I currently have to go into Print Preview to examine my changes. It is a real pain to Close Preview, refresh the page with F5, then Alt-F+v to re-Preview every time I make the smallest change. Any way I can set my system up to view my changes more conveniently? I've got ReCSS, which is cool, but it does not work in Preview mode.
The only borders that seem to be supported are those around tables. So anywhere I need some element boxed, I end up wrapping it in <table><tr><td></td></tr></table> just to take advantage of the table border, which seems to be non-optional. Is there a more efficient way?
I need to divide content sections with horizontal rules (ideally several pixels thick, dashed or dotted). I have found no way to make a horizontal rule at all. I've tried styling my divs with border-bottom, which of course doesn't work. I've tried wrapping them in tables, then turning off the top left and right borders, which also doesn't work. I've tried <hr>, which also doesn't work. Ideas?
I hate to have to tell my Creative that they get text-with-a-side-of-text.
Related
PrinceXML is really great and powerful but I’m offended by the way it manages header/footer.
I am trying to have 3 columns with different background colours to run on the full page height. Not a problem until you add a footer to include the page’s number.
In order to show the footer you need to add a bottom margin to the #page, but doing so cut the columns. I tried to use an absolute position without any luck.
Is there anyone who has some experience with complex layouts and page numbering with PrinceXML ?
As a DocRaptor developer, we run into these kinds of problems all the time. Prince headers and footers live INSIDE the page margins. This provides a lot of useful power, but sometimes complicates things, as you've noted.
Without seeing your exact HTML, I'd suggest the following:
Continue experimenting with a zero page margin and absolute positioning and a negative position/margin on the element inside the footer. I think this would work. It might work better if you used a header element. Prince gets weird and buggy on the edges when you do this kind of tricky stuff.
Alternatively, if your column widths are the same for every page/document, try faking the column background colors by using a background-image on #page.
I've been looking at this small issue for a while and I can't seem to fix it. It's an firefox only bug it's fine in IE Chrome etc.
This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.
As you see the Black colour is slightly more down, I can't seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens't seem to help either, (did this locally).
If you open the pictures in photoshop or w/e they're exactly aligned.
Anyone have any idea why it goes wrong on Firefox only?
--> example
Removed the example since it's a website.
Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.
It's because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn't. You can use this workaround:
Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you're using em. That's the reason why you should now change to rem, at least for the elements inside .infographic.
Now you're done.
Ignore padding didn't seem to do anything since no padding existed? I'm really confused here. I do NOT want the red areas. (Please ignore potato colors, I'm just debugging)
Debugging using flash firebug - the dark blue border with the plus in the top left represents the whole of the UITextField inside of my Label component. I was using some other fixes found from around the web regarding how to scale the text properly to fit the container and this is a breaking issue for those fixes.
Does anyone know how to achieve this? I just want to scale my text dynamically when the window is resized and the container resizes as a result.
edit: it's important to note that this label has a scale applied, I can tell that the padding is still there when it's smaller but it's much less noticeable without the scaling
If I have problems like this I debug using FlexSpy.... to inspect the elements, and change properties in real time, very handy for things like this. Maybe that might be of some help...
https://code.google.com/p/fxspy/
Example of FlexSpy running
http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html
As far as I Know it isn't possible to get rid of the 2 pixel glutter around the text. For information about the padding arround the text see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextLineMetrics.html
You may use the .textWidth property to find out the with of your text. The exactly position of the text is dependent of the textfield.antiAliasType and the _textfield.gridFitType methods. With _textfield.gridFitType = flash.text.GridFitType.PIXEL The Flash player tries to render the text to pixels. This causing the 2 pixel glutter to vary between 1-3 pixels.
I'm doing a website that needs to have layout such as the one here:
http://newsmartwave.net/wordpress/trego/home/homepage-1/#featured_products
I've spent 2 days researching how to do proper 2 column layout and tried different options, but none seem to work just right.
Right now I have 2 versions - http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html
The problem with the first one is that if you reduce the height of the browser's window considerably I end up with some white space bellow the sidebar and some of my text ends up outside the border (see screenshot).
The problem with eh second one is that I don't can't place a full-screen background image behind both columns.
In addition, unlike on the sample website ( http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html) that I'm trying to duplicate, I'd like to have a vertical scroll bar appear if browser's window reaches certain minimum height.
I know people sometimes get annoyed with types of questions, but I really just can't figure this out and I did read numerous articles and examples.
I'm not asking to write code for me, although any code samples would be most appreciated. Minimally, I was hoping for directions for some good tutorial, as I really would like to master this layout. It comes up a lot in my work and I'd like to have my own code that I have 100% understanding of rather than using Wordpress.
For the 1st one, add overflow: scroll; to the #sidebar > .row rule.
You do have a fullscreen background image in the second one. It's just that #maincontent, which is in front of it, has a background:white; rule, so you can't see it.
Edit: I did not get annoyed by the way..
I have a web page I am testing that is doing a slight shift to the left when I click on "Solutions". To toggle back and forth go to "Solutions" and then the logo.
http://jmcintosh.aisites.com/TRS/index.html
I know exactly what the problem is in my CSS. It's the "div.breakright ul li" for the orange dotted list items in the "Solutions" page.
I've tried multiple different ways but can not get the page to stop shifting.
Need another set of eyes or another way to apply it, look at it.
It's shifting left because of the scroll-bar. You only notice this shift when other pages don't require scrolling. This isn't a CSS issue, but you can make it unnoticeable via CSS.
html {overflow-y:scroll;}