[solved] Menu bullets in "sub-items" with IE only

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
nakkiel
Forum Members
Forum Members
Posts: 70
Joined: Wed Apr 02, 2008 7:15 am

[solved] Menu bullets in "sub-items" with IE only

Post by nakkiel »

I'm having problems with my menu with IE. I'm using cssmenu. IE shows bullets in sub-items too, opera and firefox are fine. You can see what I mean from this picture:

http://img228.imageshack.us/my.php?image=cmsmenuhy0.jpg

Some menutexts are different in that picture but don't worry about that :)

And here's my stylesheet for the menu:

Code: Select all

#menu {
   background-color: #FFFFFF;
   background-image: url(images/menupic1.jpg);
   background-repeat: no-repeat;
   background-position: 7px 7px;
   color: #000000;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 8pt;
}

#primary-nav li a {
   color: #000000;
   font-weight: bold;
   list-style: none;
   text-decoration: none;
}

#primary-nav li li a {
   color: #000000;
   font-weight: normal;
   list-style: none;
   text-decoration: none;
}

#primary-nav li {
   color: #000000;
   list-style-image: url(images/arrow.jpg);
   padding-top: 4px;
   padding-left: 2px;
   padding-right: 2px;
   padding-bottom: 2px;
   text-decoration: none;
}

#primary-nav li li {
   color: #000000;
   font-weight: normal;
   list-style: none;
   text-decoration: none;
}

#primary-nav li.menuactive a {
   color: #FF7800;
   list-style: none;
}

#primary-nav li.menuactive li a {
   color: #000000;
   list-style: none;
}

#primary-nav li li.menuactive a {
   color: #FF7800;
   font-weight: bold;
   list-style: none;
}

#primary-nav ul {
   margin-left: 10px;
   padding: 0px;
}
Last edited by nakkiel on Tue Apr 22, 2008 10:53 am, edited 1 time in total.
User avatar
nakkiel
Forum Members
Forum Members
Posts: 70
Joined: Wed Apr 02, 2008 7:15 am

Re: Menu bullets in "sub-items" with IE only

Post by nakkiel »

I got it, I will post here my solution in case someone else needs that too... There was another problem too with IE, the bullets were not aligning right with the text. Well, I found a solution from another forum, disabling the bullets alltogether and putting the bullets into the background image of li. The first section of the code positions the backgrounds right, the second one removes them from sub-items :)

Code: Select all

#primary-nav li {
   background: transparent url("images/arrow.jpg") no-repeat 0px 8px;
   color: #000000;
   list-style-type: none;
   padding-top: 4px;
   padding-left: 15px;
   padding-right: 2px;
   padding-bottom: 2px;
   text-decoration: none;
}

#primary-nav li li {
   background-image: none;
   color: #000000;
   font-weight: normal;
   list-style: none;
   text-decoration: none;
}
Post Reply

Return to “Layout and Design (CSS & HTML)”