I have a couple of links that have a margin-left of 3px. These links are underlined and look like that:
<a href='#'>
test
</a>
Unfortunately, there are spaces inside the link and I'm not able to remove these space since I don't have access to the HTML code. These spaces are also underlined, which I'm not happy with. Is there any way to remove them without changing the HTML?
Here is a fiddle that shows my problem: http://jsfiddle.net/e8quz/
Update:
Here is a picture, what I want it to look like:
The spaces come from the line-breaks (well-known from the display:inline-block problematic).
So make your a elements display: block and float them to the left.
DEMO
PS: The display:block is "redundant", as float normally already sets the display property of the respective element to "block". But it do no harm ...!
See here: http://jsfiddle.net/BWc2U/2/
This will also solve the issue. There is no need to make them floats, with the floats you need to clear the floats otherwise all content after will also be floated etc...
a {
margin-left: 5px;
display: inline-block;
}
You can just float the links to make the white space disappear without editing the html
a {
margin-left: 5px;
float: left;
}
http://jsfiddle.net/e8quz/2/
Related
I have a table (bootstrap themed, generated from Django admin).
In one of the columns I have a div, which contains three elements, and anchor and two spans - each span to display bootstrap glyphicon.
<div class="my-fixed-width under-review data-sent-false">
C4U0UACXX-8 6nb
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
</div>
I would like to have the icons moved to the right (ideally lined up between table elements in the same column).
My problem is that when I add float:right to the spans, it moves them right, but also down and expands the div height.
After the float:right is added :
How can I keep the icons at the same vertical position as before, while moving the elements right? (I have tried position:absolute, and clear:both).
This question has been here a while, but I found a good answer so I want to share.
According to this answer I found elsewhere on StackOverflow, the elements that you want to have floated right need to be given first in your html structure.
<div class="my-fixed-width under-review data-sent-false">
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
C4U0UACXX-8 6nb
</div>
This bug was giving me all sorts of trouble on my own website, but once I found this out I realized that it's actually quite simple to understand the fix. When you put a float:right element after everything else, then it will float to the right just like you asked it to. But if there's not enough room to the right (or if some quirk of browser rendering makes it think there's not enough room) then that element gets pushed down as well, so the browser is satisfied that it will fit. But if you put the float:right element first, then it goes right where it's supposed to before the browser lays out any other elements. Then the ones without float:right get put in according to their usual layout, including adjusting auto-widths or auto-margins to accommodate floated elements.
It didn't happen when I was testing this, but this configuration might still cause both of them to be on top of each other even if they're not initially pushed down from their original position, but if that happens try adding the display:inline-block like this:
span.glyphicon{
float:right;
display:inline-block;
}
See this JSFiddle on an example of it working with the spans placed before the anchor.
Maybe you should post all the code, because float right should not do that. See that codepen : http://codepen.io/mbrillaud/pen/myKjPO
.my-fixed-width{
width:200px;
background-color: orange;
}
.icon{
float: right;
}
If you want to use position: absolute, do not forget to set the parent to position: relative, like this: http://codepen.io/mbrillaud/pen/jEKpqx
.my-fixed-width{
position: relative;
width:200px;
background-color: orange;
}
.icon{
position: absolute;
right: 0;
top: 0;
}
if it goes down when you don't want it to then simply add a
"Margin-top: -(###)px;"
to the CSS
I'm not even sure if this is possible, but I figured it was worth asking.
It would be pointless me trying to explain, I'm rubbish at things like that, so check out this demo - http://www.deanelliott.me/braintrain/
See how the titles on the 6 images have an orange background colour? And now see how the padding is missing from the right hand side of the first, and left hand side of the second line?
Is it possible to add padding there so that the background doesn't just stop at the end/beginning of the word?
Or should I tell them it's unfeasable and they'll have to live with it?
The issue here is you can't pad at word end/start where the content wraps, so this won't be possible unless you change the display type for the links to a block-style type, e.g. "block" or "inline-block", but naturally that affects the appearance somewhat.
You can get slightly further by adding:
white-space: pre-wrap;
to the .blog-grid .grid-block h2 a, #sidebar h2 a rule; however it's not a complete solution (but it's all I can come up with).
.blog-grid .grid-block h2 a, #sidebar h2 a {
/* other css properties */
display: inline-block; /* or display: block */
}
Adding text-indent in CSS can also work
text-indent: 10px;
add some code to class "post-title tilt" - it answeirs for your titles.
write maybe padding-left:20px; or if it won't work: margin-left:20px;
can you edit the code? adding span for each line should work
span class="line1" and span class="line2"
<a href="#">
<span class="line1">a safe alternative to</span>
<span class="line2">ritalin</span>
</a>
How can I align the bottom of an inline block (call it 'IB') with the bottom of the text - excluding descenders like that on 'g' - in a parent element (call it 'PE')? This should be in a way which generalises whatever the size of the text - I don't want to hardcode size-specific pixel values.
Here is an example of the HTML I'd use, with the classes I'd need CSS for:
<div class="pe">
Parent text line
<span class="ib" style="display: inline-block;">
- and child text line
</span>
</div>
And here's what I'd like it to look like:
OP updated saying: "Thanks, but I've edited the question to clarify I don't want to hardcode size-specific pixel values."
In that case, I'm afraid there isn't a solution that will automatically fix different lines with different text sizes. The other solution I provided isn't even perfect across all of the browsers with some combinations of font sizes, because Chrome/Opera round inexact values differently than Firefox/IE, so even with my solution, you'd need to use some browser-specific css. The only thing similar to an universal solution would be setting vertical-align: middle; but I wouldn't trust that to work consistently.
You can add below css to ib. And change the bottom margin to control alignment.
.ib{
display: inline-block;
font-size: 10px;
vertical-align: bottom;
margin:0 0 1px 0;
}
#Rorok_89 I know i am adding one more line of css but its justa way to do it in a different way. Your answer is perfect.
This seems to have worked for me: http://jsfiddle.net/Rorok_89/Z8TWH/
.ib{
display: inline-block;
font-size: 10px;
vertical-align: 1px;
}
This is my problem : http://jsfiddle.net/F6pNm/8/
I need the text to appear on same line as the links. But it keeps using adding a empty line at the right.
EDIT: Forgot to mention, I need the text within the div to be centered between the links.
if you add this:
#footer {text-align:center;}
and add
#flash {display:inline} to the 'flash' id
if will work
: http://jsfiddle.net/F6pNm/24/
note: This will also work if you want to center more than one div, just use a class instead of an id (and . instead of #) to apply it to multiple divs
Have div#flash float left as well.
Use display: inline-block for the flash div. Since you mentioned you want the content centered, add #footer { text-align: center; } to your style rules.
I have a some images that I need to line up without any gaps. I can get them fine in jsFiddle, see http://jsfiddle.net/QZLSf/2/
But on the actual SharePoint site the images have a gap between them, kind of like http://jsfiddle.net/QZLSf/1/
I have checked with FireBug and the images, and links, have all the properties they should have, but I can't get rid of that gap.
What could I be missing?
EDIT: I know that the second link has footerlinks defined as a class, but I was just using that to illustrate the problem I'm having. That's not what my actual code is.
EDIT: EDIT: Ok guys there seems to be a misunderstanding as to what I am asking here. I know HOW to get the required result, just that it isn't working on the SharePoint site. I just need advice on what might be wrong as everything that should work isn't working.
Remove the whitespace/line breaks between images.
Demo: http://jsfiddle.net/QZLSf/12/
Just posted this solution elsewhere and think it's the same thing.. is your Sharepoint implementation putting the <img> elements on separate lines in the HTML?
In your fiddle you have them all on one line.. if that's the difference then I'm afraid it's natural behaviour for inline elements (space between words).. there are hacks out there that involve HTML comments or removing the spacing or splitting the img tags, but if you can't have (or don't want) an HTML workaround - then something like this should work
CSS:
div {word-spacing: -4px; background: #eee; border: 1px solid #000; width: 600px;}
div p {word-spacing: 0;}
HTML
<div>
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<p>the div containing these images and text has it's word-spacing set to -4px which removes the default whitespace</p>
<p>but then you want some text with normal spacing reset the word-spacing to 0 on the <p> elements, which is the default</p>
</div>
this is your code:
#footerlinks a, #footerlinks img{
but footerlinks is class not an id, so use this:
.footerlinks a, .footerlinks img{
ways to skin cats...
http://jsfiddle.net/eCSYt/45/
Update for bazmegakapa:
Sorry assumed the code was pretty easy to follow and I just presented it as an alternative way to approach it..
The gaps were caused by the white space in the HTML formatting - which is significant. By setting the font-size to 1px (actually 0 would be better if it is supported xbrowser) the white space is too small to render. In a real page you may also need to zero the line-height as well.
I used text-align to centre the text just to show an alternative method... and it has the advantage that you don't need to know the total width of the images
That's just the way it is. You have to set the margin-left to -4px
.footerlinks img {
margin-left: -4px;
}
.footerlinks img:first-child {
margin-left: 0px;
}
Demo: http://jsfiddle.net/QZLSf/11/
EDIT: This solution is more correct. I fixed the margin on the first child.