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>
Related
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;
I have border-bottom on my li's but I have padding-left:10px on my ul so it nudges everything to the right by 10px.
I'm wondering if its possible to knock the border back over to the left? or is this not possible as the border is a part of the ul?
html
<ul class="menuoptions">
<li>Home</li>
<li>Firewalls</li>
<li>SSL VPN Encryption</li>
<li>Security In Education</li>
<li>Wireless Access Points</li>
</ul>
CSS
.menuoptions {
position:relative;
height:30px;
width:225px;
color:#666;
line-height:40px;
font-weight:bold;
padding-left:10px;
margin-top:-10px;
top:10px;
list-style:none;
}
.menuoptions li {
border-bottom:solid 1px #ccc;
}
Fiddle
You're applying this padding to your ul but not to the li elements. Firstly you need to reset the padding of the ul to 0 (as most browsers apply padding-left to the ul element by default):
.menuoptions {
...
padding: 0;
}
Then give the padding-left to your li elements:
.menuoptions li {
...
padding-left: 10px;
}
Working JSFiddle demo.
It is a part of the ul, however you could use margin-left:10px instead of padding (as long as it is a block element) and remove that part of the border.
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 have the following CSS Menu with float:left; how could I make this center. Where do I add margin:0 auto?
CSS:
/* === 7. Navigation === */
#nav{
width:100%;
margin:30px auto;
}
.ie7 #nav{
padding:10px 0 0 30px;
}
#nav ul li{
margin:0 auto;
}
#nav li{
float:left;
text-align:center;
list-style:none;
font-weight:bold;
}
#nav li a{
margin-right:30px;
text-decoration:none;
color:#5d5e5d;
}
#nav li a:hover{
text-decoration:underline;
}
#nav li a:active{
font-family:inherit;
font-size:inherit;
color:#fff;
}
HTML:
<ul id="nav"><!--Navigation-->
<li id="homenav">Home</li>
<li id="portfolionav">Portfolio</li>
<li id="contactnav">Contact</li>
</ul>
If you don't have an specified width to center your menu you can just declare your list items as display:inline-block instead of float:left and jut set the text-align property to center, like so:
CSS
#nav > li {
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
list-style:none;
font-weight:bold;
}
#nav {
text-align:center;
}
This way your menu will center regardless of a width.
Add display property of your #nav as table and margin for both left and right auto.
#nav{
display:table;
margin-left:auto;
margin-right:auto;
}
First your #nav element needs to have a width less than 100%. Then add "margin:0 auto" and it should center.
Take a look at this article. It works for me when ever I am having centering issues. Its also cross-browser compatible.
Inside #nav {...};. Be aware that your nav needs a fixed-width in order for this to work.
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