I'm developing a Meteor app with Bootstrap 3 package already installed and trying in making a buttons navigation.
I've noticed that buttons have space in between but, even if i've inspected, i was not able to discover any margin style property to make it possible.
How is that possible? Where did these margins come from?
You can see and inspect the buttons even in the official Bootstrap 3 Doc http://getbootstrap.com/css/#buttons
The issue comes from the CSS property display:inline block which forces white-space between inline elements. It is not an HTML specific issue. See this post from CSS-Tricks for more information: http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
A workaround fix is to modify the HTML, which #Dan posted, but this forces you to break standard HTML formatting and a developer down the road could space things out and break your solution.
A few CSS fixes are to use floats instead of display:inline-block. You can also add negative margins on your buttons to remove that space.
It's not margin, it's actual spaces in the HTML.
If you place the buttons on a single line in your code there won't be any spacing.
See this bootply demo for an example of buttons with no spacing. Also refer to this question How to remove the space between inline-block elements? for more information.
Related
Page margins/padding at page break
I'm trying to create a full-width two column layout pdf using WkhtmlToPdf. Normally not a problem at all. But in my case I have a sidebar with a background color. The issue that occurs is that the sidebar has it's own padding. When the page breaks the content breaks just as expected but without the padding. This is the expected behaviour (as seen in Example A). My question is how one could achieve this 'cloned' padding when breaking the content (desired result example B).
After some searching I thought of the box-decoration-break css property. But from what I could find only Prince partially supports this property for table elements Prince box-decoration-break example and from what it seems only for the border property.
But hey I could make that work, setting a transparent border for the top and bottom should give me the same effect as padding. But as you may know buying a Prince license is a pretty costly bussiness (at least for my current project it's not an option). And it's not the best solution with the need of extra html markup as only table elements are supported.
Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space
From my example here:
http://www.singaporeswimming.com.sg/button-problem
I want to get rid of the horizontal scrollbar, but unable to do so.
I can easily use overflow-x: hidden, but I do not want to touch the css of the modal plugin. I only want to change elements from the source.
Any idea?
Check this Question - remove horizontal scrollbar in div the answer is the same as the one of #Connor Miles
As a besides note - use the full power of CSS (Cascading Style Sheets by adding your styles in external files. It's very hard to debug right now.
Add overflow-x:hidden; top the body of the register page that is displaying in lightbox, this way your not touching the lightbox
Opera seems to add some weird vertical spaces between certain document elements when using contenteditable together with twitter bootstrap.
JSFiddle examples:
Contenteditable not enabled vs Contenteditable enabled - note that in the first example, the rows have no vertical spacing between them, but in the second, they do.
Tested in Opera 11.61 on Linux and 11.62 on Windows. In any other browser I tested, the rows had no vertical spacing between them in either of the fiddles.
I tried removing bootstrap and adding the css it applies manually, but that did not trigger the margin. However, when inspecting the DOM, I found some weird <::before> and <::after> tags that I suspect to be related (screenshot).
What does the bootstrap css do to make this happen, and what is the best approach to avoid it?
Nixing these selectors removes the spacing:
.row:before,.row:after{display:table;content:"";}
.row:after{clear:both;}
No idea what it controls, or why you need it. Looks to be some sort of clearfix type thing, but I don't know. http://jsfiddle.net/wUuSn/2/
Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.
Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.
Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.
Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?
Demo: http://www.sampsonresume.com/projects/patriot-depot/
It looks like a version of the disappearing content bug in IE.
Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.
You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.
Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:
background:transparent
This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.