I am having an issue with long table in IE based browser.
Basically I have table with large number of columns, so it is scroll-able in X-Direction which is fine. But when I scrolls table horizontally in IE 10, some random vertical bars appears on table as shown in image.(In the region that becomes visible by scrolling). Please observe the position on scrollbar.
When I click on any column, it disappears and renders fine. I think think it is some browser related issue., as it works perfectly in all other browser.
But is there any method I can solve this?
I am using Twitter's Bootstrap.
Here is the CSS code for table:
table.query_result_table {
width: 2500px;
max-width: none;
cursor: pointer;
}
Note: I am using datatables plugin for this table.
This answer refers to webkit based browsers, but maybe it will work in IE as well.
Try capturing the scrolling event, and after it ends, scroll down 1px and back up 1px.
Related
I have a relatively easy issue that I need fixed mainly because I haven't come across it before and don't know how to go about fixing the issue.
Near the bottom of the page there are four images grouped together under the title "Photo Gallery". In Firefox and Google Chrome, the photo gallery is displayed correctly, with the correct formatting being the images side-by-side rather than the incorrect style of stacked images. Thanks!
Below is the code for the individual image fields (with the only difference being .odd rather than .even
.field.field-name-field-photo-gallery.field-type-image.field-label-above .field-items .field-item.even {
width: auto;
display: inline;
margin-top: 0px;
top: 0;
(Incorrect Image Gallery)
(Correct Image Gallery)
For something like this it would be worth considering using a grid system,
Susy is my preferred option, its inclusion in a project would result in code like
Assuming the design is 12 col,
#include span(3 of 9);
On your images (Selectors way too long too) would achieve with margin the design you are after.
Susy outputs floats by default, so if you did want to do it manually, do some simple math to work out % widths and apply floats. Works in all browsers and doesn't give the weird 3px extra that inline elements get.
I've got two inputs, styled primarily by Zurb's Foundation framework. They're in a .row.collapse and each in a .medium-6.columns (these columns are 50% width, floated left, no margins). The inputs themselves are 100% wide within their containers. It's all pretty simple, and the Inspector and jQuery.css are all returning what I'd expect them to. But there's a border issue. Here's the gist of the CSS:
input {
border: 1px solid #dddddd;
&.first {
border-right-width: 0;
}
}
This is to have the effect of collapsing the middle border. But for some reason, this border-right-width: 0 is throwing Webkit (Chrome and Safari but not Firefox) off. The inspector shows 1px border, and the proper border-color. The white input background lines up properly with the second input (that is, there's room for the border), but there's no gray border. Maybe it's rendering transparent?
If I open this up on a retina display, it renders normally - proper borders on both. If I zoom in, the borders show up when it hits the "small" media query (mobile device sizes). But I can't make this border show up on a non-retina, desktop display in Chrome.
Here's how it looks in Chrome:
And here's how it looks in Firefox:
To double-check, I used the Web Inspector to apply a simple border to the first element. It showed up fine (looked like the Firefox screenshot). Adding border-right-width: 0 reintroduced the problem. It seems clear that that's the issue. But I don't know why?
It seems like border-radius may play into this as well? The Firefox screenshot above shows a double-border in the middle, despite the Inspector showing 0 right border. If I uncheck border-radius, in Firefox, it fixes that issue.
These properties should all be independent of one another. Why are they affecting each other?
Edit
Trying to recreate in codepen. Unsuccessful so far, but it looks like it has something to do with transform - these inputs are in a container that is set with the following
position: absolute;
top: 50%;
left: 50%;
#include transform(translate(-50%,-50%));
This has the effect of vertically and horizontally centering the element no matter the width or height in modern browsers. When I turn off transform the border shows up as it should. As I understand, transform accesses the GPU? Or it can? It seems quite possible that this is what's throwing it off. If you look at the screenshot, there are strange border artifacts (like, a partial, interior border on the right side of the left element) that I can't explain.
Edit 2
It's got to be transform - changing the border-color to red makes this clear: the border is being rendered at a sub-pixel level and then, for some reason, cut off in a funky way. You can see a vague pink border around the left input:
This may or may not help and without the fiddle, it's difficult to recreate; but I wanted to share something I've recently encountered with webkit browsers and Foundation.
By default, Foundation attaches a right float on the last column in each row or horizontal block...
foundation.css
[class*="column"] + [class*="column"]:last-child {
float: right; }
99% of the time this is never an issue, unless you have a very small border between columns. Webkit browsers calculate percentages strangely at times.
You mentioned your columns were floated left, but just in case this is still an issue; overriding the above pseudo class to float the last-child column left may help.
I'm trying to create a site which uses laterally-stacked "blades" of content. The element containing them is moved laterally inside a div with overflow-x: hidden to create the desired sidescrolling effect. This seems to be working fine: The element containing the "blades" is set to display: table; width: 100%; table-layout: fixed and each blade is styled as follows: display: table-cell; width: 601px; border-right: 1px solid white; padding: 10px. Finally, the nav element has width 621px, with no horizontal padding or margins.
It all seems simple enough, but I'm getting a very odd cross-browser bug: Firefox and IE9 agree on how the page looks, but Chrome has a different opinion. I've figured out what Chrome is doing, but I haven't been able to figure out why it's doing it.
The doctype's set and everything else seems to be working fine. Except for background-colors, the rules above are all I've defined in the stylesheet, and there are no inline styles. Here are some screenshots which illustrate the problem behavior.
Here's the page in Firefox - as desired, the right edge of the navigation bar aligns with the right edge of the content box.
Same in IE9.
In Chrome, the padding is subtracted from the width, creating the overhang shown above. I never set border-box anywhere in the stylesheet, nor do I see it in the computed rules in Chrome - it just says that the width is 581px, whereas it's 601px in the other two browsers.
[Note: I saw that there were other posts on padding issues, but none where Firefox and IE9 agreed and Chrome did something different.]
Edit Here's a JSFiddle link: http://jsfiddle.net/aCeAw/
This is just a bug in Chrome. When it computes column widths for table-layout: fixed, it incorrectly ignores cell padding. See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=652941 complete with spec quotes, and the almost-5-year-old WebKit bug report at https://bugs.webkit.org/show_bug.cgi?id=13339.
You may be able to work around this by using width styles on display: table-column elements, as discussed in the Mozilla bug report above. Alternately, you could add a first row with 0 height and no paddings, but the cell widths you want... I realize both of those mess with the actual site markup, which may not be an option in your case, of course.
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.
I've designed a fixed-width page which renders equally in Chromium, Firefox, Safari, but has a small issue in (from what I can tell) ALL flavours of IE. I've added some conditional styles for IE, which make things a bit better, but it's still off (by only a couple of pixels).
The site in question is here: http://www.brushesfacepainting.co.uk/brushes/home
IE and Chromium rendering side by side is shown here: http://www.brushesfacepainting.co.uk/images/renderissue.jpg
I added conditional styles for IE to fix the width of all the elements, prior to this, the banner style was much narrower than the body.
I assume I'm hitting up against an IE bug, but I can't figure out which one! Can anyone help please?
Thanks,
Lee
Your mainbodyie rule has a width that is different than the width in your standard css. (851px vs 848px). Fix that to match your other wrappers.
Also your page is not centered in IE - I suggest you wrap whole page in a fixed width wrapper with margin:0 auto to center whole page - so you don't keep repeating the width multiple times in your css for each layout element.
/* ONLY FOR IE */
DIV.mainbodyie{
width: 848px;
}
DIV.mainbody{
padding-right: 0;
}
Use a div structure for enclosing all content like header,middle,footer inside it.Add following code for this div:
.test{
overflow:auto;
margin: 0 auto;
}