i'm having a rather unique problem with CSS and DIV with/without borders.
Now, when i use the DIV without any borders, there is a kind of automatic padding! when i add a border, the padding disappears.
Even when i use "margin:0;padding:0" it still doesn't clear off the padding.
does anyone have any ideas why it's behaving like this? As a result, i had to use a border with the same color as the page background, but now i have same problem with a set of 3 DIV that should be right next to each other and CANNOT have any borders at all.
HELP!
Related
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
Consider the following code: http://jsfiddle.net/A98vk/
The wrapper div has two (top-left and top-right) corners rounded. The second div is directly nested and I would like to give it a background gradient.
The problem I experience is that the background linear gradient (sorry for only adding webkit version, I have Chrome) gets cropped when the css property border is either absent or set to 0 or 0px [any params]. When I set the property back on, the problem resolves.
Can anyone please tell me what's the problem with it?
I understand I can just set border: 1px solid rgba(0,0,0,0), but this seems like a workaround for me.
Margin collapsing is happening. There are tons of questions/answers about margin-collapsing on stackoverflow. I've answered one (maybe more) myself: Adding CSS border changes positioning in HTML5 webpage
Basically the h1's margin "collapses" and is applied to the surrounding header instead. No background is cropped. The header simply gets smaller.
Elements margins collapse when there is nothing in between them. When you add the border up there you put something in between them, hence no margin collapse.
There's a little more to know about this, including other ways to stop the margins from collapsing. You can check my answer above or simply google it for perhaps more detailed explanations.
You can add overflow:auto (or hidden) to the .header div and fix the cropping.
See this demo
I have a few radio buttons that I'm styling with PNG background images, using :hover to swap out the background image for one with a surrounding halo. The halo areas from adjacent radio buttons overlap, so they should not be part of the clickable area. Yet they are still part of the same image.
Ideally, I'd like to show the halo behind the padding area, so I need the content area of each radio button to be clickable, but not the padding. I can't find any CSS attribute that controls this. The pointer-events attribute is almost, but not quite what I need, and most of its values apply only to SVG anyway.
All that Google searches turn up are pointers on how to use the padding to make the clickable area bigger, not smaller. I can use CSS3-only attributes if necessary, but would prefer not to add any extra markup to my HTML.
Any bright ideas?
I'm afraid this is not possible without adding extra markup. If you were using divs you could add a pseudo-element that contains the background image, but unfortunately it is not possible on input elements (:before and :after).
You need to add a wrapper div that handles the background image:
http://jsfiddle.net/sQGV9/
Also, beware of the usability issues this may cause, a hover effect usually implies that the element is clickable, so in the jsfiddle I added a cursor: pointer so it is clear the precise area where you are supposed to click.
If you attach an image with the halo effect you want to achieve it may be possible to achieve the effect in css3, removing the need for extra markup.
You should change it to margin. Than should be not clickable.
if your border or padding is thicker, then You can keep a new div on it with the position absolute,higher z-index and the alignments using 'top' and 'left'
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.
I'm trying to use two divs, one with a non repeating background in the left corner to serve as a 'curved border' image, and the second div, within that one, with a background that is offset by the width of the first div's image so that it seems to be one solid image, that fluidly stretches with the page width. I tried doing this the way I described but it isn't working, only the stretched repeating background div shows up. I would prefer to try from scratch something one of you suggests.
Try setting an explicit widh on the left div, and try using float:left on both (to make sure they align properly).
And set border:none (I'm stating the obvious here, probably).