Here is the jsFiddle:
http://jsfiddle.net/8dbQu/1/
In brief, I have such structure:
<div class='content'>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
</div>
.content is display as box
.columns have -moz-box-flex: 1;
without set .content's position to absolute everything works fine.
But when I do so, it seems the "box" style doesn't work any more...
How to fix it?
display: -moz-box triggers a XUL box (which is NOT the same thing as display: box (which simply doesn't exist) or display: flexbox (which does something completely different)). XUL boxes cannot be absolutely positioned; if you try to position one its display value will be forced to block, just like a box with display: inline would be forced to block if positioned.
The way to 'fix' it is to not use XUL boxes in web code, especially not if you expect them to behave like CSS flexboxes. Support for CSS flexbox (with display: flexbox) is coming to browsers in the near future.
Related
I have two boxes. The first one contains simple text. The second one contains a submit input with no borders, paddings, margins.
So, why the input takes more height than the simple text?
I know that I can play with the padding and remove the box height, but for my purposes I need to set it a static height, and prepare this box to be reusable for both inputs and simple texts.
I have tried to play with line-height and vertical-align properties, without success.
What is causing that extra line-height?
There's an example to play with it.
Edit: I recently see, that the issue is only with Firefox...
I think it could be for the line-height property in the Firefox CSS:
But... in first place I can't believe what my eyes are seeing. An !important in the internal browser stylesheet? That's normal? Could this be a possible answer?
Similar question with the same answer.
But the trick Leniel suggest doesn't work for me...
The extra padding is on your .buttonarrownext class.
Fixed CSS Class:
.buttonarrownext {
cursor:pointer;
position:relative;
border-radius:4px;
text-align:center;
background:white;
border:1px solid red;
padding: 0px; /* changed the padding here */
margin:0px auto;
display:inline-block;
}
A JSFiddle to demonstrate.
As mentioned in my comment, it displays fine in IE and Chrome, but not FF. A quick solution is to replace the input with a button.
updated html would be:
<div class="container">
<div class="buttonarrownext">Siguiente</div>
<div class="buttonarrownext"><button class="reset">Siguiente</button></div>
</div>
There's no real difference as you can still fire a submit event with a click handler for the button...
It will be interesting to find out why FireFox does this though...
Updated fiddle - http://jsfiddle.net/QfPGW/2/
I've implemented an Iframe Like box, but the vertical scroll bar does not show. (The generated code set scrolling to no, but I've now changed it to yes, but still it does not work).
The code is as follows:
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FChristopher-Carter-Veterinary-Surgery%2F332086710515idth=300&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="Yes" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowtransparency="true"></iframe>
The problem occurs with I/E but not with Safari, Firefox, Netscape or Chrome. It seems as if this is a Windows XP / IE8 issue, but if anybody knows differently, I'd be pleased to hear from them.
You have overridden the scrollbars in the style clause;
overflow: hidden;
However, it has the opposite effect, IE will correctly render as-is, but firefox etc will not render the scrollbars. Fix that with;
overflow-y: scroll;
Having style overflow:hidden; seems to me like a contradiction to scrolling=Yes.
At the risk of stating the obvious:
Have you tried:
overflow:scroll
I have a div element which acts as a global contianer for my webpage, I also have a div element inside this which I use as a curtain i.e. when it is activated it covers the whole page in a dark semi transparent layer (just like a lightbox) so the page is essentially deactivated and a warning dialog or picture box, etc, etc can be displayed on top.
I can achieve this efect and functionality easily with javascript but I wanted to know whether it could be achieved purely with css animations?
<div id='globalCon'>
<div id='curtain' class='enabled'></div>
<div id='contentA'></div>
<div id='contentB'></div>
...
</div>
so when curtain is not active it should have opacity 0 and prefferably be display:none; to keep it out of the way. Then when it is activated it should have display:block and opacity animate to 0.8. Then when it is deactivated, opacity should animate back to 0 and then it should be set back to display:none;
Like I say, I can do this easily with javascript, I just want to know if and how it can be done with css only?
You can use:
animation-fill-mode: none/backwards/forwards/both;
The ‘animation-fill-mode’ property defines what values are applied by
the animation outside the time it is executing
From the Spec.
Please check this:
http://users.telenet.be/prullen/grid.html
This has a normal speed in safari, but the zoom effect is really slow in firefox.
Interestingly, if I add:
.item {
width:100px;
height:100px;
}
it seems to speed up a little (still not completely fluent). But that is not the size my images are at, so it looks messed up:
http://users.telenet.be/prullen/grid2.html
If I set the item width/height to the size of my images, thing slow down again:
.item {
width:160px;
height:160px;
}
http://users.telenet.be/prullen/grid3.html
Any ideas as that what is the reason of this? I'm out of ideas, I've removed/added statements but nothing seems to help. This is tested in different firefox versions up to version 10.
Thanks,
Wesley
To get your animation boosted, you can remove the box-shadow property from #container .item .thumbnail, this property is heavy and slows your animation.
But if you still want the shadow effect, you can try putting it behind as a background and not as a part of the animation.
It should take some change, but removing the box-shadow property from the animated div will make it faster. The "item zoom" div is the one responsible for the animation. By splitting the "zoom" class from the "item" class, and applying the right css properties on each, the animation shall work faster. (I've tried it with firebug)
HTML:
<div class="item">
<div class="zoom">
<div class="thumbnail">
<img src="...">
</div>
</div>
</div>
Position your elements absolutely so they are not part of the normal flow of the document. This will make it so the browser doesn't try to redraw the page every-time an animation plays.
When elements are relatively positioned, they can affect each-other when one is changed, so they all have to be redrawn to make sure that changing one element didn't affect all of them.
I created a demo and absolutely positioned the elements, you can see that the animations are much more efficient.
Here is a demo: http://jsfiddle.net/QLTbU/
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/