I'm working on adding basic print functionality to a web map application I recently built, and I can't seem to make the printing work properly when using Internet Explorer 8 in standards mode. I was hoping that someone with more CSS experience might be able to help.
I've created a basic example on jsbin that demonstrates what I'm seeing: http://jsbin.com/osepov/16. This example prints properly in most browsers. In Internet Explorer 8 in standards mode, however, the map's tile images run off of the first page and onto a second page when printing. I've tried a bunch of different CSS combinations, and have browsed the web for hours looking for hacks that might solve the problem. I've obviously had no luck thus far.
Being that the print functionality works well in most browsers, I am willing to compromise on a few things, if needed, to get this working in Internet Explorer 8 standards mode:
The map doesn't have to fill the entire page, minus the header. It can have a fixed height.
The header is nice to have, but I'm willing to do without it.
I know it is possible to build a PDF on the server, but I really want to do this with a simple print stylesheet.
Note: Yes, I do have to support IE 8 standards mode. I had a solution that kicked IE8 users to IE7 mode, but this was not acceptable to my client.
UPDATE 2: I was able to resolve the issue by bumping IE8 down to IE7 standards mode. The map is printing correctly now.
UPDATE: Nope, this didn't solve the problem. I'm still seeing the same issue. This seemed to work, but I'm still seeing the problem.
ORIGINAL POST: I think I figured this out. Basically, it seems like the "top" div was causing the entire page to get bumped down and run over to a second page when printing in Internet Explorer 8 standards mode. I'm not sure why this was just happening in IE8 and not in other browsers, but there are all sorts of strange IE-only bugs that I don't understand.
The final fix:
#wrapper {height:100%;left:0px;position:absolute;top:0px;width:100%;}
#top {height:70px;position:relative;width:100%;}
#main {height:785px;overflow:hidden;position:absolute;top:70px;width:100%;}
So positioning the "top" div relatively and assigning a pixel height and "overflow:hidden" to the "main" div seemed to solve the problem.
This isn't a perfect solution, but it meets my current requirements.
Here's the updated solution: http://jsbin.com/osepov/19.
Related
I have several divs on a webpage that use the IE css filter to create a gradient effect for the background.
The page is viewed primarily in IE6 (I have no other choice unfortunatly) and displays fine on my development machine. I have also tried viewing the page using IETester and the page also displays fine in IE 5.5 to IE 8.
However, when viewing the page on the "live" machine, the gradients don't show up at all. The browser on the "live" machine is IE 6 with sp3. I have checked the div's and they all have "hasLayout" so that isn't the problem.
Are there any settings within IE that would stop filters working or could anybody suggest any other reasons why they would not be showing up. I can't work out why they work in one version of IE 6 but not another.
Unfortunatly I can't link to any examples.
Thanks
The filter features of IE are not built into the browser; they are using external libraries (DLLs). This is what the 'progid' part is all about, and also explains why some of them are so clunky.
If those DLLs are not installed on the client machine, then the filter styles won't work. If it works in some IE6 machines but not others, then this is almost certainly the problem you're encountering.
Theoretically it should be possible for you to fix the problem by installing the missing DLLs.
However, the problem for you is that if the client is anal enough not to have upgraded their browser from IE6 yet, then it's pretty certain that they're not going to want to have you fiddling around on their machines installing unknown (to them) libraries. In any case, you would have to do it for every individual machine.
The bottom line is that realistically this is not going to be an option. Your best bet is to give up trying to make IE6 do fancy stuff, and go back to using background images for your gradients. It's not pleasant to write, but there is a reason why everyone used to do it that way when IE6 was the standard browser.
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
http://www.gamespot.com/
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)
I created a simple page with a series of divs. In all of the modern browsers, it appears fine, but in Internet Explorer 6, it falls apart. I have no idea what is causing it to happen.
You can view the page here: IE 6 Test Page
If you have IE6 installed, I included the Firebug Lite JS file on the page, so just click the firebug icon in the bottom right corner to inspect an element.
Here's a screenshot using Browserlab to view the page in Firefox and IE6: Comparison Screenshot
The 3rd div named 'content'(With the Manager Email field) moves everything to the right forcing the next div to the next line. Also, none of the row div's reach all the way across as they should(see Comparison Screenshot)
I did some research and have found that there is some problems in IE6 using floats which I use here, but I'm not sure how to fix it.
Why does my page not display correctly in Internet Explorer 6? And better yet, how can I fix it? :)
It looks like the third div isn't clearing the float properly. Perhaps give each of the row divs the style clear: both
Do you really need to support IE6? Even Microsoft is fighting it nowadays and the market share is starting to be irrelevant except for China.
There's a difference between "not working in IE6" and "not looking perfect in IE6".
As has already been said, IE6's market share is low and continuing to fall -- it's below 2% in most of the developed world (see http://gs.statcounter.com/ for country-by-country stats).
Given those stats, I would say that if the page is usable in IE6 then your work is done. IE6 users are by now used to web pages looking bad. Many popular sites don't work at all in their browser, so one with a few layout glitches won't phase them at all. They'll still use the site.
If it is actually broken to the point of not being usable then it's a different story; in that case, you'd need to consider how important those few IE6 users are to you vs the time it'll take to do the work, and fix it accordingly, but that doesn't seen to be case here: the page seems to work. It looks a bit naff, but it works.
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.
I'm having major rendering issues in Safari with the web application I'm working on. Most of the design is done with divs using absolute positioning. This renders fine on Internet Explorer, Firefox, Chrome, Opera, Netscape, and konqueror. In Safari, it's just a jumbled mess.
Does Safari lack support for absolute positioning of div elements?
What is the best way to trouble shoot and find out what is going on with the safari browser?
UPDATE: I'd like to note I did find the issue, and I would like to thank everyone that gave suggestions. It was the WebKit's "Inspect Element" that gave the most useful information. It appears that their were conflicts with inline styles and styles from the CSS. While safari grabed the styles from the .css file, the rest of the browsers were using the inline styles. i was able to see those conflicts with the information in the tool that was suggested.
The problem may lie somewhere in your JavaScript; one of the most noticeable things about Safari is that it likes to stop executing JavaScript after any errors.
CSS is likely not the issue, since Safari has better standards and CSS support than any other browser out there (alright, I said it.)
Use the built-in Web Inspector in a recent nightly build of WebKit to track down your issues.
1. Safari's support?
Safari is actually a decent browser. If it has its flaws, they aren't any worse than those of any other browser, and they aren't of the class of the old IE browsers, which had very serious problems and lacked even basic support for web standards. To answer you question specifically, yes, it does support absolute positioning.
Safari can certainly render modern X/HTML CSS designs, and since your audience is largely using Safari anyway, you may as well forget the notion of dismissing the browser. It's a good browser, and in any case we're powerless to change it. We simply need to take care of these bugs, whatever they are.
2. How to go about debugging?
Without having a specific example, it's not something anyone can really help you to do. It seems fair to say that you're having some issues controlling css-based layouts. You may have some invalid markup, which in some cases could produce the kind of extreme browser-specific abnormalities you've described.
Start with the basics. Validate your markup and CSS.
Markup Validator
CSS Validator
Make sure you're rendering in standards mode.
Seek out answers to specific questions
If everything validates and you're still having problems, you'll have to track them down one by one. Even if you rebuild the page, piece by piece in Safari in order to see where things begin to unwind, it will be worth it to do. If during this process you really don't understand why a certain behavior exists, you'll at least have a specific question that you can use to poke around for answers. It may be answered already on SO, and if it isn't, you can ask it.