Okay, so I'm writing CSS for a navigation bar that uses an un-ordered list to organize the menu. The menu is centered not pushed to any side, and the width of any given li element cannot be pre-determined (it varies with how much text is in the menu item), so I can't hardcode widths.
I have the following CSS code:
#nav ul {
list-style: none;
padding-bottom: 10px;
height:16px;
}
#nav ul li {
position: relative;
display: inline-block;
}
#nav {
position: relative;
margin-top: -30px;
text-align: center;
font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
font-size: 14px;
}
for the nav element, and this works perfectly to produce the centered nav-menu in Chrome 13. But when I view the page in IE8, the UL turns vertical and I can't get it to become horizontal.
So far, search results indicate that I need to float:left; or float:right; the <LI>s to make the menu horizontal. I've tried this and it does make the menu horizontal in IE8 but it will float to left or right. I need to center the menus, and apparently there is no float:center;.
The HTML corresponding to the menu is
<div id="nav">
<ul>
<li class="current_page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
</ul>
</div>
Is there any way without needing to know the width of the LIs or having to resort to JS to get the menu centered AND horizontal?
That code works fine in IE8, see for yourself:
http://jsfiddle.net/bEEEb/
It's probably not working for you because you're not in IE8 Mode (IE7 Mode or Quirks Mode are the alternatives).
Add a doctype as the very first line if you don't have one:
<!DOCTYPE html>
If you need this to also work in IE7 (in which inline-block only works with naturally inline elements by default), then replace display: inline-block with:
display: inline-block;
*display: inline;
zoom: 1;
..of course, if you can get away with display: inline, that's the simplest fix, but you should still work out why your page is not being displayed in IE8 Mode.
just use the following on your li:
display: inline;
Should get you the desire results.
IE doesn't support display: inline-block, use display: inline instead on you li element.
Related
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block
I am attempting a simple vertical navigation using the following HTML markup:
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Despite having display: block; on both the <li> and <a> elements, IE7 does not appear to respect the full width of the containing div. Any ideas on this one?
http://jsfiddle.net/6eKGL/
UPDATE
I now believe the issue is related to the position property of the container div and the fact that its width is to be determined by the content inside of the <a> elements.
Here is the updated fiddle with IE-7 issue solved. http://jsfiddle.net/6eKGL/35/
Demo: http://jsfiddle.net/6eKGL/35/embedded/result
CSS:
#ajax-search ul li a {
display: block;
/*min-width: 150px;*/ // Remove this rule and the IE-7 will start respecting the display block
padding: 9px 18px;
}
See below screenshot of IE-7
Setting overflow: hidden on the <li> element do the trick for me !
try adding a doctype to your html, preferrably html5 or xhtml 1.0 strict. that way, IE7 renders in standards mode and not use it's own box model.
also, use a css reset. google for "eric meyer reset".
references:
http://www.quirksmode.org/css/quirksmode.html
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://en.wikipedia.org/wiki/Quirks_mode
UPDATE:
see this fiddle: http://jsfiddle.net/6eKGL/23/
Set overflow:hidden for ul and some wide width for a
http://jsfiddle.net/sergeir82/N2thx/
Try after removing "min-width" from "#ajax-search ul li a { display: block; padding: 9px 18px; min-width: 150px; }"
I have the following html
<div id="menu">
<ul class="horizMenu">
<li id="active">About</li>
<li>Archive</li>
<li>Contact</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
and in the css I have
.horizMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu
{
text-align:center;
margin-bottom:10px;
letter-spacing:7px;
}
#menu a
{
color:red;
}
#menu a:hover
{
color:blue;
font-weight:bold;
}
Everything works pretty well, except that when I mouse over the links, the color changes and it becomes bold, which is what i want, but it also causes all of the other li elements to move slightly and then move back when you mouse-off. Is there an easy way to stop this from happening?
Not sure who -1ed, but Mauro's answer is essentially correct: you can't trivially make an item with automatic width depend on what the width would have been if the font inside weren't bold.
However, a 'float: left;' rule will also be necessary as you can't set the width of an inline-display element. And 'em' would probably be a better unit, to make the required width dependent on the font size in the buttons.
Add a width to the list item elements which is bigger than the bolded width of the items, this way they wont be pushed out of line.
#menu li
{
width: 150px;
}
Alternatively you could try a monospace font, which wont be affected by the bold/unbold on hover.
try using this
menutext {
line-height: 10px; /* or whatever */
}
and also, to set the width of a inline element, use display: inline-block;
float:left might be not so friendly, if you do use it and it messes things up use clear:both
I've just had the same problem. A solution I thought of, and might use from now on, is to use text-shadow instead.
a:hover {
color:blue;
text-shadow:0px 0px 1px blue;
}
The text will look a little blur though. If you set the 3rd parameter to 0, text won't be blur but will look just a little bit bolder.
I'd say this is better than dealing with width-dynamic texts.
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}