i have a big problem with a menue ONLY in IE8 - all other browsers work perfect:
There's an menue like this one:
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
and the CSS is this one:
ul li { padding-left: 23px; line-height: 29px; }
ul li:hover,
ul li.active { background: url(../images/bg_arrow_blue.png) no-repeat top left; }
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; }
ul li a:hover,
ul li a.active { border-bottom: 1px solid red; }
So now - in IE 8 i have the problem, that on mouseover the links jumps up and down on mouseout, because of the border-bottom i think. All other browsers do it right with border bottom and no jump.
I have googled a lot and not found a solution.
Hope anyone here can help!
Thank you so much.
Sascha
Okay,
for anyone who's interested - i have the solution:
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; padding-bottom: 1px; }
i just had to add a "padding-bottom: 1px;" to the "ul li a" statement.
Have a nice christmas.
Related
I'm working on a horizontal menu with a vertical submenu. I have most of the display features set the way I want, but I'm running into trouble with displaying the submenu items with the same width. I want to display them as a nice, even block, but I'm left with a jagged edge on the right side of the submenu.
Here's a snippet of the html I'm using for the menu itself.
<nav class="navbar">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >item with sub</a>
<ul>
<li><a href="#" >sub item 1</a></li>
<li><a href="#" >sub item 2 which is longer</a></li>
<li><a href="#" >sub item 3</a></li>
</ul>
I'm not sure which part of the css I'm using might be affecting the width of the dropdown menu, so here's everything.
.navbar {
font-size: 20px;
text-align: center;
position: relative;
z-index: 1;
white-space: nowrap;
}
.navbar a {
background-color: #333;
color: #999;
text-decoration: none;
}
.navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
.navbar li {
float: left;
position: relative;
min-width: 120px;
padding: 10px 10px 10px 10px;
background-color: #333;
color: #999;
}
.navbar li ul {
display: none;
position: absolute;
left: 0;
}
.navbar li > ul {
top: 42px;
left: 0px;
}
.navbar li:hover,
.navbar li:hover > a,
.navbar li a:hover{
background-color: #999;
color: #333;
text-decoration: none;
display: block;
}
.navbar li:hover ul,
.navbar li:hover ul li {
display: block;
clear: both;
min-width: 120px;
}
The fiddle is here: http://jsfiddle.net/jasotastic/yso6v2po/
Possible that this is a duplicate, but I haven't been able to find a similar question asked.
You could set 100% width to <li> to adjust with content width.
.navbar li ul li {
display: block;
width: 100%;
text-align: left;
}
Fiddle: http://jsfiddle.net/yso6v2po/4/
You can set a width to li and use white-space: normal. Then you will have a fixed width and break the phrase if it is bigger than the width.
Your code modified:
.navbar li ul li {
width:200px;
white-space:normal;
display: block;
}
Here is the jsfiddle: http://jsfiddle.net/yso6v2po/3/
I'm working on my first website (I'm a n00b) and on Safari and Chrome it looks exactly the way I want. However, in IE 8 the nav bar does not work at all. In Firefox, once you hover over one of the links it brings the drop down box down but it adds an extra pixel in between the main nav bar and the sub links.
My website's URL is: http://tonerleague.x10.mx/basketball.html
My HTML is...:
<div class="menu">
<nav>
<ul>
<li>Main
<ul>
<li>Advertise</li>
</ul>
</li>
<li>Test
<ul>
<li>Test</li>
<li>TestTest</li>
<li>TestTestTest</li>
</ul>
</li>
<li>Unknown
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li>Support</li>
<li>Forums</li>
</ul>
</nav>
</div>
My CSS is..:
.menu
{
left: 50%;
position: absolute;
top: 137px;
margin-left:-500px;
font-family:"Arial", Helvetica, sans-serif;
font-size: .875em;
font-weight: bold;
}
nav ul {
padding: 0;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover {
/*background:#C0C0C0; ** Firefox causes another extra pixel when activated*/
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover a {
color: #FFF;
}
nav ul li a {
display: block; padding: 5px 35px;
color: #FFF; text-decoration: none;
border-right: 0px solid #FFF;
-moz-border-radius: 0;
}
nav ul ul {
background-color: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li {
float: none;
border-top: 0px solid #FFF;
border-bottom: 0px solid #000;
border-right: 0px solid #000;
border-left: 0px solid #000;
position: relative;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li a {
padding: 5px 15px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #000000;
}
SELECT boxes are not typical HTML elements. They're closely tied to the OS and can be difficult to style, especially on IE8.
You may opt to wrap the SELECT in a DIV and set the overflow to contain the element, or use an IE8-speficic CSS declaration to tweak the size.
See: How does one target IE7 and IE8 with valid CSS?
Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.
Example:
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
I have a line below menu items when hovered.
It is a drop down menu, and i want to keep the line when i hover in the submenus.
Here is my code:
<nav id="primary_navigation">
<h1>Primary Navigation Menu</h1>
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li class="has-sub"><span>Services</span>
<ul>
<li><span>Service 1</span></li>
<li><span>Service 2</span></li>
</ul>
</li>
<li>Fees and Process</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Here is CSS:
nav#primary_navigation h1{
display: none;
text-align: center;
}
nav#primary_navigation {
margin-top: 15px;
margin-left: 100px;
font-family: 'Eraslght';
font-size: 18pt;
line-height: 20pt;
}
nav#primary_navigation ul {
list-style:none;
}
nav#primary_navigation ul li {
display: block;
float: left;
position: relative;
margin-left: 25px;
}
nav#primary_navigation ul li a:link, nav#primary_navigation ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
color: black;
}
/*1*/
nav#primary_navigation ul li:hover a{
display: block;
text-align: center;
text-decoration: none;
color: black;
}
nav#primary_navigation ul li a:hover, nav#primary_navigation ul li a:visited{
display: block;
text-align: center;
text-decoration: none;
color: black;
padding-bottom: 10px;
border-bottom: solid #000000;
}
nav#primary_navigation ul li a:active {
display: block;
text-align: center;
text-decoration: none;
color: black;
}
/*fin 1*/
nav#primary_navigation ul li:hover ul {
display: block;
background-color: #04E1BE;
}
nav#primary_navigation ul li ul {
margin: 0px;
list-style: none;
display: none;
position: absolute;
top: 40px;
left: -2px;
}
nav#primary_navigation ul li ul li {
width: 100px;
clear: left;
margin-left: -5px;
margin-top: 0px;
}
nav#primary_navigation ul li ul li a:link{
clear:left;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}
nav#primary_navigation ul li ul li:hover a, nav#primary_navigation ul li ul li a:active, nav#primary_navigation ul li ul li a:hover {
clear:left;
color: white;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}
Can anyone tell me a hint? i cant see where i should code what.
Thanks a lot.
As i have seen through it. You have given that padding-bottom property to li a:hover or visited or active, whatever but you have nested your submenus in the li element, So how can it be possible, bro? you are ending that element nav#primary_navigation ul li a before starting the submenus ul li because
<li class="has-sub"><span>Services</span> [your li a ends here]
<ul>
<li><span>Service 1</span></li> [So here no hover action'll be applied] here
<li><span>Service 2</span></li>
</ul>
</li>
So, just use style like this.
nav#primary_navigation ul li:hover, nav#primary_navigation ul li:visited{
display: block;
text-align: center;
text-decoration: none;
color: black;
padding-bottom: 10px;
border-bottom: solid #000000;
}
instead
nav#primary_navigation ul li a:hover, nav#primary_navigation ul li a:visited{
/*style goes here*/
}
Hope you get it.
I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">ยป Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.
I'm making a dropdown list and the items have quite distinct lengths, so a standard width for all the items makes it look strange, however I can't get the dropdowns to behave in a way that doesn't look strange anyway. I'd like for the dropdown unordered lists to be centered to their parents but without predetermining a set width. I've seen ways to do this with js, but wondering is there a way to acheive it just with CSS?
hhttp://jsfiddle.net/QacGj/2/
<div id="menu">
<ul>
<li>item 2</li>
<li>parentcategory
<ul class="child">
<li>1</li>
</ul>
</div>
#menu
{
display: block;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
#menu li
{
display: inline-block;
position: relative;
}
#menu li a
{
padding: 0 10px;
}
#menu li a:hover
{
text-shadow: 0 0 15px #FFF, 0 0 15px #FFF;
}
#menu li ul
{
border: thin #DDD solid;
list-style-type: none;
padding: 5px 0;
position: absolute;
margin: 0 auto;
width 100%
z-index: 99999;
}
#menu li ul li
{
width: 100%;
display: block;
padding: 5px;
text-align: left;
}
#menu li:hover > ul.child
{
display: block;
}
#menu li > ul.child
{
display: none;
}
I would try to achieve this so, that the main link and its child popup were inside the same wrapper, with automatic margin left and right. That way they would both be centered with the same center point. Obviously ul li structure won't work that well for it, or if it does, I'm too tired to think properly :)
Here's an example: http://jsfiddle.net/QacGj/4/