I've got an IE7 issue i need some help with. I'm loading in a table of data via ajax and php. Works fine everywhere except IE7 (doi).
The problem is that there isn't a vertical scrollbar after it loads several hundred records.
I've checked into the position and overflow bugs (like here: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/) but have still had no luck as of yet.
The arrow keys don't work, either. Only way to see what's below the fold of the browser window is to click and drag.
Any help is appreciated.
=================
UPDATE:
Wanted to include some images of what's going on. Can't give access to the page/files, has sensitive information. Hopefully this can help a bit, though.
Before:
After:
The code for the table goes something like this:
<div class="row hide" id="spend-table" style="display: block;"><table border="0" cellpadding="4" cellspacing="0" id="spend">
<thead>
<tr>
<th style="display: none;">Id</th><th>Name</th><th>City</th><th>State</th><th>Vendor</th><th>Catalog#</th><th>Fac#</th><th>Desc</th><th>Quantity</th><th>UOM</th><th>Total</th><th>Highest</th><th>Lowest</th></tr>
</thead>
<tbody>
<tr>
<td style="display: none;">35816</td><td>Boblawblaw</td><td>Law BLog</td><td>KY</td><td>The Avengers</td><td>DE878Z</td><td>12091</td><td>Canned Butterscotch</td><td>1</td><td>YR</td><td>$127.13</td><td>$127.13</td><td>$127.13</td><td style="display: none;">2</td></tr>
</tbody>
</table></div>
The table's parent div is hidden initially, but after the search is performed (via AJAX & Codeigniter) the results are kicked back from CI using the Table class to populate the div with the new info (table).
Just to be clear: all the records show up as they ought. You can click and drag to see everything. It's simply an issue of scroll/overflow/etc. getting overlooked in IE7.
Thanks!
===================
Another update:
The table, the table's containing div, and that div's containing div all have heights of 800+. The body, however, is stuck at 348px. Have zoom, position, and overflow attributes set. Out of ideas :\
#mikedidthis helped out big time in the chat room.
i had added too many overflows throughout. removed it from the body by changing to overflow: auto !important; and removed from the .container
the overflow bug fix ended up becoming the bug itself :p thanks for all the help and commentary.
best,
Related
I have a layout issue that I'm trying to solve that involves sortable columns. When a user is on a low resolution screen, or resizes their browser, the sorting icons dont line up with each other anymore. Users have complained many times about this.
In the following screengrab I'd like the sorting icons to line up with the green line rather than the way they are now (red line)
Here'e the jsfiddle snippet that renders the above table: http://jsfiddle.net/JgSMq/
<table class="table table-bordered data-table sort display">
<thead>
<th class="sorting">ID Column <i class="sort-icon"></i></th>
<thead>
</table>
To patch the issue, you can move the <i> tags to before the actual text in <th>. That should improve your alignment issues by a lot.
To completely fix it though, you may need to set the vertical-align:top; on those <th>.
Here is an example.
Well maybe you can try something like:
th {
white-space: nowrap;
}
Here is your fiddle updated: http://jsfiddle.net/JgSMq/1/
Not a Drupal question, but probably a CSS/HTML question:
I have written a module for Drupal 7 with Bartik theme, which displays a button "Show". When clicked it will fetch JSON data from a PHP script and generate a HTML table as string and finally display that table inside (or instead?) of a <div id="top"></div>
This whole complex stuff (at least for me) works surprisingly fine:
However I have this minor cosmetic problem: I can not get rid of the fine white line between the tabel cells.
I've added <table border="0" cellspacing="0" inline - this doesn't help.
I've added an id to the table <table id="last" and CSS-code:
#last {
border:0;
cell-spacing:0;
}
but this doesn't work either.
When I inspect in Mozilla Firebug or Chrome dev. console - those attributes are there.
Also, I have a non-Drupal page too - it doesn't show those ugly lines.
Any ideas please?
I've read, there are CSS stylesheets, which supposedly reset everything, but they are probably overkill for my problem.
My jsFiddle code works too, but doesn't have the ugly white lines...
I'm not posting the URLs of the above mentioned pages, because they both are in Russian and require registration.
There does not seem to be any code or URL that actually demonstrates the problem, but you could use the brute-force method of adding the following into the stylesheet:
td { border: none !important; }
It sounds like the problem is caused by some CSS code setting a border on the cells, overriding whatever you might set at the table level.
If this does not help, we at least know that the problem is caused by something else than the table and cell elements (perhaps some elements inside the cells?).
It it does help, inspect the td cells to see what is now causing the borders, and write a stylesheet that is sufficient to override that (or edit the settings that cause the borders).
Try giving this:
table {border-collapse: separate;}
Edit 2:
Problem seemed to reside on "bigTable" elements th rules. Apparently th's were inheriting wrong min-width's when used on layout-template. I'm still investigating this.
Still, I'm going to give one more try for divs. One big problem was using fixed nav and dynamic content, but I already found Holy Grail -solution for this (http://alistapart.com/article/holygrail).
Thanks for suggestions & all the lovely trolololo.
Edit:
I replicated this problem to http://jsbin.com/eyitij/4/edit
I have a strange problem with table + td width. I have code similar to this:
<table class="mainLayout" style="width: 100%;">
<tr>
<td style="width: 250px;">
<div id="leftNavigationPanel"> * content * </div>
</td>
<td id="panelCell">
<div class="panel">
<table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table>
</div>
</td>
<tr>
</table>
When I run this code on browsers, mainLayout is getting overflowed, so it becomes 3600px, and this happens because of big table inside Panel.
Big table I'm referring to can be contained within screen. When done so, it gets horizontal scrollbar (which is what I want). This works if big-table is loaded in separate html-file with rule "width: 100%".
After adding mainLayout a rule "display: block;", mainLayout table is rendered ~1800px and is contained within screen, but problem is that "panelCell"-TD is still ~3400px wide, so I'm still having whole page scrolling... TD isn't contained within table, but always expands to 250px + bigTable.width() !?
Basically browser doesn't know how to calculate "panelCell" to fill only : window.width - leftNavigationPanel.
Any ideas how to make right rules without using javascript + precalculated max-width rule for "panelCell"?
panelCell must be contained within window
bigTable must be contained within panelCell, with scrollbar
Setting table-layout:fixed fixes a lot of weird problems with tables :
<table style="table-layout:fixed;">
<col style="width:250px"/>
<col/>
<tr>
...
I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.
I've checked the created code in Firebug and can't see what's going wrong.
Here's a link to the site so you can see: http://www.swiftfurniture.com/
As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.
I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.
I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.
I've looked into your problem a bit with Firebug and can share some observations that might be helpful.
There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.
That is what is causing the scrollbars.
You can add to the "fb-like" attribute data-width="100px"
The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.
You can resolve this issue by placing the fb-root div as the first child of your body element
<body>
<div id="fb-root"></div>
The script tag and fb-like div can remain in their original place.
Ref: Facebook documentation and bug report
I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.
Good Luck, hope that helps.
There is a DIV just after
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">
Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying
Given URL is not permitted by the application configuration.
so either just remove this DIV or apply
display:none; to get this working perfectly
See this screenshot
having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted
content in circle.
applying display none; to this div or by removing this div
completely from the code, will lead you to the solution
None of the answers here worked for me so I tried it myself. I found a solution:
Put following CSS in your site head:
#fb-like-wrapper iframe {
width:100px!important
}
Put following HTML where you want to show your like button:
<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>
There you go :)
Add this to your css
.fb-like{height:20px}
Add attributes data-width and data-height to
<div class="fb-like" data-width="124px" data-height="20px"></div>
This also prevents the vertical scrollbar from appearing if it is not needed.
I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it's basically where the four corners have a td and and img (its a rounded corner form) .. if I remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr
I need to remove the the whitespace between the img and the TD, is there a better work around, as I have lots and not only that if I reformat the document the problem returns..
Here is a simple example..
<table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
style="margin: 0px; padding: 0px">
<tr>
<td width="12" align="left" valign="top">
<img src="content/images/corner_left.gif" width="12" height="12" />
</td>
as you can see there is white space between img and td... and I remove it so it looks like this:
<img src="content/images/corner_left.gif" width="12" height="12" /></td>
the problem is gone, (notice the td and image are right next to each other)
Any ideas, I tried setting all sorts of css, padding 0px, margins 0px etc ...
Any ideas really appreciated.
As it turns out, removing the whitespace is NOT the only way to fix it. Everyone else has probably figured this out by now, but I figured I'd add it here for completeness for the next poor soul that stumbles across this annoying problem.
Basically, you don't have to worry about the whitespace in your markup. Instead, add style="display:block;" to the img tag. Since images are inline elements, and you have whitespace in your markup, IE adds the extra whitespace to the bottom of the cell to account for the possibility of text with decenders (e.g. g, y, p, etc.). Setting the img tag to display as a block element takes care of this. No more ugly whitespace!
Credit goes to this guy: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, which is where I found the answer. Guess he got it from a google discussion group or other.
Hope that helps!
The only way to "fix it" (and I use that term loosely) is to remove the whitespace.
More importantly, you should stop making websites like it's 2001. :)
I've fixed adding this before the end of table:
<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>
Hope this help.
This drove me nuts for a while - moving from IE 8.0 to IE 9.0 on intranet sites - all images suddenly had a bit of white space beneath them.
Setting display:block on the images did it for me.
I tried all solutions above:
a) tried the display:block
b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )
c) I tried using:
padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;
Solution a) worked. Solutions b) and c) did not work on IE.
But the BEST SOLUTION I found is this:
Add a hspace=0 attribute to the Image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />
This does the trick.
IE finds that there is text content inside the TD (other than the image), so it gives it its text line-height. Try setting a height and overflow: hidden for the TDs.
It's been this way for as far back as I can remember, all versions.
For myself, I've never found another way than putting the image and td on the same line, but I've never really looked - there may be a way that I've missed. Guess I just got in the habit of streamlining them.
Other (and the best :) ) solution is:
set the td width/height to the image width/height with css
set image to the background for td
Like:
<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>
It works form me :)
(sorry for my english :"> )
Another late response, but you could also use line-height: 0; to remove the whitespace.
To ensure that text will still be readable you could wrap it in another element and use line-height: normal or another value of your choice.
td * { line-height: normal; }
I had this issue too with an intranet site on Internet Explorer, so I turned off the compatibility view mode for intranet sites to fix it: