I am making a HTML page, and have attempted to set a <a> tag a border-bottom.
It would not show, whatever I did. So I made a reduced test case that can be seen here:
http://codepen.io/hwg/pen/ILKdx
Happens in FF beta, and Chrome 22.
If I remove the overflow:hidden; or change it to overflow:visible, it works. The problem is that I need to have that set.
So how can I have a border-bottom? (or is it me :) )
(I cannot use text-underline, want it dotted)
Thanks
Harley
display:inline-block; on the link seems to do the trick.
Add 1px of padding on the top and bottom of the grid:
.grid{overflow:hidden; padding: 1px 0px;}
OR
Make the grid element inline:
.grid{overflow:hidden; display: inline;}
There's probably a hundred different ways of solving this really.
try increasing the line-height. eg. add line-height:200%; to the #test css
In my case any solutions didn't work for me.
I solved the problem by add blank div after last trouble-making div.
In my case, I had to add this to my element:
display: table;
width: 95%;
Related
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
Here is a demonstration: http://jsbin.com/egezog/edit#html,live
Sorry if this is newby, but I can't figure this out. I have a title, and I need (in decoration purposes) a line going from its edge to the right of the page (not an actual page, but a wrapper, but I have overflow hidden anyway). The wrapper is fixed in width, but the titles vary in length. I can't use absolute position, and I prefer not to use tables. And if we get this sorted out...
Here: http://jsbin.com/ibeciv/edit#html,live. So in the end, I actually prefer this all right aligned. You may ask, why do I need advice if it's there, implemented? Well, as you may see, the title is in two rows, which is unacceptable in my situation, and also, I prefer not to use tables.
I guess I can use float:right, to right align, but well, it depends on the implementation that I hope you'll advise to me. Thanks!
PS: jsfiddle is down for me right now, so here I used jsbin.
http://jsbin.com/ujiquq/edit#html,live
Will work in IE8 and all modern browsers. The background of the parent element can be anything. The line will still be vertically centered no matter what font-size is chosen.
HTML:
<h3><span>The title</span></h3>
CSS:
h3:after {
content: '\00200B';
background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
display: block;
overflow: hidden;
}
h3 > span {
float: right;
padding-left: 5px;
}
Here is a solution without using tables:
http://jsbin.com/ujawej/5/edit
And here is the one with tables (from my comment):
http://jsbin.com/osovev/2
Write like this:
HTML
<div class="title"><span>Title Here</span></div>
CSS
.title {text-align:right;border-bottom:1px solid red;}
span{background:#fff;float:right;margin-top:-9px;}
Check this http://jsbin.com/ibeciv/3/edit
UPDATED
Check this http://jsbin.com/ibeciv/4/edit
I've got a dropdown I've made: http://jsfiddle.net/QPxVe/
For some reason, jsFiddle is altering the alignment which is not present outside of jsFiddle - this is not the issue.
I seem to have a gap between items and I cannot see why it is being added.
The Fiddle has different colours and fonts, but other than that, everyting is identical. The arrow in the image below points to the problem - it is like that for all the divs. If I set the margin to
-4px for the main .dropdown class, it is fixed but I'm not sure why the space is appearing in the first place...
It's because whitespace (e.g. new-line characters) around display:inline-block element is rendered as space. One of solutions is to set font-size for parent element to zero.
See http://jsfiddle.net/Kb7Fp/ where following rule is added:
BODY > DIV {font-size: 0; }
It is because of the whitespace (as Marat said).
Another solution (that I found more convenient) is to comment the line break like that:
<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>
You can see the result here: http://jsfiddle.net/EfQdX/
Marat has the answer as to why the whitespace is there.
Depending on your reasons/needs for display: inline-block, another solution could be to add float: left; to the .dropdown rule.
Like on this fiddle: http://jsfiddle.net/QPxVe/2/
vertical-align is the one issue which i am struggling to fix for long days. I understand vertical-align css property is buggy in most of the browsers.
Mostly, we can fix using display:table-cell, because vertical-align is ideal for table and IE will not respond for this.
But, do we have any other alternate fix for vertical-alignment.
Here, is my example for which i suppose to fix.
http://jsfiddle.net/gviswanathan/5rVJ3/
using line-height would be a good replacement.. but,it depends on what you are applying it on.. it will work in your case though.. check the fiddle,added height,width,line-height
http://jsfiddle.net/mvivekc/R4Y4s/2/
You can try using bottom-margin in div blocks in case vertical-align doesn help to achieve your required result.
<div style="margin-bottom: ?px">
where ? can be +ve or -ve value as necessary
You can fix this with a negative bottom margin on the ul. Here's a working example: http://jsfiddle.net/5rVJ3/13/
code that changed:
.w ul, .w li {
list-style : none;
margin: 0 0 -7px 0;
padding: 0;
}