I've recently run in to a peculiar problem in IE10 (sigh). It appears that if you use display:inline-block; in conjunction with overflow:hidden; IE10 messes up your line-height.
I tried fixing it using vertical-align:middle; but that only almost fixes the problem in IE10 and then introduces baseline problems in other browsers.
The only code needed to trigger the bug is:
CSS:
.bug {
display:inline-block;
overflow:hidden;
}
HTML:
<p>This should <span class="bug">be buggy</span> in IE10</p>
I created a JSFiddle to illustrate the bug - http://jsfiddle.net/laustdeleuran/5pWMQ/.
There's also a screenshot of the bug here - https://dzwonsemrish7.cloudfront.net/items/3d0t1m3h00462w2n1s0Q/Image%202013-04-08%20at%2011.13.16%20AM.png?v=2688e27a
EDIT:
This is not a IE10 bug (but more a case of lazy testing on my behalf). Actually Chrome (webkit) is the one doing it wrong - https://stackoverflow.com/a/15883508/799327.
CSS 2.1 says
The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.
which is exactly what IE10 is doing.
And Firefox and Opera are doing the same thing.
It's not IE that's bugged, it's Chrome, which is not following the above rule correctly.
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 simple textarea in a page with a placeholder for when it is empty. I have styled the textarea in css to be white text and a transparent background. The body of my document is very dark so black text shows up poorly. This all works fine in Chrome, IE, etc. However in firefox when the box is empty the placeholder text appears colored correctly, but when you click in the box (focus) the cursor starts out black until you start typing. If you delete what you typed, the placeholder text comes back and the cursor is black again. If you are not looking closely, it appears as if you clicked a control that is non-functional.
How are people working around this?
My CSS:
.statementInput {
width: 500px;
height: 50px;
background-color: transparent;
color:white;
border:none;
}
The text area line:
<textarea class="statementInput" id="st1" placeholder="Type something here"></textarea>
If I'm not mistaken, this is a bug that has appeared in Firefox recently and has been marked as a bug, too.
I have encountered this bug in my own work as well and I must say it's very frustrating. Unless somebody finds a workaround, I think we will just have to wait for the developers to release a new version of Firefox that fixes it.
This is fixed in at least Firefox ESR 31 and 36.
The following css snippet causes a white cursor on a dark background.
.textInput:focus {
color: white;
}
Bug 830608 states it has been fixed since 19.
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.
I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.
example: www.morecambe-lodge.co.uk
it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.
I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.
Any advice would be greeatly apreciated, Thanks.
The z-index has nothing to do with this bug.
After I read through the following article:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.
The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.
this work for me :
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.
The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.
yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.