The image is pretty self explanatory. I can't get rid of those two pixels at the bottom of only one list element. I've inserted text-decoration:none and list-style-type none in every corner of the css with no results.
Reason?
http://s1089.photobucket.com/user/3Joez/media/disp_zps6fe2774c.jpg.html
#rightnav {
float:right;
width:65%;
height:50px;
/*border:2px solid #Df1;*/
}
#rightnav ul {
margin-left:9.5%;
/*border:1px solid #F30;*/
width:500px;
}
#rightnav ul li {
display:inline-block;
font-family:Times New Roman, Times, serif;
font-size:1.4em;
margin-left:2%;
margin-top:1.5%;
color:#FFF;
text-decoration:none ;
list-style:none;
list-style-type:none;
}
Pretty sure you have an <a> inside your <li>. Did you change the text decoration on that? Changing it on the <li> will probably not change the inner style because the UA CSS likely ties the underline style to the <a> tag.
#rightnav ul li a {
text-decoration:none;
}
Related
The following CSS code creates a NAV bar with some sample boxes within a container.
I was having problems with the Hover staying on so with some advice from here I included the extra code (second block of code down)
.dropdown>ul>li>a:hover {margin-bottom:20px;}
This extra code worked well
However it has had a side effect on my DIV boxleft in that in wont stay left - as I move the mouse across the NAV bar it moves with it......... I just want to keep DIV boxleft on the left hand side. Can you help? Many thanks.
/* Navigation Style */
.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; }
/* Basic List Styling (First/Base Level) */
.dropdown ul {padding:0; margin:0; list-style: none;}
.dropdown ul li {float:left; position:relative;}
.dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}
.dropdown>ul>li>a:hover {margin-bottom:20px;}
.dropdown ul li a:hover {color:#ffffff; background:#232323;}
/* Second Level Drop Down Menu */
.dropdown ul li ul {display: none;}
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;}
.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; }
.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}
/* Third Level Drop Down Menu */
.dropdown ul li:hover ul li ul {display: none;}
.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }
#container {
overflow:hidden;
background-color:yellow;
width:1250px;
padding 10px 10px 10px 10px;
border:1px solid #666666;
margin: 0 auto;
}
.boxleft {
float:left;
background-color:blue;
margin-top:30px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
width:600px;
border:1px solid #666666;
z-index:1;
}
EDIT
Fiddle here : - http://jsfiddle.net/LUzNm/
Rather than address this band-aid fix, let's address the root problem!
To begin, you don't need that margin-bottom: 20px thing. That was never the cause of your initial problem. Rather, it was due to the fact that your .dropdown bar is 40px in height, but your actual dropdowns are absolutely positioned at 41px from the top. If the browser registers a mouse event while the mouse is over that 1px gap, the dropdown will close.
Now, it seems like you want that 41px so a border: 1px solid #666666 on your .dropdown bar will appear. We can do that still, but we'll just be adding that border to your hover menu.
And finally, let's get some best practices going. Padding can be useful, but padding for this use case sucks. Its far easier and more accurate to instead use line-height to achieve the height and spacing in our <a> tags rather than padding, and it allows us to do away with the extra padding-top and padding-bottom declarations on your site title! By setting line-height to 40px, we immediately match the height of the .dropdown bar at all times (and if you're using something like LESS or SASS, it becomes a great variable to reuse).
With all that being said, here's the updated fiddle: http://jsfiddle.net/2r5Mz/
One more thing that I would also recommend doing is moving the entire .dropdown container out of #container. The reason for this is #container has overflow: hidden set, which can mean chopping off your dropdown if the content isn't of sufficient height. Simply moving this .dropdown out of that div solves the issue.
I have a nested span in a li element. I want the color of the li only to change when it is hovered over. However
#sortable li:hover:not(.ce){
background-color:#3f0;
cursor:pointer;
}
does not work. The li changes color when my cursor is over the span as well. How can I make the li only change color when it --and not the span-- is hovered over?
http://jsbin.com/alExeVO/16/edit
As your <span> is part of the <li> your code behaves as expected. A hack would be to add a hover to your span so it changes to the original color.
Give the span and the li their own hover features. Check it out.
SEE DEMO HERE
ul{
list-style-type:circle;
text-align:center;
}
ul li{
display:inline-block;
border:1px solid purple;
padding:20px;
}
ul li span{
font-size:2em;
}
ul li:hover{
background:orange;
}
ul li span:hover{
background:white;
color:black;
}
I have border-bottom on my li's but I have padding-left:10px on my ul so it nudges everything to the right by 10px.
I'm wondering if its possible to knock the border back over to the left? or is this not possible as the border is a part of the ul?
html
<ul class="menuoptions">
<li>Home</li>
<li>Firewalls</li>
<li>SSL VPN Encryption</li>
<li>Security In Education</li>
<li>Wireless Access Points</li>
</ul>
CSS
.menuoptions {
position:relative;
height:30px;
width:225px;
color:#666;
line-height:40px;
font-weight:bold;
padding-left:10px;
margin-top:-10px;
top:10px;
list-style:none;
}
.menuoptions li {
border-bottom:solid 1px #ccc;
}
Fiddle
You're applying this padding to your ul but not to the li elements. Firstly you need to reset the padding of the ul to 0 (as most browsers apply padding-left to the ul element by default):
.menuoptions {
...
padding: 0;
}
Then give the padding-left to your li elements:
.menuoptions li {
...
padding-left: 10px;
}
Working JSFiddle demo.
It is a part of the ul, however you could use margin-left:10px instead of padding (as long as it is a block element) and remove that part of the border.
I want to make simple list but have some problem. When i put some tekst in li element i want to set li width same like li text is..
And also I want when I hover over the li link, to change full li element background color,not just of A element..
This is my code..
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
#mid_left li {
width:auto;
background-color:red;
margin:10px 0;
padding:5px;
}
#mid_left li a:hover{
background-color:blue;
}
Example what i try to do is on page..(see footer)
http://buildinternet.com/2010/07/when-to-use-_session-vs-_cookie/
Why don't you just use Firebug to read their CSS?
#mid_left li:hover{
background-color:blue;
}
should take care of your question.
Applies to the a element when you hover over the li.
#mid_left li:hover a{
background-color:blue;
}
Applies to the li element when you hover over it.
#mid_left li:hover{
background-color:blue;
width:200px;
}
Here is a working jsfiddle which (I believe) fits with what you're trying to do. Don't mind the colors, they're for illustration only.
http://jsfiddle.net/qwdd8/1/
edit: updated to remove inline-block, setting width:auto. I forced a height to the LI, but there may be better ways for keeping them from overlapping.
For the width-problem, don't set a width to the ul-element, so change:
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
to
#mid_left ul{
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
I'm having an odd top padding/margin in Firefox.
Given this HTML:
<ul>
<li><textarea>item 1</textarea></li>
<li><textarea>item 2</textarea></li>
<li><textarea>item 3</textarea></li>
<li><textarea>item 4</textarea></li>
</ul>
And this CSS:
ul
{
margin:0;
padding:0;
list-style:none;
border:1px solid black;
width:300px;
}
ul li
{
margin:0;
padding:0;
height:17px;
}
ul li textarea
{
margin:0;
padding:0;
border:1px solid black;
font-size:11px;
height:15px;
}
When the list renders, the first element is displayed with a small extra top-margin causing the textareas inside to overflow the list as seen here:
http://jsfiddle.net/asgerhallas/2fwJZ/
I do not have this issue in Chrome. Does anyone has an explanation and a way to get rid of it?
Add display: block to ul li textarea:
http://jsfiddle.net/2fwJZ/1/
Or, add vertical-align: top:
http://jsfiddle.net/2fwJZ/2/
The problem in this case is that Firefox defaults to vertical-align: text-bottom for textarea elements, whereas Chrome defaults to vertical-align: baseline.
you can all so add line-height:1; if you gust want a different
approach