Unknown Padding on Containing Element - html

There is what appears to be a 2px bottom padding on the image to the containing element. I am able to resolve this by removing the z-index. I need the z-index arrangement however to provide an inset box shadow on the image.
It can be seen here: http://jsfiddle.net/JkLAP/

just add .photo{display:block}
demo: http://jsfiddle.net/JkLAP/2/

Related

Drop Down CSS not working (Laravel Blades)

I have a view in which I am using some drop downs like
Access Link
I am unable to show border bottom, I have tried to give border-bottom or border definition manually in that elements CSS but couldn't fix. Any help
It is not that it has no bottom border, but it is just not being shown by your browser.
Your button has a height of 40px. But it is also contained in a div that has a height of 40px and a box-sizing of border-box.
Based on this, when using border-box with box-sizing, the height allocated to the content (in this case, your button) is reduced after considering the border and padding attributes of the element (in this case, your div). I just do not know why the content appears to be being rendered in a way that it overlays the bottom border of your container div.
Note that the box-sizing property in your CSS is applied to all elements, including :before and :after pseudo elements.
You can resolve your issue and show the bottom border if you do any of the following:
Reduce the height of the button element (e.g., set .ms-choice to have height of 38px).
Increase the height of the container div (e.g. set to 42px). This will just mis-align your dropdown menus with your search input.
Change the container div to have a box-sizing of content-box.
Change the background-color of your button to transparent and put the white background color on your div.ms-parent.form-control. (I added this option to show that the button' is actually being rendered such that it overlays the bottom border of the containing div.)

Why is the outline larger than its div?

UPDATE
To get the input back to the size I want it to be, I had to get rid of padding and borders. The following accomplished this:
*{padding:0; margin:0; border:0;}
Thanks to CBroe, I discovered this is unique to FF which adds to the input a default border of .75px and a padding of 1.5px. For a total of about 4.5px. Chrome does not.
UPDATE 2
The above fix only gets the child element back to the size I thought it should be. The accepted answer below shows that FF has a bug which explains why the outline didn't behave as it should, which is to outline the parent only and not expand for absolute positioned descendents.
I have two div elements stacked vertically with their outline property set to 1px. The div elements have a height of 117px.
I expect where the two div elements meet to have their outlines contiguous. It does so with no content.
When I place an absolute positioned input with top = 97px and height = 20px into the top div , the outline of that div is pushed down.
Here is a fiddle which shows this. If you remove the input, you will see how the top div outline sits next to the bottom div.
There are two things (at least) that I do not understand:
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
2) The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
That's because outlines are implementation dependent. It's not only the size:
Outlines may be non-rectangular.
From CSS3 UI,
This specification does not define the exact position or shape of the
outline, but it is typically drawn immediately outside the border box.
Firefox has historically had a tendency of making outlines bigger in various situations, e.g.
outlines are drawn outside (i.e., expanded by) box-shadow and other visual overflow
outlines are drawn outside (expanded by) outlines on descendant elements
The former was fixed, the latter seems the same as your problem.
I've 2 answers for you:
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
The outline appears to be drawn around everything inside. So if an element stand out 100px at the bottom. The outline will also be moved 100px. In this case the input element stands out 8px. So the outline is 8px longer than you expected.
The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
You were almost right there, 97px+20px is indeed 117px height. But you forgot to count 8px from the input element. This comes from a 3px thick border + 1px thick padding.

Inside transparent border

I want to set a transparent border inside around an image by using CSS. I can't find any way to do this.
here is the link for my image with transparent inside border effects.
That's not an easy task, since images are replaced elements and have quite some restrictions (pseudo-elements not working, inset box-shadow not working,...).
You have several options (there are probably more, I just list two):
Solution 1:
Make your image the background-image of an ordinary div and apply a border - this border will automatically overlap the image. Btw., you can use background-clip and background-origin to alter that behaviour.
Problem:
You need to know the dimensions of the image, to adjust the size of the div accordingly.
Solution 2:
Wrap your image into another element, and declare a pseudo-element to which you apply the borders.
Important are the display:block on the img and position:relative on the wrapper element.
Example fiddle
Use box-shadow
This CSS box-shadow: inset 0 0 0px 8px rgba(255, 16, 16, 0.45);
You can do the thing amazingly he he Enjoy It
http://jsfiddle.net/Q8d6V/3/
I can offer use 4 border-blocks with position:absolute. You can change style of each border. For exaple add shadow for left and top border
Example fiddle

Why is this DIV padded at the top?

Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/

Preventing repeating background from appearing through offset transparent child elements?

So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.
However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame's drop shadow. See screenshot below:
This happens regardless if I use a transparent image or CSS3's box-shadow property. Setting negative margins doesn't work to bring it out of the parent element, nor does setting positioning as relative or absolute.
Normally I'd try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there's a repeating stucco pattern set as the body background, which means there'd be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)
Any suggestions how I could prevent a parent element's background from showing through a child element, or offsetting the image frame somehow?
Many thanks!
I figured it out.
I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.
Since I don't need to float anything (It's one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.
If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.