So I have an unordered list with 7 items in it, they are displayed as inline and inside of the li there are empty anchor tags (I really need them to be empty and anchor tags).
Here's a link http://jsfiddle.net/FTHMf/2/.
Chrome only displays 6 of them, and I wonder why, firefox seems to display all 7.
Also, I don't want to use inline-block for various reasons.
Is there any way to fix this? What causes the problem?
Thank you!
HTML
<ul class="john">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
.john {
width:100%;
text-align:center;
}
.john li {
display:inline;
}
.john li a {
background-color:green;
line-height:0px;
font-size:0px;
padding:6px;
margin:0px 2px 0px 2px;
}
Chrome is not displaying the first element for whatever reason. Here is a that will not affect your HTML/layout in any way but beats me why is it happening - looks like a bug most definitely.
.john li:first-child a:after { position: absolute; content: ""; }
http://jsfiddle.net/chrisdanek/xW2e2/
#user1128245 Use this
.john li {
float:left;
}
Related
ok the code is listed below, and when I adjust the css as follows:
.Nav {
color:red;
float:left;
display:inline;}
It wont display inline? What Am I doing wrong? Im sure this is a stupid question.
<head></head>
<body>
<div class="Nav">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</body>
dont use float and dislay inline at the same time just use `
display:inline-block;
and it will work perfectly fine
i would also recommend you to read this article, it's a short article but helps a lot
click this to read the article
atleast it did help me a lot and cleared my concepts of float and display
It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:
.Nav li{
display:inline;
}
Here is a jsfiddle example
.Nav ul li{
color:red;
display:inline;}
You can put display: inline on li elements, all they will be on a unique line.
As you can see here: http://jsfiddle.net/b31krn9b/
CSS:
.Nav {
color:red;
float:left;
}
.Nav li {
display:inline;
}
Another ways to align:
Using float: http://jsfiddle.net/b31krn9b/1/
Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/
The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.
You need to set it on the li elements:
CSS
div.nav ul li {
float: left; /* All li elements inside the div.nav are floated to left... */
display: inline; /* ...and displayed inline – but it does not make sence,
since a floating element cannot be inline. */
}
HTML
<div class="nav">
<ul>
<li>Home</li>
...
The title probably doesn't actually describe the issue properly. I want to create a menu for my website that is a vertical menu on the left side, and when you hover over an option with sub-options those sub-options pop out to the side (doesn't really matter at the moment). The issue I'm having is that when they pop out they push down all the other options, and I get this navigation bar that doesn't look good at all. If someone could help me fix this so I don't shove everything else out of the way even though they aren't overlapping, that would be appreciated.
The HTML I use.
<ul id="nav">
<li>Work</li>
<li>Imaging
<ul>
<li>Photoshop
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Illustrator</li>
</ul>
</li>
<li>Home</li>
The CSS I use.
ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
position: relative;
float: left;
}
Thanks in advance if someone can help me with this.
that is because your document is having all the elements in a line and will always show them one after the other!
So my advice for you would be to just use
position: absolute;
This way you can align the elements over the document without interefering the current document style and element alignment!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I would position the ul inside your li absolute.
position:absolute;
When you do this the element will hover above the li-parent. When you try a little with positive and negative margin you will be able to put the hover element next to it parent.
It will be something like this:
#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}
I'm busy with the design of a Bigcommerce website and have found a css syntax problem with list items and their respective backgrounds.
The List item headings and the list items themselves are generated from a database. Here's what my code looks like :
.Left #SideCategoryList ul li:first-child a {
background-image:url("hiddenurl/product_images/uploaded_images/cat-types.png") !important;
padding-left:10px;
padding-top:25px;
}
.Left #SideCategoryList ul li:nth-child(2) a {
background-image:url("hiddenurl/product_images/uploaded_images/cat-collections.png") !important;
padding-left:10px;
padding-top:36px;
}
.Left #SideCategoryList ul li:nth-child(3) a {
background-image:url("hiddenurl/product_images/uploaded_images/cat-themes.png") !important;
padding-left:10px;
padding-top:17px;
}
These images display perfectly as the headers' backgrounds of my list items.
However these backgrounds are then added to the subsequent ul list items which I cant seem to remove.
I have tried to force the subsequent list items to have no background with the following:
.Left #SideCategoryList ul li ul li a {
background-image:none !important;
}
But they still won't go away.
Do you guys have any Idea how I can either recode the list item's backgrounds or to force the rest of the list items so these backgrounds only appear on the "outer" Ul's list item headings?
Any help would be appreciated.
Edit I'm removing my url for privacy concerns. The full http:\ url is in the original css.
Edit 2 For Clarity, the lists structures are laid out like this :
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
try this selector for your css:-
.Left #SideCategoryList > ul > li:first-child > a
'>' indicates immediate child so internal Ul,Li will not get affected
to me this is really weird, i have this menu:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.menu{text-align:right;}
div.menu ul{
list-style:none;
display:inline;
}
div.menu li{
position:relative;
display:inline;
background:#434343;
padding:8px 12px;
line-height: 32px;
margin:0;
border-left:1px #000 solid;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li></li>
<li> </li>
<li></li>
<li>Hi</li>
<li>Hello </li>
<li></li>
</ul>
</div>
</body>
</html>
i'm using the latest chrome and firefox 3.6 for testing
there are 6 li but only 5 are shown, a space inside the li causes it not to be rendered
if there's a text inside it causes a 4px space
"hi" has a space after, "hello " doesn't
adding anchors inside the li causes the same behaviour
<li>Link</li>
has a space after
<li>Link </li>
doesn't
adding
div.menu li a:after{content:" ";}
in the code would solve the problem apparently but if you look closely the elements will appear wider except the last one
any help?
thank you
div.menu{text-align:right;}
div.menu ul{
float:right;
...
}
div.menu li{
float:left;
...
}
Looks fine to me:
Fiddle: http://jsfiddle.net/maniator/hgde9/show/
Chrome About:
Google Chrome 18.0.1017.2 (Official Build 118867) dev-m
OS Windows
WebKit 535.19 (#105663)
JavaScript V8 3.8.7.1
Update:
Add:
float: right;
height: 32px;
To div.menu li
Fiddle: http://jsfiddle.net/maniator/hgde9/1/show/
The problem is with display:inline. Two inline elements next to each other have a space between them if there is wehitespace in the source. Or if there is a space inside one of the elements. Whitespace collapses, so the space in "Hello " is folded with the space after it and ends up inside the li, while there is no whitespace in the "Hi", only after.
there is white space in the html, remove that and the gap will go! as in try this html
<ul><li></li><li> </li><li></li><li>Hi</li><li>Hello </li><li></li></ul>
and all will be revealed! (its nothing to do with CSS!)
I have an issue where I have a set of href's floating next to each other. This looks fine in all browsers except the old IE versions in which the first link sits higher than all the other links.
CSS:
.google_pager
{
width:500px;
white-space:normal;
padding:20px 0 10px 0;
font-weight:bold;
font-size:1.1em;
overflow:auto;
}
.google_pager span
{
background-color:#6699C9 !important;
padding: 2px 6px;
color:#FFFFFF !important;
float:left;
height:0;
}
.google_pager a
{
padding: 2px 6px;
text-decoration:none;
float:left;
height:0;
}
A selected pager link becomes a span instead of a link.
All help is welcome!
I had this problem as well with PHP generated lists. Not sure if this is your exact problem, but ensure that your closing ul tag is on a new line. For example I used this line of code for my last li,
echo "<li><a href='#'>link</a></li>\n";
Sounds weird, but my problem looked the exact same as the example image you provided.
(P.S.) I realise this question was asked 6 months or so ago, but hopefully someone else will find this useful, as it was rather frustrating for me until I stumbled on the solution by accident!
Though I couldn't reproduce the issue without having your HTML, try applying display: block to .google_pager span and .google_pager a.
P.S. Also, any particular reason you are specifying zero height?
This is the best (being semantic) pattern for link lists. Follow this and they will work fine:
<div class="pages">
<ul>
<li>First</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>Last</li>
</ul>
</div>
CSS:
.pages ul, .pages li {
list-style=type:none;
padding:0;
margin:0
}
.pages li {
display:inline-block
}