Please have a look at the following Kendo UI Dojo
http://dojo.telerik.com/#geeforceone/IkiCO
It renders the following html in Firefox. "right" should be also placed in the header, but it's not. It works fine in IE11 and Chrome.
What I'm doing wrong?
It's because you're telling the object to flow right, but your 'left' is not floating. Because of this the box seems to break. If you add a float:left; to the 'left' div it will result in the proper position of the div
http://dojo.telerik.com/ImUsA
Related
Im using fullpage.js plugin for my project.it works fine in all other browsers when it comes to ie it shows a horizontal scrollbar.
Looks like something inside your container class element in the 1st section is causing the problem.
It seems your element with the class home-banner-midle is the cause of it. Probably because of left:50% and width:100% being absoluted positioned.
Have hit a problem I've never encounted before.
I have a element, its a panel that is fixed to the right side of the screen, and the css for the positioning is:
.myPanel{
position:absolute;
left:0;
}
This works fine, the mark up for the panel is generated by vaadin.
Now everything works fine, however every now and then when I refresh the page the css position:absolute
is being ignored.
Naturally I open my devtools and see that according to the styles tab position:absolute IS being applied, it just doesnt look like it.
Now the odd bit
When I uncheck the tick box to remove the position:absolute styling nothing changes (as I'd expect) but when I re-check it, and the position:absolute is reapplied, the panel then shows correctly.
So even though there is no new css, removing then re-adding position:absolute fixes it.
I've always been under the impression that dynamically added elements will still take css styles that have been loaded pior. Is that incorrect?
I have ONLY had this in chrome, currently version 39
Any ideas?
UPDATE:
if at some point the css was being overridden I'd expect dev tools to flag that (style with a strikethrough etc) but its not. I have tried adding !important to it but get the exact same result (see is applied in devtool, disable and reenable fixes it).
I've noticed in the dom that vaadin is loading my custom javascript in the head, then the css, then its own inbuilt javascript.
This seems to be working according to the spec. If width and height
for a replaced element (which input is one) is auto, it's supposed to
use the elements intrinsic width and height, which might cause
absolute positioning to be overconstrained.
One fix is to wrap your inputs in a div, absolutely position that, and
use width/height 100% on the inputs. Note that Firefox also has this
behavior, and it is indeed in the spec, so it's better to fix the
website than to change Chromium.
~#9 chromo...#gmail.com
As per you saying:
I've noticed in the dom that vaadin is loading my custom javascript in
the head, then the css, then its own inbuilt javascript.
I would say this would be the case for all browsers. For more info, see a previous answer of mine in relation to this
Its a known bug which looks te be solved and the appears again, see also https://code.google.com/p/chromium/issues/detail?id=313221
I'm having some trouble with CSS in Firefox.
Here his the fiddle: http://jsfiddle.net/6Fq4z/2/
The div with .item-container class should fill vertically it's parent (td). It does in chome and IE. But not in Firefox.
But there is a strange behavior. Step to reproduce:
Open the fiddle in firefox
Inspect element and select the div with the class .item-container
change the display property to inline-table and press enter (it does not solve the problem)
then change another time this property back to inline-block and press enter. It now shows up as it should...
Can anyone explain me why this happen and if possible, how can I solve it?
It'l be better to use Firebug. After install right click on tag you want and in css section change values. With firebug you can run custom JS in your page.
Playing a bit with the height properties I came to the point that the problem might be with the height being assigned using percentiles and considering you are using table it might be some kind of a bug with rendering in Firefox (I tested on 31 and 29 versions both).
I fixed some heights properties using pixels and forked the fiddle that might help you further
A possible workaround
http://jsfiddle.net/6Fq4z/3/
I'm not sure if this is a bug in Google Chrome or if this is wanted, but it really annoys me: If I got something like
<body><div style="margin-bottom: 50px;">much content</div></body>
there is no margin shown by Chrome. The div just ends at the bottom browser edge. Literally, any other browser renders this correctly.
Wrap your whole site (or just the area that has the margin you want to capture) in a
<div style="overflow:auto;"></div>
If setting padding does not appeal to you, try the above. I didn't want to set padding, because a margin on the bottom of boxes is my standard way of making room for the next box when data is dynamic and I don't know whether there will be one.
Margins will not "bleed through" a box with overflow specified, so this fixes the problem in Chrome by allowing that last box to have margin inside the new overflow:auto div.
This change is inconsequential to the other browsers who were blocking that margin bleed anyway. I tested in IE 8 and up for regressions on that side and found none.
add a padding-bottom to the element containing your div, even if it's the body element.
This works in all browsers, so you will have to remove the bottom margin from the div.
On Google Chrome {padding-bottom: XXpx;} doesn't work, but {padding-bottom: XXem;} does.
Note the first uses pixels and second ems.
The css padding and margin directives work fine in IE, but not in Chrome. Chrome just ignores them, if they are placed in a .css file. To resolve this problem, put all the padding and margin instructions in a separate file within the <STYLE> tags, and then include it with the help of <?php include ('margins.php');?>. or <!--#include virtual="margins.php"--> into all of your pages, because these directives works in Chrome perfectly if they contained on the page.
I'm having problems in ie7 with notification's that are styled using the p tag. I've used them before and they render fine in IE7, however, in my latest theme, they cut off the top border with no change to the code which is giving me a major headache trying to figure out.
Here's the problematic page, the notifications are at the bottom of the page.
Link
It's annoying because I've used the exact same html and css here in this theme
Link
Can anyone see what the problem with the buggy version is?
You have triggered some bug in IE7, but I'm not sure which one...
The difference between the pages is that you have specified a width for the notification elements in the page that works. If you specify a width for the elements in the other page, they work too.
Forcing layout seems to do the trick. You can read more here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding this:
<style>
.notification { zoom:1; }
</style>