It shows in firefox,but no in IE(in fact mine is IE6)
<style type="text/css">
li { list-style-type:disc; }
</style>
<div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;">
<ul style="margin: 0; padding: 0; text-align: left; list-style-position: outside; overflow: visible;">
<li ><em>test.</em> 111</li>
<li><em>test.</em> 2</li>
</ul>
</div>
Can take a look here:link text
EDIT
All requirements:
1.remain the parent div with width fixed.
2.must make <ul> text-align:left;
3.show the bullets
Try messing with the margin/padding on the ul and give layout to the lis possibly?
ul { margin:0 0 0 10px; padding:0 0 0 10px; }
ul li { zoom:1; }
I forget which one IE cares about but it needs enough space to show them.
The left edge of lists is always at the text, not the bullet points. In other words, the bullet points are outside the list's bounding box, which makes them disappear for some reason in IE.
Add some left-padding to the list (at least 20px should do it).
I think you also want to add a doctype to the page - on your example page the list should be centrally aligned, but it isn't for me (in IE8) because IE is in quirks mode.
because of the CSS width attribute.
I suggest you set the width attribute to the li tag instead of the ul
Edit
list-style-position: outside; can make the same problem happen on Firefox
You will have to find another way to style the list, but if you insist on list-style-position: outside; you can use javascript to set the width attribute in the suitable place.
i know it`s old style but this should work
<li type="disc">... </li>
it might work.. ie has a lot of problem with css.. problems that will be fixed..
Related
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
I have a JSFiddle that I've made here:
http://jsfiddle.net/agzF5/
If you hover over the menu items that aren't the first of type you'll notice there is some strange margin appearing after where the border would be if it were set, I was wondering as to how I can remove that?
Matt
JSFiddle here
You had your list items as display:inline-block;
I've floated them left, added display:block; and changed some properties on the wrapping element. so it still contains the floated elements, see below.
#menuNav-ul {
background: lightgrey repeat-x;
list-style-type: none;
padding: 0;
margin: 0;
border-bottom: 2px solid darkgrey;
display:block;
overflow:hidden;
}
#menuNav-ul li {
display: block;
border-right: 1px solid #bfbfbf;
margin: 0px;
padding: 0px;
float:left;
}
add
html, body{margin:0;}
to the top, body alone should probably work as well..
Others have answered with good solutions.
I wanted to leave this here in case it helps someone though.
The reason for this is that there is whitespace in your markup (totally fine), which inline-block renders as spaces.
If you are working with inline-block elements, you can to set the font-size of the parent to 0, then explicitly set the font-size of the child elements as a workaround for this.
You're setting your LI elements to be display:inline-block which means they will have a inline whitespace space between them (usually ~4px).
3 solutions:
1. LIVE DEMO
add font-size:0; to the UL
reset the font size to px for the LI elements
2. don't add display:inline-block; but float:left; your LI elements
3. (not recommended) add a -4px margin-left to your LI elements
P.S: an additional suggestion is not to style (colors, borders etc) you LI elements. Treat them like simple positioned containers for your styled <a> elements.
Well the simple solution is to add comment between your li items:
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li><!--
--><li>Page 1</li><!--
--><li>Page 2</li>
</ul>
</div>
Check it in action: http://jsfiddle.net/agzF5/7/
My webpage I'm building has a right aligned unordered list nav menu, and I want the bullets to align with one another to the left of the menu. I was able to accomplish this in Chrome and IE by putting the list inside its own DIV; the bullets are displayed outside the div,so I can control their distance from the list by changing the DIV width. In Firefox, however, the bullets are displayed inside the DIV, and I do not appear to have a way to control them.
See the difference here:
http://s106.photobucket.com/user/El_Ornitorrinco/media/fftrouble.png.html
What's with the discrepancy? Is there a simple solution, or do I need a completely different approach? Thanks for your time.
Ricky
Used to this Code
Define you a tag display:block; and text-align:right; as like this
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
Css
ul li, ul{
list-style:square;
}
ul{
width:400px;
}
li a{display:block;text-align:right;}
Live Demo
Is this what you are looking for?
<ul>
<li>Milk></li>
<li>Eggs></li>
<li>Cheese></li>
<li>Vegetables></li>
<li>Fruit></li>
</ul>
CSS goes here
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}
li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}
If not then please create fiddle for it.
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
I've got a simple floated horizontal list that is looking good in IE and Opera, but Firefox has extra padding or margin at the top that I don't know how to fix.. It looked fine until I had to add a display:inline to an image link next to it because of another issue, so I think it's something to do with the display attribute.. any ideas? I've been trying to figure this out for the past eight hours.
#header {
background: url(../Images/header_bkg.png) repeat-x;
width: 800px;
height: 125px;
position: relative;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#header li {
float: left;
padding: 0 6px 0 0;
margin: 0;
}
#header a, #header a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .7em;
color: #333333;
text-decoration: none;
padding: 2px;
display: block;
}
#header a:hover {
font-size: .7em;
color: #FFFFFF;
background: #DCAD33;
text-decoration: none;
display: block;
}
<div id="header">
<img src="../Images/right_header_bar.png" style="float:right" />
<img src="../Images/Scofield_logo.png" style="float:left; padding: 0 0 0 20px" />
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>RARITIES</li>
<li>CUSTOM</li>
<li>TRADE</li>
<li>COMPANY</li>
<li>PRESS</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
I fixed this problem by clearing floats and adding a non-breaking space...
first, in CSS file, I created <br /> using:
#clear_floats {clear:both;}
Then, in my code, just before my new floated elements:
<div id="clear_floats"> </div>
Worked for me. Hope this helps.
I don't see it, given the code above. More complete test case?
In general, when you are mixing floated content and inline flow content, you have to put the right-floated content before the flow content or it tends to jump down to the next text line below the one you're currently writing on. This affects IE worse than it does Firefox though.
Solved the problem I was having, it may fix yours. My right float had the extra space at the top even though both side by side divs had the same h1 tag. To solve it I simply added zero top padding and zero top margin to the h1 that was in the float, thus making it equally flushed at top with the h1 on the left non floated.
Perhaps adding some zero padding and margin to your UL or LI's will solve yours.
I had to make two changes to get all those browsers to look equal:
body
{
margin: 8px;
}
This made the browsers margin to align, each browser has its own default margin that you preemptively should reset before starting your coding, since I dont have the rest of your code this could be the issue.
Also, instead of the display: inline
<a href="../index.html" style="background: none; float: left">
I dont think that is what he has encountered. Found this post with a similar issue.
if you take a float:right for example and place it above the next div in theory they should be side by side. Now add a h1 tag or something to both of those divs and you will see that in firefox the float:right div will have double padding or extra padding above it. This exists even if you place margins and paddings at zero.
e.g.
< div style="float:right:margin:0;padding:0;width:280px;">
< h1>Head Right< / h1>
< /div>
< div style="margin:0;padding:0;width:300;">
< h1>Head Left< /h1>
< /div>
what odd is that you can add a border around the div thats not floated (left my example) and set it to 1px solid white so its not visually visable and it will negate that extra space.... I cant figure out why its there. I even tried adding a width to the left non floated div and still got the space.