I am so close to launching my first Magento project, and the final leg has just been one CSS hurdle after another… mostly with IE.
This last one popped up just after fixing 5 other things, and has not been an issue until now.
In IE, my top nav links (2) are appearing about 20px too high until you hover over them and then they jump into place.
Navigation CSS:
.nav-container { background:#ffffff url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }
#nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }
#nav li { position:relative; text-align:left; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none;}
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
#nav ul li.parent li a { background-image:none; }
/* 0 Level */
#nav li { float:left; }
#nav li.active a { color:#8751b0; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#000000; font-weight:bold; display: block;}
#nav li.over a,
#nav a:hover { color:#8751b0; display: block;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/bkg_nav1.gif) 0 100% repeat-x; }
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
As you can see, there are no :hover properties with margins that are overriding the original state. I just can't figure this one out.
I have tried Firebug but I just can't relate it to the IE issues. It renders fine in FF...and the IE 'Developer Tools' just can't compare to Firebug...
Please, any help is appreciated!
I had the same issue with a menu and found that removing the "display: block;" fixed this issue with IE.
Related
I am creating a personal website for my programming class and I'm having trouble having my "li" tags items drop down, but instead their going off to the right. For example I hover over my "li" tag to have my drop down "li" items drop down. But instead they drop down and go to the right. I want them to go straight down. Any help?
Here is the CSS (And yes I know that some of my CSS is repeated and unnecessary) :
#nav {
background-color:#222;
margin:-15px;
margin-left:230px;
margin-right:230px
}
#nav_wrappper {
width: 960px;
margin: 0 auto;
text-align:left;
}
#nav ul {
list-style-type: none;
text-align:center;
margin: 0 auto;
position: relative;
display:inline-block;
width:100%;
}
#nav ul li {
display: inline-block;
position:relative;
width:33%;
float:left;
}
#nav ul li:hover {
background-color:#333;
}
#nav ul li a,visited {
color:#ccc;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration:none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul {
display:none;
position: absolute;
background-color:#333;
border: 5px solid #222;
border-top:0;
margin-left: -5px;
min-width:160px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a, vistited{
color:#ccc;
}
#nav ul ul li a:hover {
color:#099;
}
As you'll see in the screenshot linked to below, I'm encountering strange behaviour when using Chrome 39.0.2171.95. A smaller than 1px gap appears between the styled list items. It looks fine in Firefox and IE.
I hadn't noticed it until I started using a device with retina display, so I would be interested to find out how many others see the same as me.
It doesn't use inline-block, and removing the space between each <li> is not possible as the three-tiered menu is generated by WordPress (and I doubt it is a solution here). Using negative margins hides the gap, but as a workaround and not a solution it causes other issues (it moves the sub-menus out of place).
Screenshot: http://i58.tinypic.com/m9rkmf.jpg
Link: http://www.tolkiensociety.org/
This is the current CSS:
#mainmenu {
background:#333333;
position:absolute;
bottom:0;
width:960px;
}
#mainmenu.fixed {
position:fixed;
top:0;
z-index:100;
height:43px;
}
#mainmenu > ul {
padding-left:124px;
}
#mainmenu ul {
height:43px;
list-style:none;
position:relative;
}
#mainmenu ul li {
float:left;
}
#mainmenu ul li a {
display:block;
padding:12px 10px;
border-bottom:4px solid #00A33E;
color:#fefefe;
text-transform:uppercase;
text-decoration:none;
font-size:14px;
font-weight:300;
height:15px;
}
#mainmenu ul li:hover > a {
background:#222222;
}
#mainmenu .menu-item-1128 > a {
border-bottom: 4px solid #82c4e5;
}
#mainmenu .menu-item-644 > a {
border-bottom: 4px solid #e33417;
}
#mainmenu .menu-item-62 > a {
border-bottom: 4px solid #78bf32;
}
#mainmenu .menu-item-91 > a {
border-bottom: 4px solid #00A33E;
}
#mainmenu .menu-item-81 > a {
border-bottom: 4px solid #d99f3c;
}
#mainmenu .menu-item-739 > a {
border-bottom: 4px solid #F1654F;
}
#mainmenu ul ul {
display:none;
position:absolute;
top:39px;
z-index:9999;
min-width:200px;
}
#mainmenu ul li:hover > ul {
display:block;
}
#mainmenu ul ul li {
float:none;
position:relative;
}
#mainmenu ul ul li a {
padding:12px 10px;
border:0;
color:#fefefe;
text-transform:none;
text-decoration:none;
font-size:14px;
font-weight:400;
height:15px;
white-space:nowrap;
background-color:#222;
}
#mainmenu ul ul li a:hover {
background-color:#111;
}
#mainmenu ul ul ul {
position:absolute;
left:100%;
top:0;
}
#mainmenu ul ul li:hover > a {
background:#111;
}
#mainmenu ul ul ul li a {
background-color:#111;
}
#mainmenu ul ul ul li a:hover {
background-color:#000;
}
Resset the UL and LI as shown below to bring the padding and margin of the listed to zero.
ol, ul, li {
margin: 0;
padding: 0;
}
Note: Add the above to the very top of your CSS file. That way, unless if otherwise set, the padding and margin will be zero.
Is your browser zoom at 100%? I recently had a similar case, and I found out the little gap was because the page was slightly zoomed in.
For sub menu i am using position:absolute so that the submenu appears on the right of the main menu. However, with position:absolute the scroller is not appearing.
Is there any way i can make the scrollbar appear on the submenu after a certain height is reached?
Here is my css:
.main-navigation{
float:left; position:relative; padding-left:3.071em; z-index:9999;
}
.main-navigation ul{ list-style:none; font-family:"Century Gothic";}
.main-navigation li{ text-transform:lowercase; display:block;}
.main-navigation li a{
display:block; color:#000;line-height:18px;
padding:0 4em 0 1.429em;}
.main-navigation li ul{
display:none; position:absolute; z-index:1; top:1px; left:90%;
}
.main-navigation li ul li{
line-height:18px; margin:0 1em 0.143em 0;
}
.main-navigation li ul li a {
display: inline-block;
line-height:14px;
padding: 0 2em;
width: 10.429em; margin:0 0 0 1em;
white-space: normal;
}
.submenu .current-menu-item a{
background:url(images/current-page.png) no-repeat left; }
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
background:url(images/current-page.png) no-repeat left;
}
.sub-menu { height:80px; position:relative; display:block;}
.main-navigation li.current_page_item ul,
.main-navigation li.current_page_parent ul,
.main-navigation li.current_page_ancestor ul { display: block; }
It's hard to answer a question like this without seeing the page, or at least the associated HTML. But perhaps you could try something like this?
.sub-menu {height:80px; overflow: auto;}
I have a dropdown menu on my page but there are some problem i.e when the dropdown appear and moved down to certain limit it will disappear as shown in image.
1 ) when the dropdown appear for Mobile App Development as shown in image and moved down to Black berry its work but when i move mouse pointer to Palm the menu disappeared.css code is/* menu styles */
nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
nav a{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
text-align: center;
background-color:#333;
width:80px;
}
nav a:hover{
background-color:#fff;
color:#333;
}
nav li{
float:left;
position:relative;
border-right: 1px solid white;
}
nav ul {
position:absolute;
display:none;
width:12em;
top:1.5em;
}
nav li ul a{
width:12em;
height:auto;
float:left;
}
nav ul ul{
top:auto;
}
nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
what should i do in css so that my menu will appear on my other div.
Try to specify z-index in your css:
z-index : 100;
Hey guys I set up this CSS file to use on the navbar:
#nav
{
background-color: #98bf21;
}
#nav li
{
float:left;
}
#nav li ul{
position: absolute;
width: 172px;
left: -999em;
}
#nav li:hover ul{
left: auto;
}
#nav a:link,a:visited
{
display:block;
width:164px;
font-weight:bold;
color:white;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#nav a:hover,a:active
{
background-color: #7A991A;
}
And it seems to be affecting all the elements. For example all elements take the styles if the #nav a styles. Is there something I'm missing here? I'm new to web design.
#nav a:link,a:visited and #nav a:hover,a:active look like they could be the problem (the second selector is not bound to #nav in those lines and so will be matching all a elements. I'm assuming you mean to do #nav a:link, #nav a:visited and #nav a:hover, #nav a:active instead.