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.
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 am attempting to make a drop down menu go to the right with HTML and CSS, I have the example here:
http://codepen.io/anon/pen/RNLmvq
Here is a screenshot of what it looks like without the text from codepen.
http://s22.postimg.org/bd5sc51ap/sidebar.jpg
If there is any other additional information you need from me, please ask.
Thanks
I have looked at your code but the answer seemed quite clear, not sure if it's what will be the right answer but I've modified it to work for what you've described. If it's not what you're looking for please describe more details about your site needs.
http://codepen.io/anon/pen/KwXjaa
I've changed your aside css to 'float:right' from 'float:left'.
aside
{
float: right;
width: 164px;
margin: 12px 0px 0px 0px;
padding: 0px;
border-right: thin dashed #2446ff;
/*background-color: #ff0000;*/
}
update
I've cleaned up your HTML and re-arranged where the placement of the class 'Schedule' was to be put.
http://codepen.io/anon/pen/KwXjaa
in your HTML I've placed 'Schedule' class onto the li.
CSS now for schedule is as follows:
.Schedule ul li{
display:none;
}
.Schedule:hover > ul {
position:absolute;
top:36px;
left:168px;
background:blue;
display:block;
}
.Schedule:hover > ul li {
position:relative;
background:blue;
display:block;
}
I've cleared out most of your other CSS you had in there before, wanted to provide you with a clean html/css snippets so you see exactly what you may need to include when you integrate.
What's happening in the above is your 'Schedule' class is on an li, the class is telling all the ul's with li's below that li that has 'Schedule' assigned to it, that they're to display none.
When you hover over schedule, the ul's that the browser finds that are layered under 'Schedule', will display block again and have absolute positioning.
I then made it so that 'Schedule' class on hover of first ul li sets the li's to relative positioning(otherwise all li children will stack ontop of each other which you don't want) and set display to block so they're visible again.
(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 a css driven dropdown menu, and in Chrome when I hover over the last option the whole thing jumps to the left slightly. I assume it's because the dropdown menu is adding to the overall width of the main list even though it's styled to float. Is there any way to fix this? (it's not doing it in firefox interestingly)
I've noticed by using webdeveloper to outline elements that the last li appears to get wider when it's hovered, but none of the others do.
the applicable sourcecode is here:
http://jsfiddle.net/WsAEW/
It worked for me changing this:
#menu ul li {
display: inline;
position: relative;
}
to this:
#menu ul li {
display: inline-block;
position: relative;
}
Here is a modified jsfiddle. I think the issue is fixed. Give it a try.
http://jsfiddle.net/WsAEW/5/
BTW, I only changed the following style. The 'float left' gets the elements to line up horizontally and the 'display: block' gets the top element to size to include the drop down menu.
#menu ul li {
float: left;
display: block;
position: relative;
}
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