Check this link!
I am having the hardest time trying to figure out why my last li item is being pushed to the bottom in IE. I have the width, height set for the container. The li has padding/margin to 0. Li is float left. Still being pushed down. Seeking a Guru to help a n00b here.
Try putting margin:0 to the ul rule ..
The automatic margin the IE assigns, decreases the width available to contain the floated elements, and so they wrap ...
Your example page is completely invalid. Try adding a doctype, html, head and body tags and try again.
(Having said that, it looks fine in IE.)
Float the LIs, don't make them inline.
#widget_container ul {
padding:0;
list-style-type:none;
}
#widget_container ul li {
padding:0;
margin:0;
float:left;
}
Related
I want to show the content of my Mega-menu also within the page. I duplicated the CSS styles but it seems that I still miss a rule because the border of the UL with id="wrongBorder_because_of_no_Height" does not show around the whole UL, probably because the UL height is 0
sample page - http://www.teddicom.com/test_07_ul_border_stack_overflow.htm
[compare the border of the floating menu of family 2, and the border of the UL in the page]
What is setting the height of horizontal ul to zero?
How can I show the border properly?
Add overflow:hidden or overflow:auto to your class
#wrongBorder_because_of_no_Height
{
overflow:hidden;
}
The reason why this works is because by setting the overflow property to a value which is not visible - this triggers a block formatting context.
Check out this post for a full explanation.
Add this to your CSS:
.menuInPage ul
{
height: 200px;
}
You are floating the li elements left. Parent elements, the ul, are never to expand to contain floated children.
Haven't checked to see if this is what you want but either remove the float or try overflow:auto.
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.
I have a weird li issue I just can't figure out. I have an image set for the li on this page's content, but it's not against the text but behind the image! Confused on how to solve this. Any help would be greatly appreciated.
http://staging.liquor.com/wind-at-your-back/
Add
overflow: hidden;
to the #single_content ul. (overflow: auto will also work). If it needs to work in IE6 too, make sure the list has layout (e.g. by adding zoom: 1).
The lines inside a block box following a float are pushed aside by the floated element. But the block box itself doesn't move, keeping the background images at its left edge, covered by the floating element.
You can stop the block box from overlapping a float by having it establish a new block formatting context. One way to do that is to set the overflow property. That forces the entire list next to the float, instead of just pushing its text aside.
See the CSS2 specification section about floats for more details.
The background images of your list are behind the cocktail image. You could either make the list floating right like this
#single_content ul {
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
width:280px;
}
or give the lis a margin-left of your image's width+margin like so
#single_content ul li {
background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
margin:0 0 0 310px;
padding:0 0 3px 15px;
}
to make the reappear behind the floating image.
To get the background images to show up from outside of the image you can add a margin to the style
add
margin:0 0 0 ~300px;
to
#single_content ul li
Immediate solution is to add the following rule to #single_content ul
margin: 0 0 0 295px;
I don't like that because it's fairly absolute, though your site looks glued together well and it shouldn't hurt. I'll look for something more elegant, and if I find it, post it here.
EDIT 1: Not much better, but you could add the following rule to the li elements instead:
background-position: 295px 0;
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.