I have a div inside a fieldset, and I am trying to place a button to the right of it. However, the div has a persistent right margin that I cannot seem to control. If you look in the image below, you will see:
1. the HTML,
2. how it appears in the browser with the visual overlay provided by chrome dev tools (note the large orange right margin),
3. the css (note I am explicitly setting "margin-right: 2px;")
4. the box model from chrome dev tools (note the right margin is showing as "2", but still it is much wider as shown in #2)
https://i.imgur.com/2rPdNs5.png
How do I get rid of that right margin!?
Thanks.
Try setting display: inline-block; for #ageYearFieldset div.
Try adding float: left to both div and button to have the button placed on the right of div.
Also, you may want to try bootstrap's input-addon out for accomplishing it.
The margin that is visualized by Chrome dev tools may be confusing, but the thing you should rely on is box model itself.
Related
I'm a bit lost in the weeds trying to customize a jekyll theme. My repository is capecchi.github.io and I'm trying to get some menu icons centered. I have looked into how to do this and have successfully gotten the blog/project buttons centered, but for some reason my social buttons below are slightly off-center to the right. The only added class that I can see (in header.html) is the "navigation--social" class (defined in /css/uno.css), and I can't find where in this class it might define a left margin or anything. I'm new to web development and have been poking at this for quite some time (hence the "TESTING" button I added). I'm just stuck finding where this offset is coming from and would appreciate any input. Thanks!
There is a margin-left of 1.5em on .navigation--social (uno.css line 1391).
Actually, removing this margin centers the buttons quite good but not perfectly, because there is another margin-right on .navigation__item (uno.css line 1376). You should either put an equal amount of margin-left or remove the margin-right to get perfectly centered buttons.
I found this out by using the inspector of Firefox. Most browsers come with this feature, you can open it up by right-clicking the page and selecting "Inspect Element" from the context menu.
Screenshot of the inspector window showing the margins and the offending styles.
I am using this example and copied the same exact code but for some reason my page has a gap between the top of the page and the sidebar as shown in the picture.
I tied absolute and fixed positioning. The height in css is already set to 100%.
What do I need to do to close that gap ?
Without looking at the actual html/css it's hard to guess what the problem is, however from the small strip of bookmarks in your screenshot it looks like you are using Chrome browser which will allow you to "Right Click -> Inspect Element" on the sidebar.
This will let you adjust the css properties live in the browser, from here if you click on the "Computed" tab you will be able to see all the CSS properties that are affecting the div.
I would recommend looking at the margin, padding and top property of the div.
I am trying to add padding-right to an input so that I can place an image in that corner and not have the text flow behind it. It works fine in Chrome & Firefox but not in IE.
I have seen people recommend using float:left; but still it doesnt work.
See the problem here: http://jsfiddle.net/4zRRt/
That is not how you want to do that (probably, I am guessing, the button image doesn't work for me obviously).
I am guessing you want an input with a nice submit button which is always on the right.
This is done with a parent relative element and the button who is absolute with a right offset of 10px (to accomedate for the extra space the shadow requires). And a top set to 0...
Here is a jsfiddle of that:
http://jsfiddle.net/sg3s/4zRRt/10/
I put some extra display:block; in there to make the inputs block instead of inline, this will prevent other rendering problems too.
Ok I am attempting to round my corners via CSS so I can drop a bunch of images from an older style template I am remastering for a client. The idea is use something that can fail gracefully. Which I think it would generally speaking. However in this case it appears the the top left corner of one of the elements is not rounding like the rest of the same element is on its other corners. I am using a class to pass this to elements and this class works on all the other elements flawlessly its just this one element..
content_wrap to be more specific. Its the element that all the other elements reside in.
Here is a jsfiddle version of it.
http://jsfiddle.net/8qZze/
anyone have any ideas/suggestions?
You can add overflow:hidden to the #content_wrap to stop anything from overlapping the corners from inside. Live example: http://jsfiddle.net/8qZze/1/
#content_wrap{
overflow: hidden
}
I removed the ".white" rule and it worked, the child "content_left" has a rectangular shape ant it goes over the rounded corner of "content_wrap", try to specify some margin to leave more space for the rounded corner and everything will be fine.
Or try tw16's advice with overflow (forgot about it :) )
Ok I have a really weird CSS issue that I was wondering could anyone suggest an explanation for.
Steps to reproduce:
Open Chrome and navigate to http://www.mcwhinneys.com/media
The gallery of photos should be out of alignment, off to the right by about 50-70px
Open the Developer console in chrome
Expected Result:
i do this to inspect the css expecting to see why the images are off to the side, fixing the css and moving on.
Actual Results:
The gallery of images pops into alignment when the developer tools open.
Anyone know why this might happen? It seems as if the css is fine when I inspect it but it definitely doesn't render correctly until the console has been opened.
Well, the actual cause for the wrong layout is the combination of text-align: center on your ngg-gallery-thumbnail-box (I'll call that box from now on) with position: absolute + display: inline-block on the inner ngg-gallery-thumbnail (I'll call that thumb).
It goes like this:
We apply text-align: center to box. This will cause it to center its inline children. It does this (conceptually) by placing each child's left edge at the current "text cursor" position (which, importantly, starts out at box's center), then moving it towards the left to "recenter" it. This is - also importantly - box's "job".
We declare the thumb as inline-block. This will (among other things) cause it to follow text-align of its parent, meaning that - at this point in time - it's centered.
We then declare thumb position: absolute. This will take it out of the flow, positioning its left edge at the same point where it originally would be - because we're not specifying left/right.
The "naive" interpretation of this would be that it's still at the center of box, and everything would be fine, but we get a "side effect"...
Because we took thumb out of the flow, box no longer has any inline content, meaning its text cursor is at the center, and it doesn't need to center anything. Its "job" is done.
But since thumb is inline-block, it's original position is still based on box's text cursor position (the center), meaning that when we make it position: absolute, its left edge will be placed at that center. It's not horizontally centered inside box, because from box's point of view, there are no children in its flow that need centering.
This is halfways to a chicken and egg problem, so Chrome seems to get confused when it does a re-render of the page for the console.
This explanation may also be a bit confused, but you can see the result here - and even in this simple example, Chrome's console will do a reflow when you try to inspect it. In this example it even seems to enough to resize the window without opening the console (v17.0.963.56):
http://jsfiddle.net/h66Gj/
As far as I'm aware, the way it renders it first, is the way it's "meant to be" (last I checked, the W3C recommendations were vague about it, but at least Firefox agrees with the pre-inspect render).
There are many ways to get around it, my favorite being to only use text-align: center to center... text, and try to use e.g. margin: auto to center other content.
It's really hard to tell, but it looks like it might be something to do with the interaction between the styling of the elements with class ngg-gallery-thumbnail. I would try tweaking/simplifying that. Do you need the display:inline-block setting there, for example?