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;
Related
I'm designing a homepage in which I'm trying to display the same image 4 times in a single row (to make a kind of decorative banner). I have set each images' width to take up 25% of the screen. Theoretically, this means each image should take up a quarter and fit perfectly within a single row. However, I suspect Bootstrap is adding some kind of spacing between my images causing the 4th to spill over into the next one.
I have tried setting their margin to 0, setting their padding to 0, and setting their border-style to none. I figured setting the properties this way would override any defaults Bootstrap might place on the <img> tag, but this spacing does not seem to be going away. Additionally, checking the Developer Tools on my browser confirms that there is in fact no margin, padding, or border affecting my images. I'm not sure what else I can target to try and resolve this issue.
Any advice would be greatly appreciated. Thank you for your time in advance.
NOTE: I am not using Grid. I figured what I am attempting to do is simple enough to avoid having to use it.
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
.back-banner {
width: 25%;
opacity: .5;
padding: 0;
margin: 0;
}
Image is inline element by default. This causes it to add some white space. You can transform it to block element by using display: block, but then you need to use float: left to make them appear in one row.
Even better is to use modern css like flexbox by adding display: flex on wrapping element.
I have tried every way I know how (and failed) to properly set the width on a kendoAutoComplete. My latest attempt (below) is JS based, but I've also tried numerous CSS solutions.
The issue I'm seeing is that no matter the width I choose, the actual input area remains a consistent width, and then there is a weird gray area to the right:
Here's the hover state (the gray box disappears):
But don't be fooled by the appearance of a large text box. Here's what happens when you begin to type:
I've tried:
var autoComplete = $("#gridFilter").data("kendoAutoComplete");
autoComplete.list.width(400);
And
autoComplete .wrapper.css("width", "300px");
And...various CSS solutions.
Why must it be so hard to set the width of a silly auto complete? What am I missing here?
I want the width of my auto complete to be 100% to fill its container.
Bonus points if you can help me understand why Telerik consistently makes me want to hurt myself.
EDIT
OK, I've (partially) figured it out. I temporarily removed bootstrap CSS from the page and the input works as expected.
If I find the offending CSS, I'll post an answer here.
As mentioned in the edit above, default Bootstrap CSS was conflicting with the styling. Specifically, the max-width property. The CSS below fixed it:
<input id="gridFilter" style="max-width: 10000px; width:100%;" />
In the chrome dev tools bar I see these details at responsive.css:1101
But when I go to line 1101 of responsive.css I don't find margin-right of -20px:
So what is causing -20px right margin?
I've searched in whole of responsive.css but I could not find the rule causing -20px right margin.
Under styles tab
Under Computed Tab Same Time
The browser is calculating that value automatically. From MDN:
auto is replaced by some suitable value, e.g. it can be used for centering of blocks.
div { width:50%; margin:0 auto; }
centers the div container horizontally.
The -20px that you are seeing is on the "Computed" tab of the developer's tools. This tab shows the actual amounts that have been calculated based on the all the style rules that apply for a given element.
So, if you have a style rule that says something like width:50%, then at some point, the browser needs to figure out exactly how big that is. This is what the "Computed" style tab shows you. You will not necessarily see these values in the source .css files.
Instead, look at the "Styles" tab of the developer tools and locate the item in question. In that tab, you'll be able to see the style rules that apply to that element and if there is more than one, you'll see them all, but some may have a line running through them, which indicates that they are being overridden by a more specific rule somewhere else.
Now, in your case, you are setting the content to 960px; and the margins to auto. The developer's tools is only telling you that the margin is what it is because of the value specified at line 1101. But since you've used auto there could be a number of other styles contributing to the final result and the size of the viewport when you test factors in as well.
Attempting to have three backgrounds with various z indices is resulting in only one layer being shown.
This jsfiddle has the relevant code and examples (minus the huge foundation css file... the behaviour is unaltered without it).
the classes that are failing are
skyline
and
#footer_container
whereas #header_container is running properly.
I've updated your fiddle here.
#footer-container wasn't displaying its background image because of your CSS syntax. Since you combined both the background image URL and no-repeat, you would need to use the background shorthand rather than the background-image property.
A great way to check this sort of thing is to inspect your element with your browser (in Chrome: Right Click > Inspect Element) and find the element that isn't displaying properly. You'd notice that the background image property of your #footer-container div was being literally crossed out by Chrome because of a syntax error.
There was also a bit of a syntax problem in your .skyline class. First, both your body and the inner div have a class of .skyline. This is kind of confusing so you should remove it or be more specific in your CSS, e.g. with p.skyline, div.skyline, etc. As you've got it currently written, both your body and that .skyline div will get the background image. You also didn't include a closing </body> tag. I'm assuming you don't want the background image on both that div and the body, so I removed your body tag in the updated fiddle.
Also, in your .skyline css, you have both height: 546 and height: auto. First of all, height in CSS should have a specific value (e.g. px, em, %). For an <img src="img.jpg" height="546" />, however, simply putting "546" as its height would be fine. Second, you should only have one height value per class.
The skyline problem itself is that you didn't close your curly bracket on line 126, so no styling at all was applied to .skyline. Once it's closed, there's still a problem. It has no width. So let's set it to 100%. Still nada. This is because .skyline's parent div#container also is widthless. So let's toss a 100% width at it too. Then we're in business.
A good text editor that highlights syntax errors could help you out a bunch, especially when you're just starting out.
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"