I have a problem with my matrix not rendering properly in HTML. It's a minor issue but annoying nonetheless.
The problem is that the right borders disappear on the rightmost column. It only happens on cells with data in them. Like so:
alt text http://img193.imageshack.us/img193/7718/med100width.png
Does anyone else experience this? Workarounds? Fixes? Does SSRS 2008 have the same issue?
I have had similar problems, particularly cross browser, with SSRS. The standard of the HTML generated is very poor and hence often is quirky to say the least even in internet explorer.
The client I was working for had strict standards for accessibility and browser compatibility so I looked into improving the standard of what was outputted a lot but didn't get anywhere. As reports are basically XML I was hoping someone somewhere may have written a better engine to transform this into XHTML but it appears not.
I ended up playing around with table size and column widths which in some cases seemed to resolve some of my issues.
Upon further inspection it seems that all numbers are enclosed in divs, with the attribute width=100%. Using the developer tool in IE I saw that removing width=100% restored the borders.
One solution could be to write your own renderer based on the standard html and filter out the annoying little buggers.
Related
Hello,
I have the website DaltonEmpire (http://daltonempire.nl, check out for yourself), and when I got home today, it showed error 500. I had made really tiny HTML changes at school via my new CodeAnywhere app, but this was not supposed to happen. After some cleaning up of my PHP, just removing whitespaces, the page loaded.
But now, the background is completely gone and there all all kinds of weird &nspb; tags between my HTML according to Chrome Developer Tools [1], which weren't there before. In my actual code, of course there's whitespace to order my HTML, but that's just spaces, no &nspb;'s, and that never happened before.
Also, the body background is not loaded [2], and the Developer Tools indicate that CSS responsible for the background is not included at all [3] (rather than overwritten or not loaded), even though it is clearly in a <style> block with the body selector [4]. Manually adding that [5][6] bit through the Developer Tools seem to fix this.
Has anyone any idea how this could happen/how this could be solved?
The strangest thing is, I did not change anything specific at all that I can recall. What has caused this?
I need my website to be fixed as fast as possible, as my visitors are students to get their educative documents and in two days is their test week.
Thanks in regard,
Isaiah van Hunen
Attachments:
Weird &nspb;'s
Background not loaded
Background CSS not included?
Background CSS is included
Adding manual Background CSS
Background loads
I can help with 1).
is a formatting entity:
it is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break
(or wrap) a line of text at the point that this occupies.
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
Microsoft Word puts it into HTML files, and so do other WYSIWYG editors.
Unfortunately, CodeAnywhere seems to have the same issue.
Do you have an earlier version of the code that you can open in Notepad/Notepad++/Atom in order to add the whitespace manually there (with ` tags or the like)? That might help.
I've came across this issue where the browser (Chrome) is sometimes rendering characters as completely different ones, however in inspect element they're written how they should be. You'll see in the images that on the right inspect element shows what it's supposed to be, and on the left shows what it's rendering as.
I can't find a reliable way of replicating this problem, there is no correlation of events that I can see to cause this to happen
I have noticed that the replaced words contain the correct amount of characters for the word it's supposed to be.
This can happen to any element on the site as far as I've seen. It doesn't matter if it's getting the content from the database or if it's hard coded.
Refreshing the page usually causes text to render as normal. It doesn't happen all the time.
I've just recently joined stackoverflow so I need 10 reputation to post pictures apparently.
http://imgur.com/G3yvRg2
http://imgur.com/Jqk2jwB
Does this happen only on one particular website, or some specific sites? I was thinking that maybe they used JS to like dynamically change the HTML (for whatever reason they would want).
Another cause might be some plugin that you installed in Chrome and that is working baddly / causing issues.
Also please post the encoding that the page(s) use (like UTF, ISO), that might help.
Except that, to really narrow it down to a Chrome problem, check in other browsers for the same issues.
It appears that the issue seems to be caused by 'text-rendering: optimizelegibility;'.
Mostly when used in conjunction with text-transform:uppercase;/text-transform:capitalize; , or letter-spacing.
It may also be an issue with opimizelegibility and Proxima Nova since I've never encountered this anywhere else.
After looking up the textrendering:opimizelegibilty; property more, I've released that it's an awful decision to use it more than sparingly due to performance issues (And this strange one..). From now on I'll only be using it in cases where the kerning looks particularly poor.
I have a big performance issue in IE6 even with javascript turned-off.
It's strange because sometimes when the page is loaded, the header is floated next to the footer, or slideshow is over the the content.
I wonder if someone had same or similiar issues in IE6 and if i minify a generated source code into a one-line, will it help somehow to gain loadspeed in that browser ?
-Want to mention that it should be compatible with ie6 so please, do not post a messages like - use modern browsers.
The problem was in MS png fixer inside css. Even if i turned off a javascript, it still works, so when i removed css lines with ms filter for png transparency, it starts working like it should.
Thanks for any submits.
I doubt that removing newlines would increase the speed in any noticeable fashion.
That is, the performance issues are likely not caused by line count but rather the size/number/type/cost of the elements/operations after the parsing.
The actual lexer that handles the newlines should see them no differently in the stream than any other character. Depending on exactly what context "source" means newlines have some effect semantically at the parser:
CSS: none (ignoring embedded newlines)
HTML: possible new text-nodes or different content
JavaScript: automatic semicolon insertion (or embedded newlines)
However, there is no reason not to try a minified version quickly to see if it makes a difference and, more importantly, to satisfy your curiosity ;-) I would definitely heed the other suggestions as well, such as checking the page (everything) for validity.
Happy coding.
You haven't specified what your page consists of, but my guess would be you're outputting the mother of all HTML tables?
The reason I guess that is because IE6 is known to be extremely slow when rendering large tables, particularly where the column widths are variable. (later IEs are also slow with this, but not as bad as IE6)
The reason is that the browser attempts to render the entire table before displaying anything, and performs a lot of calculations to work out how to render it.
The answers on this question may also help you: Are large html tables slow?
I want to print an HTML table.
Unfortunately, when I do, cells (rows) are often cut between two pages.
Also, browsers seem to trample over the page-break-inside property without any care, so that won't work.
The code in question:
<table>
<tr><td colspan="2">HEY YALL!</td></tr>
<tr><td>A!</td><td>B</td></tr>
</table>
Sorry -- I think there is no great way to go here -- the web still isn't made for printing.
One work-around for IE is to emulate version 8, so the page-break-inside: avoid will work. There's also a bit about windows and orphans settings. More here: http://msdn.microsoft.com/en-us/library/dd433064%28v=vs.85%29.aspx
You can also look for HTML+CSS - to - PDF conferters. I've seen a lot of different implementations of that sort of thing.
One thing I've done in the past also is to change the content-type to .doc and stream the HTML out to MS Word (because that's what my users have, and Word can read HTML now.). This works OK.
Generally, what's the best way to tackle a layout bug in IE6? What are the most common bugs or problems that one should look for when trying to figure out why your page suddenly looks like a monkey coded it?
First Things First
Get yourself the Internet Explorer Developer Toolbar. It's a life saver and works great with IE6 and/or IE7. It's no replacement for Web Developer Toolbar or Firebug for Firefox, but it's better than nothing.
Know Thy Enemy
Read up on the quirks of IE — particularly hasLayout and overflow and the like. There are also many CSS niceties that you'll have to either do without or find alternatives. Look into how many of the popular JavaScript toolkits/frameworks/libraries get around different issues.
Rome Wasn't Built in a Day
The more you have to work with it, the more you'll remember off hand and won't have to lookup as often. There's just no replacement for experience in this. As several have pointed out, though, there are great resources out there on the net. Position Is Everything is certainly up there.
http://www.positioniseverything.net/ will certainly address your problem.
It provides comprehensive and in-depth descriptions of browser bugs along with options to work around them. A must read, in my opinion,
One good way to start learning about how IE happens to be mangling the page is to turn on red borders on different elements with CSS (border: 1px solid red;). This will immediately tell you whether it's a margin problem or a padding problem, how wide the element really is, etc.
The box model is usually the culprit. Basically what this means is that any div you are trying to position and use unsupported CSS with will cause this problem.
You may find it happens if you are using min-{width,height} or max-{width,height}.
this provides a great reference for checking compadibility with different versions.
http://www.aptana.com/reference/html/api/CSS.index.html
Noticed that Marc's post is at a -2 =D. He's only saying "resort to tables" even though they blow, because in sucky browsers like IE6, some of the broken CSS commands work in tables only (who know's why... dam you Bill Gates!!!). Here's a good reference to see what works and doesn't work as far as CSS goes. http://www.quirksmode.org/css/contents.html . It's a great reference to check on what cool effects work/don't work with various, widely used browsers. Also, always have a go-to plan for users who browse with IE6 (even though it's just about as old as mechanical dirt) as many businesses still use older browsers (including non-profits/3rd world countries etc.) So by all means, create the bugged out drop-down menu that looks WAY better than a standard horizontal menu, but create a secondary one specifically for IE6 that becomes the default when the page receives a request from an IE6 browser.
how do you define layout bug? the most frustrating layout implementation (i don't know if this should be defined as bug) in IE is we need to always specify style="display:inline" in the HTML <form> tag so that a blank line won't appear to disturb the form layout.
This question I believe has far too much scope.
Validate your code, and if pain persists, well, good luck.
The only real solutions, as with any other ballpark bug type are to google for a solution, or ask somebody who knows, ( ie: give the exact problem to us here at stackoverflow ).
You can use the IE Dev toolbar to glean an Idea, but many of the bugs are random, inexplicable, and esoteric. IE: the guillotine bug, the random item duplication bug, etc etc, the list goes on, and you can spend hours literally goofing with stupid variables everywhere and achieve nothing.
I have a simple strategy that works every time.
First, I develop the site using commonly accepted CSS to look good in Safari and Firefox 3. See w3schools.com for details on browser support.
Then, I go into IE6 and IE7 and alter the CSS using conditional includes.
This is hack free and lets you handle different browsers (IE6 and IE7 have separate issues).
Most of the issues you'll find come from unsupported features in IE (like min-width), errors in the box model (IE adds unseen extra padding (3px) to some boxes), or positioning issues. Go for those first as they are often the issue.
A common problem is padding not getting added to the width of a block element. So for layout div's, avoid using padding and instead use elements within them to define the padding.
I use Rafel Lima's Browser Selector when I need to tweak differences between IE/Standards browsers. It greatly reduces using "hacks" in your HTML to solve common problems.
You can target CSS statements for different browsers, or even different versions of browsers (Hello IE 6). It's very simple to implement, but requires the user has JavaScript turned on (most do).
.thing { ....}
.ie .thing { ....}
.ie6 .thing { ....}
We had a floating div issue that was only evident in a particular version of IE6. It was fixed by downloading the latest service pack.
In theory, use CSS compatible with IE6 layout bugs, utilise only well known workarounds (css and html filters) and code for them in a way that wont break forward compatibility, test for quirks/strict mode.
In reality, resort to tables.