I've had this issue come up a few times and I'm totally lost.
Whenever I create border-bottom lines on ul li items, and if the li item is two lines, it ignores the padding, or eats into the padding.
How do you fix this?
See this line: tech: custom wordpress theme, because it drops on two lines it doesn't space evenly.
[Link] (http://natashamcdiarmid.com/nm_portfolio/3-oaks-landscaping/)
ul#portfolio-details li{
height:100%;
padding:8px 0 40px 0;
line-height:1.2em;
border-bottom:1px #f2f3f4 solid;
}
try this:
ul#portfolio-details li{
height:100%;
padding:8px 0 20px 0;
line-height:1.2em;
border-bottom:1px #f2f3f4 solid;
overflow: hidden;
}
It's because the lis are not wrapping around their floated contents. To fix that, add overflow: hidden:
li {overflow: hidden;}
Then you will probably want to reduce the margins/paddings a bit (which were in there for the wrong reasons).
Note, however, that it's invalid to have a div directly inside a ul. You need to have lis there instead.
Related
Fixed it! I have added a negative left margin to the gRow class equal to the width of the surrounding container (in my case 744px). It seems to work both in Chrome and IE. It doesn't work in my fiddle though :-?
I have an unordered list depicting a tree-like structure. Each li contains a div element with class="gRow". This div contains other divs with "cells" in a grid. I would like to add a border-bottom on each gRow (or li?) maintaining the padding-left on the li but at the same time having the border-bottom to be the same width for all li/gRows (the entire width of the container).
I'm adding new levels dynamically using Ajax and I don't know the depth of the structure.
This is how far I have gotten:
My css is like this
ul {margin: 0;padding: 0;list-style-type: none;}
li { padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; margin-left: -744px;}
Here's a jsFiddle: http://jsfiddle.net/kJQeq/
Hope you can help.
Thanks in advance.
Try setting the margin to 0 on the li as well.
ul {margin: 0;padding: 0;list-style-type: none;}
li { margin: 0; padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; }
I have added a negative left margin to the gRow class equal to the width of the surrounding container (in my case 744px). It seems to work both in Chrome and IE. It doesn't work in my fiddle though :-?
I'm trying to create this box, but it's a little over my head. I can't get the spacing after the white header text to display correctly.
The live version is here, and the current CSS is below. A standard < p > inside the div ignores the bottom padding on hblock and I can't help but think I'm going about this the wrong way. Is there a simpler way to create this element or something I'm missing in the code?
Many thanks.
#lheaderblock{display:block;
padding:0px 10px 0px 10px;
background-image:url('http://atlas.czg.net/atlas/wp-content/uploads/2012/12/caption_header_blue.gif');
height:160px;
width:90%;
border:1px solid #000000;
background-repeat:no-repeat;
overflow: hidden;}
hblock{position:absolute;
color:#FFFFFF;
font-size:14pt;
padding:10px 0px 20px 15px;}
I don't know what <hblock> is. When browsers don't know either, they will render them as inline element. You need to give it display: block and remove position: absolute. Tweak the padding and you'll be fine.
You can check the problem here: http://jsfiddle.net/gkJAd/4/
I have an unordered list in where every li will have a max-height of 2.25em (I want it to be at most 2 lines). The list-type should show normally, on the outside, aligned on the first line. I tried a few things all with its on issues:
If I add the hidden, height, etc, codes to the li instead of the a, the disc disappears;
If I change the a to be display: block instead of display: inline-block, it shows correctly on Firefox but wrongly everywhere else;
If I change the a to be display: inline it puts the disc at the right place, but, since it is not longer a block, the height is ignored. Anyone got an solution?
Sol
All you need to do is add vertical-align: top to your ul li a selector code.
Updated JSFiddle. Working in FF, Chrome, and IE8/9.
I think this is what you want.
Basically, I floated and then cleared the lis.
Then I gave the ul li as a display:inline-block and a height and made sure to use vertical-align:top;
ul{
margin: 5px 10px 5px 20px;
background:green;
height:250px;
}
ul li{
list-style-type:disc;
float:left;
clear:both;
}
ul li a{
background:green;
line-height:1.25em;
overflow: hidden;
display:inline-block;
height:2.25em;
vertical-align:top;
}
Example: http://jsfiddle.net/jasongennaro/gkJAd/6/
Tested and works in Chrome and FF
I played with this a bit, but it basically comes down to that overflow: hidden will hide the list markers as well. Here's what I came up with: http://jsfiddle.net/N3JGg/
Basically used the display type of list-item, then instead of declaring the discs on the outside, pulled them into the box with inside so the overflow wouldn't hide them. It doesn't give you the same, nice line that you had before, but you've got the markers displaying now.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to
I have set an image 32x32px as a list style image like this:
.class li{
list-style-image:url(../images/site/img.png);
}
It works great but the problem is the text is on the bottom of the list item (because the image is 32px high the list item is also 32px high). I would like to have the text vertically centered so it looks good.
I tried:
.class li{
line-height:1em;
}
But that didn't help.
You can use the vertical-align property to specify centered alignment. Like so:
.class li {
vertical-align: middle;
}
The list-style-image tag should be applied to the list itself, and not the list item as you have. So it would be..
ul.class{
list-style-image:url(../images/site/img.png);
}
I find it rather difficult to get the image exactly to where I want when relying only on list-style to do the work.
Therefore I prefer placing the image as background inside the LI tag like so
ul {list-style-type:none}
ul li {list-style-type:none;
background:url(image.png) 1px 4px no-repeat;
margin:0;
padding-left:20px}
This results in the image being placed 1 pixel to the right and 4 pixels to the bottom measured from the top left corner of the area covered by the LI tag. margin:0 is required to avoid indentation of the LI contents, as we do this with the padding:20px to make room for the image to the left of the LI contents.
I tried all of the above and nothing worked so I did this
.coreUL li{
display:block;
list-style:none;
background-image:url(../images/factoryIcons.png);
background-repeat:no-repeat;
background-position:left 8px;
padding-top:10px;
padding-left:50px;
height:100px;
}
Now that works like a charm -- infact this also gives me more control on the exact place where i wanted to put my li images . The images I used were 32 X 32 px in size so I gave them a little extra padding by making that 50px;
i hope this helps.
Setting your line-height to the height of the element will align text vertically. So if you <li> height is 32px then set your line-height to 32px.
.class li { height:32px; line-height:32px; list-style-image:url(img.png); }
#mindmyweb, yes indeed your solution works. But your example was a bit too decorated with 100px high lines, so here is a more modest example.
The image should be a 20x20 png bullet, centered, wıth bevel etc, with 3px shadow edge area.
.post li, .page li {
background-image: url("images/bullet-square-big-red.png");
background-position: left 2px;
background-repeat: no-repeat;
list-style: none outside none;
margin-bottom: 12px;
padding-left: 25px;
padding-top: 0;
}
Works exactly same in firefox 24, chrome 30, ie>=7.