I have a list with floated <li> elements, the heights are different, thats the problem. I know I know theres an alternative, display:inline-block but this propery adds extra spaces, and I dont know why.
My css:
ul {
padding:0;
margin:0;
list-style:none;
width:700px;
}
ul li {
float:left;
border:1px solid #000;
width:24%;
margin:0 0.3% 20px 0.3%;
font-size:11px;
}
.yellow {
background:yellow;
}
online preview: http://jsfiddle.net/f3CA3/1/
you can do it clearing the sides as:
clear:both;
or maybe
clear:right;
just as an example, could be also;
clear:left;
Related
I was working on the below code:
HTML:
<ul id="Generate">
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
CSS:
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red;
}
#Generate > li {
float:left;
width:100px;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
The UL border is coming on the top as one solid line. And below that I am seeing one row having the LI elements. I was expecting the UL border to encompass all the li elements. Since it's the parent. Why is the browser shrinking the ul?
It's because you are floating all the li's within the UL. If a container contains only floated elements and nothing is explicitly setting the containers height the resulting height of the container will be zero.
Try adding overflow: auto to your UL:
#Generate {
list-style-type:none;
overflow: auto;
padding:0px;
border:1px solid red;
}
This URL is a great resource for all things "Float".
Check out the section titled "The Great Collapse".
https://css-tricks.com/all-about-floats/
you did actualy put the border there by urself :).
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red; <---------border
}
so this will do:
<style>
#Generate {
list-style-type:none;
padding:0px;
border:0px solid red;
}
#Generate > li {
align:left;
width:9%;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
</style>
<ul id="Generate">
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
or you just delete that line... but i think you get the idea
Instead of doing float:left, make it display:inline
#Generate > li {
display:inline;
width:100px;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
IMHO browser shrinks ul because the UL is a flow content category object and as we know from w3c specifications the width of this kind of objects in normal flow calculates as ''margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block' (W3C site). So, if you want to ul's border to encompass only the "li" elements, you may add 'display:inline-block;' in your css rule for #General as mentioned below:
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red;
display:inline-block;
}
https://jsfiddle.net/uw4krhL1/
I am trying to make a list of links, 6 links in a row.
The problem is I do not know how many links there will be. It could be only 2 or 25.
Please take a look at this fiddle.
I must be doing something wrong with the css because:
If for example there are just 3 links, the border of the .toplist div is not covering the whole length of the wrap div.
Also, I can't get more then two divs aligning before a new row appears.
This is not that important, but In IE6, even if I use overlow:auto I don't see a background for my ul (if I set one), and also, if I set margin-bottom for the ul I don't see it.
Any ideas on whats wrong with the css?
Ty
I made a few changes to your original fiddle to my fiddle. Check this out:
.wrap {
width:960px;
margin:0 auto;
border:1px solid #000
}
.toplist {
border:1px solid #0f6;
padding:0 0 0.5em 1em
}
.toplist ul {
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
.toplist ul li {
float:left;
width:15%;
margin-right:1em;
line-height:1.4em;
border-bottom:solid 1px #222;
}
.toplist ul li a, .toplist ul li .cat {
display:block;
font-size:0.7em;
}
.content{
background-color:#FF2E2E;
color:#FFF;
margin-top:100px;
heyight:40px
}
Hope this works. :) It works in IE 6 too! :)
I'm wondering why list items as last row are missing bottom margin on IE7?
http://jsfiddle.net/JeaffreyGilbert/sW5DB/
There are (annoying) ways to fix it still using floats, but the easiest solution in this case is to switch to display: inline-block.
See: http://jsfiddle.net/3rjdf/
Replacing float:left with three new properties:
ul { width:300px; margin:0; padding:0; overflow:hidden; list-style:none; background:#ccc; }
li { display:inline-block; *display:inline; zoom:1; /* float:left; */ width:98px; height:120px; margin-bottom:30px; border:1px solid black; background:#f0f0f0; }
*display:inline; zoom:1; is explained here. Suffice to say that it makes it work in IE7.
I also had to collapse whitespace in your HTML (why? read 1 and 2):
<ul>
<li></li><li></li><li></li><li></li><li></li>
</ul>
I'm having an odd top padding/margin in Firefox.
Given this HTML:
<ul>
<li><textarea>item 1</textarea></li>
<li><textarea>item 2</textarea></li>
<li><textarea>item 3</textarea></li>
<li><textarea>item 4</textarea></li>
</ul>
And this CSS:
ul
{
margin:0;
padding:0;
list-style:none;
border:1px solid black;
width:300px;
}
ul li
{
margin:0;
padding:0;
height:17px;
}
ul li textarea
{
margin:0;
padding:0;
border:1px solid black;
font-size:11px;
height:15px;
}
When the list renders, the first element is displayed with a small extra top-margin causing the textareas inside to overflow the list as seen here:
http://jsfiddle.net/asgerhallas/2fwJZ/
I do not have this issue in Chrome. Does anyone has an explanation and a way to get rid of it?
Add display: block to ul li textarea:
http://jsfiddle.net/2fwJZ/1/
Or, add vertical-align: top:
http://jsfiddle.net/2fwJZ/2/
The problem in this case is that Firefox defaults to vertical-align: text-bottom for textarea elements, whereas Chrome defaults to vertical-align: baseline.
you can all so add line-height:1; if you gust want a different
approach
I've tried everything from adding line-height, to changing the 'display' property to 'table-cell' to the li, but somehow i cant seem to get the images to be vertically aligned.
the css:
ul.columns { list-style: none; padding:25px }
ul.columns li {width:180px; height:180px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}
ul.columns li img {margin:auto; display:block;}
http://jsfiddle.net/Sdt8M/3/
appreciate the help guys...
Do those images need block display? If not, you can just give those lis a line-height:180px, and vertical-align:middle those images.
http://jsfiddle.net/Sdt8M/20/
Have a look at this example http://www.brunildo.org/test/img_center.html
hey try this..
Add padding-top:10px to ul.columns li
ul.columns { list-style: none; padding:25px }
ul.columns li {width:180px; height:180px; padding-top:10px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}
ul.columns li img {margin:auto; display:block;}
Hope it will help you.