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 :-?
Related
I am trying to left align a list inside a css grid. However, the text-align and setting the margins and padding don't seem to work. How can I left align the ul list. Codepen: https://codepen.io/centem/pen/oNvZLgP Thankyou.
ul {
list-style: none;
text-align: left;
}
li {
padding-left: 0;
margin-left: 0;
}
Use the below CSS
ul{
padding-left: 2%;
}
You can accordingly change the padding value depending upon the requirements.
Also if you want your list items completely aligned to the left, get rid of the following padding line under the .grid-page > div selector:
padding: 0px 20px;
To complete Not A Bot's answer (it's always good to know why something works), the reason behind your issue was the default padding of unordered lists.
UL Default CSS Values
These values are there to make lists look like written documents lists but obviously, that's not what we want in many cases.
Usually, margins and paddings of elements should be reset. In your case:
ul {
padding: 0;
}
should be enough, since you're already setting a padding for the container.
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.
(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.
my menu is working fine on the good browsers. The code is all valid (so far!). In IE though it looks like a staircase, each menu item is a few pixels down from it left neighbour. It should all be horizontal.
Please have a look here
alt text http://www.digiflipconcepts.com/images/bbdc-menu-anomaly.jpg
Apply display: inline to ul.menu li.
my first guess would be either padding or margin on your li elements. see if this helps:
li {
padding: 0;
margin: 0;
}
(spoke too soon, looks like you do have that in there)
on third glance, it looks like you're setting the following:
ul.menu li a {
display: block
padding: 11px 0 0;
}
see if removing that 11px padding helps