Okay I'm wondering whether there is a way to tell the printer when to create a page-break when printing a HTML page? There must be something, cross-browser compatible, that allows me to do this.
An example would be to create a page break before every element with a class of 'mainHeading'.
Can anybody shed some light on this?
Thanks
You can specify where to put page breaks by using CSS page-break-before and page-break-after.
The values you'll use for this are auto, which is default and always. Auto means that the page will break before or after the element (depending on which method you used) if necessary. Always will always force a page break before or after the element.
A note, there are other values available, however I believe these are the only ones which work cross-browser.
Related
I have a Blogger template which is wider than the screen-width and causes the horizontal scrollbar to be displayed. I want to change it so that it fits and no scrollbar is shown. But the problem is I don't know what is causing this. I have downloaded the template file and in my code editor looked for all width properties and changed all 100%s to 90% and pix width values to value-100, but still the page is as before.
In finding the effective rule/rules in a such cases, what else should I look for/do? What is a comprehensive procedure to check things to find the rules?
Instead of changing the width, try adding the CSS property overflow: hidden to everything you think might be causing the issue and then remove them one-by-one until the scroll bar reappears and you'll have the culprit. You might need to add it to html and body as well. If the scrollbars aren't revealing any actual content, you can leave the overflow: hidden on the culprit to resolve the issue.
It might not be a width property that's causing the problem - there might be a block element inside your template that doesn't wrap or float that might be stretching out your container if the widths of the containers are defined using percentages.
Define the root container using a fixed width and this should eliminate many of those sorts of issues. Try that first and let us know if it works.
Procedure:
1). Understand the box model and how this varies on IE. It is just as likely that a problem "width" may actually be caused by padding, margin, or even border as width.
2). Check the rendering in other browsers. If you can reproduce the problem in FF get Firebug and use that to find out the calculated dimensions of the element in question, and tunnel down through it's children which may well be causing the issue. Chrome has a similar debugger to Firebug iirc, but I'm not familiar with it.
3). If that doesn't tell you what the problem is, start removing rules or whole patterns from your CSS until the problem goes away (or remove everything and add it back in piecemeal until the problem returns) - at that point you know what is causing the issue, if not why, and you can always update the question to ask us why when you've identified it.
hth
(Apols if any of this was already obvious)
Well, % always begins with "100". See the percentage of width of body tag is set to 100%. then according to it, just set other component % as per the requirement in your display.
Personally I do believe that, use of % is better then 'px'. If you know CSS, then try to change 'px' to % as per the requirement.
It seems that the component has min-width style and overflow property set to auto. You may want to set it to visible and do it in FireBug Firefox Page Inspector first, to see the effect alive before making post edit. If you just want to adjust the whole post width, blogger has standard interface. You can also edit the template manually
So I have a signup form on the top of my website and in safari/firefox it looks perfect but on ie7 for some reason it is pushed down so it does not look right. I tried removing all padding/margins on all of those elements but it still seems like there is something pushing it down when that happens. Does anyone know why this is happening. You can see it at the top of this page:
http://www.campusmediawatch.org/partners
Thanks!
A <form> needs to have padding & margin set to 0. Then setting the vertical alignment to center may help too. If it still doesn't work; try changing the doctype to HTML instead of XHTML, since IE uses different renderers for each doctype.
There are two likely cuases:
It's always a bit tricky to debug these issues but this could be a problem with line-height. I would try specifying an explicit line height of 1em or so to elements in the form.
In your case it's more likely that the submit button is causing your issue. The different web browsers render submit input tags improperly. Try hiding your submit button by styling it with display none to see if this is in fact causing your display issue in IE. If it is you can create a stylesheet specifically for IE via conditional comments and apply alternative styling to the submit tag. OR you can use absolute positioning for the submit input which should allow you to avoid resorting to a browser specific stylesheet.
I have a problem where i am doing an ajax fetch of some table rows which i use to replace a table's body.
The problem is that sometimes IE(6/7) decides to forget about all page styles after such an append. (that is to say, it reverts to using styles in css includes at the top of the page, but not styles defined on the page itself)
I have been able to find other people describing the same problem, but no solution. has anyone encountered this before, and was able to solve it?
bonus points if the solution did not involve externalizing all css on the page.
Well, if you mean that you have style tags in the body, they shouldn't really be there, so it's not surprising that some browsers may react badly to that.
If you are replacing all rows in a table, try to replace the entire table instead. The structure of a table isn't really meant to be changed that drastically, so replacing the entire table may very well cause a less aggressive reflow of the page. That may keep it from removing the questionable style tags in the code.
Verify that the code that you are putting in the page is valid. If you introduce invalid HTML code, that may force the browser to change rendering mode. That in turn would require a complete reexamination of the code, which could be a possible explanation why it's throwing away inline style tags.
Instead of a table you could try using div tags that you arrange to form the layout that you want. Replacing some div elements may cause less confusion to the browser than replacing a table or part of a table, which may make the page more stable.
If all that fails, I don't really see any other solution than making the page more robust by not putting style tags in the body. That's something that you should consider in the long run anyway.
I can't determine why this text can't be scrolled over and the hyperlink (all in the body of the page) can't be clicked. I'm not sure if it's a CSS issue, or some other kind of issue.
The XHTML is valid, but the CSS isn't totally. Wondering if I can fix without totally remedying every CSS element.
http://www.writershore.com/ltlaw
Thanks for any help!
The z-index of your div.main style is set to -1. Because of this, it is located under some other div. Just set it to something higher and everything should be good.
First on all, your site doesn't seems to validate 100% of XHTML.
Also, your Web site doesn't work correctly on IE, so you must have something wrong in your XHTML and/or CSS and/or JavaScript.
Now what you can do is to try to remove your reference to all your CSS file and see if it's work. If it's still doesn't work, remove your JavaScript reference and see if it's work.
If fact, at this step, what you want to know is where the error come from, because if I take your "a href" tag and put it in an empty file, it's work, so your XHTML seems right.
My way to resolve this kind of problem is to reduce the problem at is simple expression. By that I mean, remove all the external factor that can have an impact in my problem.
I hope this will help.
Let me know of your result.
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.