I'm using Bootstrap input groups and applying the negative margin margin-bottom: -1px similar to this example:
http://getbootstrap.com/examples/signin/
However, if you look at the screenshot below, when I focus on an input, the negative margin causes the bottom highlight of the input to be hidden.
Can anybody suggest how to resolve this?
I was hoping for an obvious answer perhaps explaining why this doesn't happen on the Bootstap signin example.
Fiddle
This should solve the issue.
Fiddle
.form-control:focus {
z-index: 2;
}
When dealing with focus events\stylings, you can use the Developer Tools to force the focus state on an input and see whats going on (at least in Chrome you can...). Just right-click on an element's HTML and select "Force element state"->":focus"
Related
I am new to using Firefox's developer tools.
I am trying to make sense of why I have so far been unable to override the height of a given element. This page uses Bootstrap, but my question is not related to this particular issue: I want to understand how, based on the information in the "Rules" and "Computed" panes, I could have diagnosed what the issue is.
I am trying to set this element's height to 20px, but it remains at 90px (as shown in the second screenshot below) computed height of 90px.
SCREENSHOT #1:
SCREENSHOT #2:
QUESTION: How can I use Firefox's Inspector to figure out what is going on here? How can I use it to figure out how this value of 90px is being derived?
Code inside the element:
<span class="lang_pt" style="display: none;">O que fazemos</span>
<span class="lang_en" style="display: inline;">What we do</span>
PS: I don't write CSS so reliant on !important, I am trying to figure out what is happening here.
The height of an inline element is set strictly by its contents. Add display: inline-block; to the anchor so it will respect your height: 20px;
I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.
My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?
I have looked at these questions and implemented their answers with no luck in fixing the issue:-
facebook iframe App: Send/Like button z-index issue
Other fixes I have found that did not work were:-
Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)
Changing the z-index of the classes that are listed in the answer from the link above.
Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-
All I would like is the flyout to appear on top of all elements on the page without having to change the layout.
Here is the link to my site http://mikelonsdale.co.uk
Thank you for your time and help.
Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.
Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).
The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).
.fb-like span {
overflow: visible !important;
width: 450px !important;
margin-right: -375px;
}
I added
.fb-like span {
z-index: 999999999999999;
}
to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
Some strange is happening in applying the styling of css code in some browsers...
Please take a look in the example...
http://jsfiddle.net/3FepW/3/
In Chrome the green div is bigger, than in Firefox, I really don't know what is the problem, I think in Firefox it displays as it should but in Chrome and IE9 it displays different.
I tried a lot of changes, can't resolve this for days.., I can use height: 100% or overflow hidden but I can't use one of them because: overflow hidden hide everything inside, but I have some draggable/sortable elements and height: 100% because I have a resizable function that will enlarge the yellow div...
The problem comes from something known as margin collapsing. Chrome and IE are rendering it correctly. Not sure what Firefox is doing.
There are many questions in here regarding the same problem. I've answered one of them here - Adding CSS border changes positioning in HTML5 webpage
Basically top and bottom margins between siblings, and children and parents collapse to highest of them. The float: left you put on .c1 prevents that from happening . The margin-bottom on .c3 gets stuck inside .c1 and that's why it gets bigger (that is, 'that's why .c1 gets bigger').
Try adding overflow: auto; to .c2- another way of preventing margins from collapsing - so c1's margin gets 'stuck in' .c2 instead - I'm assuming that's probably what you're looking for.
Here's a fiddle -> http://jsfiddle.net/joplomacedo/3FepW/5/ .
Remove the margin-bottom: 10px; from .c3 - this is what causes such behavior. As far as I know such issue is often referred to as 'collapsible margins', please, somebody correct me if I'm wrong.
I am having problems with the text input in firefox, it has some margins and I can;t get rid of them, maybe that space is not a margin?(it is outside the border of the input so it looks like a margin).
In the image above the width of the input is set to 100%,,margin and padding is 0, also i tried setting -moz-box-sizing: border-box;
I would like some resources or an explanation to make me understand what is that space and how can I get rid of it?
Thanks.
Edit1:
Here is my current test page
https://www.designersbookshop.com/support/test.html
also i made a copy in ...test_2.html (i will try the suggestions on the test.html),
Check the inputs on left side.
Edit2:
My Firefox version is 10.0.2
Here is how an input element looks like in firebug, it is clear that a margin or something similar is painted outside the border(or i am stupid but I want to learn)
in the image above the border of the input is the small line(1px) visible on left and right of the input.
Edit3 I figure it out, is the border, I am on Ubuntu but I has similar on Mac,so it is the theme engine that adds that white border?
You're using OSX right? I think what you are referring to is the focus highlighting. It's only seen on the active element, right?
Normally that is controlled by
input:focus {
outline: none;
}
Some people use it to remove the rectangle around links as well. which is a bad practice since it reduces usability as users can't visually see what is the active link. (think of keyboard users.)
FYI: here is a screenshot of your test page (from Edit1) in Firefox 10 under Windows: http://img210.imageshack.us/img210/1764/inputform.png
As it always has been with input fields in HTML - their appearance is often dictated by the OS or browser. Very hard to get a consistent appearance.
May be it is outline or border
Try
input {
padding:0;
margin: 0;
border: none;
outline: none;
}
Update: I cannot duplicate your problem on my system. This is what i see