I'm attempting to finalize on of the pages that I am fixing for a client, and it seems that one of the div's within the page that I am attempting to add padding to won't work for vertical padding. I checked the element using chrome's dev tools, and it stated the element had "NaN x NaN" for dimensions.
The element is clearly being displayed, but I cannot add padding to it as a result. To see what I am talking about, click here and look at .accordion-heading > .accordion-toggle. It's a bit frustrating because it's preventing me from finishing this tiny bit of the page. How can an element have supposedly no dimensions, and how can I fix it? I've tried adding manual width and height, to no avail.
This is because it's an inline element. Change its display to inline-block and you'll be able to add padding.
a.accordion-toggle {
display:inline-block;
}
Related
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
In all major browsers: as the question states, a parent <div> container (whose height is not set) over-sizes its height to fit a child <img> element (for instance, a 300-pixel tall image that is the only thing inside the div). The over-sizing is usually about 3 to 5 pixels, and appears at first as img margin-bottom or div padding-bottom might look.
However, using absolute positioning, it is clearly demonstrated that the bottom of the div is below the bottom of the imgby a few pixels. It might not ruin a website's design, but it is a hurdle to overcome in certain situations. I have made a fairly detailed fiddle demonstrating this issue here.
Why is this standard practice in web browsers?
Is this meant to compensate for something? It seems unnecessary.
Is this a bug, or a soon-to-be antiquated feature?
EDIT: Thanks to the answerers/commentators below, I know the reason is that an <img> is treated by default as CSS
display:inline which preserves whitespace around the element.
Changing it to display:block completely fixes the problem by
eliminating whitespace around the element.
Notes: This over-sizing can be averted by giving the image child element a CSS property of float:left or float:right, etc., but this is a workaround, and as such is not the answer to the question. One reason this can be problematic is if you already have other float elements layered in front of the div child image (float overlap not allowed Firefox, Opera, IE. float overlapping only seems allowed in Chrome and Safari using CSS position settings). Thanks!
Add display:block to your image. I think that will fix the problem.
I use a negative margin-bottom to get n DIVs with equal height (I use this method : http://abcoder.com/css/css-equal-height-columns "Three column layout – equal height using pure CSS")
But this is not working with anchor links.
The top part of div just disappear.
Here is my example : http://club-scpi.com/bug.php
This is so strange ! What am I missing ?
this is not a bug and works as html and css intended
#container {
overflow: hidden;
}
is causing the content inside the div ( when told to go to the anchor point ) to scroll UP to
<a name="test">
as the overflow is set to hidden, it appears to - disapear.
It is just "hidden"
change to
#container {
overflow: auto;
}
and you will see what is happening.
As an aside, I am not a fan of the this proposed method for creating equal height divs,
( one of the reasons why is what you have just highlighted ) , all depends on what the particular job is.
Alternatives are; the use of background colours, % heights, px heights, or just fab and up front content design considerations before we set to marking up.
Then there is javascript , it can follow up and tidy up boxes here and there in terms of size ( worth looking into also )
... always keep it as simple as possible.
I had the same situation where I had a negative margin on my footer , and anchored links chopped the top of my page and shifted it to the bottom when clicked on. I had a tag inside the footer with copyright info and moved the negative margin from the to the and worked like a charm. Not sure it applies directly to this situation but might help someone.