So this is about AngularJs and the uib datepicker.
This bug doesn't appear in Chrome and Firefox. But only in IE (tested in IE11).
The calendar is in a div that has width: 100%;.
When I go to the view with the calendar, it covers 100% of the div.
But as soon as I click on a date, it becomes half in width.
I tried to add the !important directive, but didn't make any difference.
Unfortunately I cannot access developer tools (security reasons at the office) so I cannot see what is happening. But it looks like the div and its width shrinks to the half.
Anybody recognizes this bug?
It turns out the problem was caused by the css directive table-layout: fixed;
Changed it to table-layout: auto; solved the problem.
Related
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
I have researched this and found some IE CSS bugs, but none of the known fixes seem to cover this scenario.
This site went live today and the issue that was found is that the logo does not display in SOME versions of IE8. If the person resets IE to factory settings it works, but otherwise the logo is invisible.
Site can be seen here: http://www.ethicsgame.com/exec/site/index.html
CSS to display the logo is
h1 a {
background:url(images/logosmall.gif) no-repeat left center;
padding-left:325px;
text-decoration:none;
color:#1f396d;
position:relative;
top:45px;
left:15px;
width: 325px;
}
it seems to be working fine on my IE8, have your tried adding display: inline-block to its css? Also, for good measure you could throw a inside the a tag.
so you get:
<h1> </h1>
just so it has content...
good luck -ck
Looks like a difference in spacing with IE8 vs Chrome. Check it out in the fiddle: http://jsfiddle.net/5Vt3f/.
Basically your image is probably displaying, just too far to the left that it's not visible.
Also, you have "left" and "center" on the image. This is conflicting. It's either left or center.
Mary,
This has to do with the fact that A tags are inline elements. in IE < 8, the height/width of the element isn't getting rendered--so it's collapsing and becoming invisible. Adding display: block; into your CSS declaration for this element will fix this in IE < 8. You'll want to apply this same principle to other inline elements that you're trying to get to behave more like block-level elements (setting width/height/margin/padding is usually a good hint on this behavior).
If you don't need to support IE 5.5 (which most people don't nowadays), you can also use display: inline-block; (keep in mind that IE 6-7 only support inline-block on elements that are natually inline elements, such as A, SPAN, STRONG, EM, etc.). You can find much helpful compatibility information here:
http://quirksmode.org/css/display.html
You'll probbaly also notice that once you change that display type, the padding which isn't being rendered will be--so you might need to change that markup a bit to compensate.
Using the Developer Toolbar in IE is a great way to test old versions, as well as test these solutions in the older versions.
It works perfectly alright on IE8 but if does not show earlier versions of IE then replace center with left in background attribute.
background:url(images/logosmall.gif) no-repeat center left;
ie8 doesn't support background image position, in your case "left center". If you remove "center left" it should work. You might be able to specify background image position if you specify !DOCTYPE
i am not able to set the height of the Div of this theme to 156px;
Its inheriting css property from some place else and making it 118px
Please the following website in Chrome and firefox you will see the difference
http://jssamch.com/
It's coming from 1-default.css, line 19.
Remove the height: 118px property.
You should really be using Firebug (for Firefox) or Developer Tools (for Chrome) to figure out this sort of issue on your own.
Because a customer requested it, I've changed a div to
position: absolute;
top: 5px;
bottom: 5px;
overflow: auto;
min-width: 945px;
which basically works fine in all supported browsers (IE7, IE8, Firefox 3+): It makes the div fill out the available area vertically, and show a vertical scrollbar if it doesn't fit. Note that without the min-width of 945px, the scrollbar would overlay a part of the content, since the content is not resized properly when the scrollbar is added in all Internet Explorer versions. With the min-width, it happens to fit, and other browsers don't care.
However, on IE7, if a vertical scrollbar is displayed and then the browser window is extended vertically so that the scrollbar is no longer needed, IE7 removes the scrollbar, but leaves a blank rectangle where the scrollbar was, i.e. the div content is not extended to the former scrollbar area. When reloading the page in the same window, it's fine. IE8 does not show this problem in standards mode.
How can I solve this?
it sounds to me like there is a bug in ie7 or your ie7 specifically. as for your code, its fine, although a little odd, do you want the div to horizontally scroll?
This is still an observed issue in IE7 and below (and of course, IE8 Compatibility View and the related modes).
After doing research, I think it's an oversight. In IE7 and below, overflow:auto always showed scrollbars, disabling them if they're not needed (for elements that "usually" have scrollbars). It appears that this behavior lead overflow:auto elements to not recalculate their width after scrollbars disappear (as they were never intended to disappear).
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?