On this page: http://catonthecouchproductions.com/fish/boat-captain.html I have a list on the bottom right box in yellow, but it is not displaying as a list-style-type:circle, but i have it set in my CSS.
I am not sure why it is acting this way. Any ideas?
I have FireBug installed and it doesn't seem like anything is conflicting with it.
You need to add a left-margin to li to get them to show up.
ul li { margin-left: 10px; }
should do it
You haven't left any space for the circle to display - try margin:1px 10px; on the ul li instead
list-style-type:circle; should be defined for the ul and not the li.
Add a padding to the ul element that has been reset by reset.css.
Another detail, that I saw: your <ul> element has list-style-type:disc; and the <li> elements list-style-type:circle;. This property should only be declared for the <ul> element.
I had the same problem, when floating li.
As soon as I removed float from li element, the circles in ul showed up in IE7.
Related
I'm making a dropdown menu, but all the styles from the first ul is being added to the styles on every ul beneath the first ul.
I've tried overriding the styles using !important, and moving the css to different levels.
Anyone got a clue about whats going on here?
This image probaly explains it the best way: http://screencast.com/t/UrkRbjjaYctp
Thanks.
#menuwrapper > ul{
padding-left:37px;
}
#menuwrapper ul ul {
padding-left:40px;
}
This should solve your issue
This is expected behavior. Paddings are added relatively.
If you don't want the nested ul to be padded 37px you have to remove the padding from parent ul (or use some hack as negative margin e.g. margin-left: -37px).
If you remove padding from the parent you will probably need to add some margin to each its child to preserve the layout. I'd suggest to reconsider the HTML structure.
I have a UL > li's in my html, and the li's are set to float: left.
My doubt is how to separate them, inside a father div, equally, so that doesn't matter how many li's are in the ul, they still have the same spacing between them?
If li's are not 'good' to do that, what is better?
As per I understand is better you can write like this:
li + li{
margin-left:10px;
}
You can also use display:table property for this. Write like this:
ul{
display:table;
width:100%
}
li{
display:table-cell;
}
You may set a border to the ul and set a margin to child lis. Or you may set border both to ul and lis. The reason for parent border is, when lis merge, they will combine their borders creating a double border where they meet.
Here is a Live Demo showing both methods.
The footer in the folowing site contains a sitemap:
http://www.openawards.org.uk/
It doesn't look right in IE and I can't figure it out can anyone
Remove float:left from #explore ul li a
The problem is with your float left for the a tags. Try looking at the before pseudo selector such as ...
#explore ul li a:before {
clear: left;
}
It looks like IE is having a problem with the width of your lis, so it is not clearing the shorter links.
Set a width to the lis and it should work.
Can someone take a look at this menu http://www.abmoldremediationnj.com/3 and let me know how to vertically align links in drop down? If you need me to post a code here I could, and I know its very messy.. Thanks in advance!
The problem is your line-height rule for #menus ul li a which targets links in drop down too. So 45px line-height in a 26px height parent can't be rendered fine.
Change line-height for links in drop down with #menus ul ul a eg.
in your #menus ul li ul li remove height:26px;
I tried to create a drop down menu. That's what I did so far:
http://gegensinn.org/test.html
(I made the drop down menu visible at all time for "debugging")
I think the problem is quite obvious: The menu is behind the text.
First I thought I could fix this with z-index.
Although I'm not quite sure which element has to get the z-index property.
I tried to set the whole menu to z-index:100; and at the same time set the z-index:1; of .main.
Afterwards I tried to set only the z-index of <li> and <a> but nothing worked.
add position:relative on #header :)
I think applying z-index like so should work.
CSS
#menu a
{
z-index: 100;
}
#menu ul li ul
{
position: absolute;
}
#main
{
z-index: 10;
}
Some browsers ignore z-index if it is not set on both elements in question.
add position relative to li and position absolute to sub ul and then z-index
For anyone else with this issue, just add !important and the z-index to the menu/header area:
position:relative !important;z-index:999