I have a menubar made of li elements, each floating left to have them side-by-side.
This works on on most brwsers but not on my customer's firefox (mac version 26)
the li are a bit larger making them overflow at the end of the line (10px together probably)
Any idea why? I have a css reset and margin and padding are set to a value.
this is html:
<ul id="menu">
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=projets-realisations">projets-realisations</a>
<ul class="subMenu">
<li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&page=projets-realisations-en-resume">En résumé</a></li>
<li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&page=projets-realisations-az">De A à Z</a></li>
</ul>
</li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=portes-parquets-escaliers">Portes-parquets-escaliers</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=cuisines-salles-de-bain">cuisines-salles de bain</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=decoration-tentures">decoration-tentures</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=de-ville-en-ville">de ville en ville</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=espace-animalier">espace animalier</a> </li>
</ul>
css:
.menuItem {float:left; cursor: default; position: relative; margin-left:4px; padding:0px; margin-right:0px;}
.menuItem:last-child {margin-right:-50px;}
.menuItemLink {line-height: 20px; color: #ffffff; text-transform: uppercase; font-size: 13px; padding-left:5px; padding-right: 5px; text-decoration: none;}
The margin-right -50 is just to mae sure the last elements doesn't goes on a new line...
Why is it miscalculated by his firefox? The strangest thing is I tried the same firefox version on a mac (different osversion) and don't have this issue.
You need to increase the right margin for menuItem
margin-right: 15px;
You can check the http://jsfiddle.net/raunakkathuria/vRns2/
If you don't need the list style add to .menu
list-style-type: none;
and display: inline-block to .menuItem then you don't have to play with margin
Tried all your suggestions, but didn't worked, after all replaced all paddings by combined margins, now everything is ok
Related
What I'm trying...
I'm trying to make a menu with a hover effect. If you hover a link, it's background-color should change. If you go to the next one, it should change smoothly to the next link.
Problem
When you hover over one link and then go to the next one, there is a small gap between the elements. If your mouse is at that exact spot, nothing happens.
Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 21px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
Not Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 20px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
My observation
If you change the font-size just by one pixel, it works. If I use IE it works in both examples, but in Chrome only the Working One works :D
What I'm asking for...
Is this a Chrome bug or is there a possibility to make the 'not working one' work.
It's actually an interesting question. The "issue" is caused by the browser CSS that is reading the display:inline; of the a tag, and not having it fill the entire display:block; of the li tag.
You can fix this by using the following CSS rule
.menu-item a {
display:block;
}
Add display: block to the links. The link is smaller than the li
Remove the font-size and line-height from the menu-item, style the link directly. This behaviour most likely comes from rounding errors.
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex
I have a <ul> list on my website that contains some sub menus. It is structured in this way:
<div id="cssmenu">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>RNG</span></a>
<ul>
<li><a href='#'><span>menu 1</span></a></li>
<li><a href='#'><span>menu 1</span></a></li>
<li class='last'><a href='#'><span>menu 1</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Altro</span></a>
<ul>
<li><a href='#'><span>kldajofa</span></a></li>
<li class='last'><a href='#'><span>Altro12</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
I have 4 <li> as you can see and I'd like to see them center-aligned with the width of the screen, but I don't know how to do it.
You can see a fiddle here that contains the CSS too. How can center align the names I have on my menu?
Assuming there are only 4 li - as in the example, set width:25%.
Working jsFiddle here
#cssmenu li {
float: left;
padding: 0px;
width: 25%;
}
I made a minor update so that the sub-nav menu items are also 25%..
jsFiddle here
There were set to width:225px;.
#cssmenu li ul {
width: 25%;
}
Considering you have only 4 menu items, you just need to add :
#cssmenu > ul > li { width:25%; }
This will set the width of the list items to 25%. And since the a are set to be displayed as blocks, they will fit the whole width of the li.
Note that we are using the direct child selector > because we don't want this effect to be applied to the menu lis inside the sub-menu. We only need that effect on the root level.
Other possible solution is to use flexbox which isn't well supported yet and cannot be used without polyfill.
If the li are display:inline-block you can apply text-align:center to the ul and the list items will center regardless of the number (provided there is room on the line).
The good news is that there are no clearing issues.
JSFiddle
I've just added width to li and it works now.
Check JsFiddle
#cssmenu li a {
background: #0D0D0D bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
width:70px;
}
I have a vertical UL list on a html page, with a sublist inside of it. At the end of the sublist, it has an unwanted gap, like a linebreak, though I can't seem to find anything in my css or html that would cause it (and my attempts at trying to get it to go away aren't working very well).
Here's what it looks like;
1. Item
2. Item
1. Sub Item
2. Sub Item
3. Item
4. Item
My html code:
<ul class="fic">
<li class="fic"><a href="">item</li>
<li class="fic"><a href="">item
<ul class="fic">
<li class="fic">item</li>
<li class="fic">item</li>
</ul>
</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item
<ul class="fic">
<li class="fic">item</li>
</ul></li>
</ul>
And my css code that I was trying to use;
.fic ul {
padding: 0px;
margin: 0px;
}
And since my template came with menu code for the ul used in the navigation bar, here's that;
#menu ul {
display: block;
width: 778px;
margin: 0em auto;
list-style: none;
padding-left: 2.5em;
}
#menu li {
display: inline;
}
#menu li a {
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
}
#menu li a:hover {
background: #342117 url('images/hover.gif') top left repeat-x;
color: #fffdc6;
}
html code for navigation menu;
<div id="menu">
<ul>
<li class="first">Home</li>
<li>Fan Art</li>
<li>Fan Fiction</li>
<li>Fan Videos</li>
<li>Other</li>
<li>Forum</li>
</ul>
</div>
Help would be appreciated, thank you.
The menu styles are the culprit, need full code
For some reason my menu items keep having some spacing left and right between the menu items..! While I'm kind of sure I havent programmed this..?
Anyone know why there is like 3 pixels spacing between my menu items?
http://jsfiddle.net/skunheal/ceFSJ/
HTML:
<div id="menu">
<ul id="nav">
<li class="page_item page-item-13">
Contact
</li>
<li class="page_item page-item-5 current_page_item">
Home
</li>
<li class="page_item page-item-7">
Nieuws
</li>
</ul>
</div>
CSS:
#nav, #subNav {
list-style: none;
padding-left: 0px;
margin: 0px;
}
#nav li, #subNav li {
display: inline;
padding:0px;
}
/* Currently selected page nav item (and parent) if applicable */
.current_page_item a,
.current_page_parent a {
text-decoration: none;
font-family:futura;;
color:#CCC;
}
.page_item a{
text-decoration: none;
font-family:futura;;
color:#FFFFFF;
display:inline-block;
background:#00C;
line-height:30px;
width:120px;
height:30px;
}
#menu{
height:30px;
text-align:center;
}
Thanx in advance,
Greetings,
Merijn!
You've set the display of lis to inline. So, the spaces between your li tags (the line-breaks and indentions) behave like spaces between words. Just remove the spaces and make it like this:
<div id="menu">
<ul id="nav">
<li class="page_item page-item-13">Contact</li><li class="page_item page-item-5 current_page_item">Home</li><li class="page_item page-item-7">Nieuws</li>
</ul>
</div>
You can also fix it with setting font size of ul to zero and setting it again on lis.
Try removing all the white space from between the <ul> and <li> items.
Either have them in a single line, or split over the lines like this...
<ul id="nav"><li class="page_item page-item-13">Contact</li
><li class="page_item page-item-5 current_page_item">Home</li
><li class="page_item page-item-7">Nieuws</li
></ul>
Update
Based on your JSFiddle... here is the same fiddle with the white space removed