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/
Related
We are using the latest Chrome, and Windows 10,
69.0.3497.100 (Official Build) (32-bit)
On some monitors, there is a Select/Dropdown control that is missing borders. Sometimes it's the right one; then when I play with width (make it px rather than percent, add more width) it becomes the bottom one.
But on other monitors, this Select/Dropdown is always fine. It always has all the borders. There is never any problem.
All the monitors are Resolution 1920 x 1200 (Recommended in Windows 10), both the ones that have and don't have this problem. Tested with different zooms - 100%, 80%, 120%. Either some users have this problem (always), or they don't (ever), all with the same browser, at any zoom level.
There is no special CSS styling on the control. In fact, even if I were to add a border: 1px solid it wouldn't affect the system choice area. It would only affect the top-level box.
The closest I could find was that there was a bug in Chrome a long time ago, like 2012, but it's long been fixed, so we can't use this info.
Chrome isn't displaying borders (sometimes)
Any thoughts?
Adding another wrapper div helped me to solve this issue.
<div class="dropdown-menu-container">
<div class="dropdown-menu">
// items
</div>
</div>
I added border to dropdown-menu-container and added overflow-y: auto property to dropdown-menu class.
This solved my issue. Hope this helps.
Check to see if a parent div of the drop-down control lacks an "overflow:visible" CSS attribute.
Per you image examples, constraints of the parent div appear to be cutting off the drop-down when displayed.
Also, consider using Chrome's Inspect function to analyze this issue.
In Chrome, right-click on the drop-down, then select Inspect. You can also make CSS updates specific to your browser with Inspect to see how this changes the appearance. Once it looks good, you can go back and update the applicable files accordingly.
I know it's late, but I've just recently encountered this bug, and was able to fix it by adjusting the font-size of <option> elements. Try fiddling around the font-size until you can no longer see the issue, this is how I fixed it.
Apparently the issue occurs while trying to set padding or width on the select element.
adjust
#dropdown { overflow-y:auto;}
I’ve got a flexbox problem that occurs in Safari and Opera (probably Chrome also, haven’t checked). In Firefox everything looks as it’s supposed to. Here is the link: http://corvinweber.de/download/v5/
When you scroll down to the bottom of the page you’ll find the reply form. I want the fieldsets “.message” and “.senderforms” to be displayed next to each other, just like Firefox does it. However in Safari and Opera “.message” expands in width and “.senderform” gets pushed to the next line. Strangely, if I set the width of “.message” to 50 px “.senderforms” still gets pushed to the next line. The developer tool indicates that there’s a margin added to the right, although “margin-right” is set to 0.
I have also tried to use the -webkit-prefixed version of flexbox, but it didn’t help.
It’s probably just a small adjustment in the css, to make it work, but I can’t figure it out. Can someone help, please?
Obviously the fieldset nested in another fieldset was the problem. I turned the outer one into a form and it worked.
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
So I am trying to make four columns with the same height. There should be some padding and visually they should look with the same height.
Experimenting different solutions I've found something strange happening when one of the div's has "height: 1;". Since this isn't valid css, to my knowledge, the default value of 'auto' should be given to the div. But it doesn't display the same with value 'auto'.
Since I didn't get "height: 1" to work in jsFiddle, here is JsBin link: JsBin.
I've come here to get information on two things:
Why does "height:1;" make it work on Chrome and IE latest versions. What is happening?
What would be a possible valid html/css solution to get a result like this:
If somehow I could get the inner div inside the "display: table-cell" to be with height: 100% then the problem would probably be solved.
It works because the page has no <!DOCTYPE html>. Chrome and IE are entering quirks mode, where height:1 is valid CSS (for height:1px) and this somehow fixes your layout in quirks mode.
Solution: Add <!DOCTYPE html> to the start of your file, and go from there.
The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.
I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.
These two images show the error and what its supposed to look like:
http://tinyurl.com/layout-error
http://tinyurl.com/layout-fixed
The page referred to is here: http://tinyurl.com/yb9h34d
Edit: Clear: both; doesnt seem to do anything to solve the problem.
Yes... it looks like a float-caused problem.
Try adding this line into your HTML, just before the footer:
<div style="clear: both;"></div>
I think it is expecting an item that clears the floats.
Try floating the div.container or remove it, as it is useless and a mild case of divitis.
In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:
clear: both;
This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.
Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp
What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.
I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).
Why does DIV#footer have display:none on it?
Anyway, if you float: left on .footerWithRightAndLeft you should be ok.
You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.