Small CSS error, (Need a second opinion) - html

I have looked long and hard for the error in my CSS. I can't find it, I am sure it is something obvious, I just cant figure out what it is! The problem is i have a element. #nav li ul, that has a left margin that shouldn't exist. setting it's margin: 0px; doesn't work. Here is the CSS code and the html is located at http://www.letsmine.info/Sundalah. The #nav is the menu, I have only worked on the index, so don't bother browsing the other pages.
#nav {
height: 39px;
margin: 0;
width: auto;
}
.mainmenu {
background: url("../index_files/menu.jpg") repeat scroll 0 0 transparent;
height: 39px;
line-height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 1024px;
}
#nav li, #nav li a {
display: block;
height: 39px;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
#nav li ul {
background-color: #F2EAD5;
box-shadow: 3px 3px 3px #CC8930;
color: #2A8AC6;
float: none;
font-family: "Arial";
font-size: 19px;
margin-top: 8px;
opacity: 0.9;
text-align: center;
}
body.index #nav li.menu1 {
width: 118px;
}
body.index #nav li.menu1:hover {
width: 118px;
}
body.index #nav li.menu2 {
width: 212px;
}
body.index #nav li.menu3 {
width: 161px;
}
body.index #nav li.menu4 {
width: 174px;
}
body.index #nav li.menu5 {
width: 193px;
}
body.index #nav li.menu6 {
width: 166px;
}
body.community #nav li ul {
background-color: #AECEAB;
}
body.kids #container #nav li ul {
background-color: #89BAB7;
opacity: 0.8;
}
body.market #nav li ul {
background-color: #FFD0CE;
}
body.sundays #nav li ul {
background-color: #E7DAB2;
}
body.index #nav li ul {
background-color: #E7DAB2;
}
body.contacts #nav li ul {
background-color: #E7DAB2;
}
#nav li ul li a:link {
text-decoration: none;
}
div#container div#nav li ul#sundays li {
width: 211px;
}
div#container div#nav li ul#market li {
width: 161px;
}
div#container div#nav li ul#kids li {
width: 174px;
}
div#container div#nav li ul#community li {
width: 193px;
}
#nav ul {
position: absolute;
top: 30px;
visibility: hidden;
}
#nav li:hover ul {
visibility: visible;
z-index: 9999;
}
#nav li:hover {
opacity: 1;
}
#nav li:hover ul li a:hover {
opacity: 1;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#nav #holder ul li {
display: inline;
}

Assuming that you're talking about this page:
http://www.letsmine.info/Sundalah/
(I found a highly likely link on a previous question of yours)
The reason that margin: 0 is not working is because it's not margin - it's padding. This will fix it:
#nav li ul {
padding: 0
}

Related

CSS: drop down menu not selecting correctly; margin spacing?

I have a drop down menu and when you hover over an option it shows the submenu, but then when you move the cursor down; sometimes the rest of the menu will hide. I have noticed there is a little bit of space (margin? border?) underneath that I am assuming is the culprit unless someone can tell me differently.
Below is an image to show what I mean; there is a small gap between the two options and I am assuming when you make the cursor go over that point it comes off "hover" and hides it
Any help would be greatly appreciated.
.menu ul { margin = ..;}
The above code makes the margin bigger, however even when it is set to 0 it still seems to be there..
This is my HTML for the menu
<td align="center" bgcolor="#666666">
<div class="menu" align="center">
<ul>
<li>Bar Equipment
<ul>
<li>Tills</li>
<li>Bar Furniture</li>
<li>Bar Sundries</li>
...
</div></td>
This is the Css for the menu class
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
margin: 0px;
text-align: center;
background: #efefef;
padding: 0px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration:none;
}
.menu ul ul {
background: #efefef;
padding: none;
position: absolute;
top: 100%; /* ?? */
}
.menu ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
see the jsfiddle: http://jsfiddle.net/p1kuzzdo/
try this css:
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
background: none repeat scroll 0 0 #efefef;
height: 50px;
line-height: 50px;
margin: 0;
padding: 0;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
height: 50px;
line-height: 50px;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding: 0 10px;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #757575;
display: block;
text-decoration: none;
}
.menu ul ul {
background: none repeat scroll 0 0 #efefef;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
border-bottom: 0 solid pink;
border-top: 0 solid #6b727c;
float: none;
margin: 0;
padding: 0;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}

align li menu items center

i have this css code for my responsive css menu:
nav, ul, li, a {
margin: 0; padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
but i cannot get the menu items to align in the centre of the menu/page
here is a fiddle with the full code:
http://jsfiddle.net/5Z2QV/
Is THIS FIDDLE what you want?
If so, then you have to remove float from the lis and add display: inline-block to them. Then you have to add text-align: center to the .nav
.nav {
list-style: none;
background:#f36f25;
text-align: center;
border-top: 1px solid #104336;
}
.nav > li {
display: inline-block;
}
I also removed border-top from the li and put it in the .nav to remove the gaps between lis.
EDIT:
To keep sub-menu items aligned to the left, add this CSS:
.nav li {
text-align: left;
}
EDIT2:
You don't need this adjustMenu() javascript function. You can use media queries. Modify your #media section a bit. Add this style:
.nav {
border-top: none;
}
and replace style for .nav > li with this:
.nav > li {
display: block;
border-top: 1px solid #104336;
}
Also, I noticed that in the small range of resolution, one menu item breaks into new line. To prevent this, you can add this style to the .nav
white-space: nowrap;
overflow: hidden;
Here's the update fiddle: http://jsfiddle.net/5Z2QV/9/

Different height being used by UL than specified in DIV

I've set the DIV height to 54px but for some reason the UL is only about half of that - all the navigation links are way up at the top of the div for some reason.
<div id="menu">
<ul class="left" style="display: none;">
<li id="dashboard"><?php echo $text_dashboard; ?></li>
</u>
</div>
Here's what's in my CSS that I think pertains to this:
#menu {
background: url('../image/menu.png') repeat-x;
position: relative;
z-index: 1;
height: 54px;
clear: both;
padding: 0px 30px;
min-width: 900px;
}
#menu > ul.left {
float: left;
}
#menu > ul.right {
float: right;
}
#menu > ul {
position: relative;
margin: 0;
padding: 0;
}
#menu > ul ul {
list-style: none;
margin: 0;
padding: 0;
background: url('../image/transparent.png');
}
#menu > ul a {
display: block;
text-decoration: none;
}
#menu > ul li {
float: left;
list-style: none;
}
#menu > ul > li + li {
background: url('../image/split.png') center left no-repeat;
}
#menu > ul .top {
padding: 10px 15px 9px 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
#menu > ul li ul {
position: absolute;
}
#menu > ul ul li {
padding: 2px;
clear: both;
}
#menu > ul .selected .top {
background: url('../image/selected.png') repeat-x;
color: #FFFFFF;
}
#menu > ul .parent {
background-image: url('../image/arrow-right.png');
background-position: 95% center;
background-repeat:no-repeat;
}
#menu > ul li ul ul {
margin: -29px 0 0 161px;
}
#menu > ul li li a {
padding: 5px;
margin: 1px;
color: #FFFFFF;
width: 147px;
}
#menu > ul li li > a:hover {
margin: 0px;
border: 1px solid #BD4C14;
background-color: #391706;
}
Any idea what needs to be changed to extend the height of the UL like I did the DIV?

CSS, Most Specific (Help)

have small... big problem with my css. I have a couple of values that are becoming more specific than others. Interestingly the selector which is being overridden has !important on more then one of its values. What more can i say here is the CSS
This is what is being overwritten:
div#container div#nav div#specefic ul li ul#sundays li{
width: 211px !important;
}
div#container div#nav div#specefic ul li ul#market li{
width: 161px !important;
}
div#container div#nav div#specefic ul li ul#kids li{
width: 174px !important;
}
div#container div#nav div#speceficul li ul#community li{
width: 193px !important;
}
You can also view an example of this at http://www.letsmine.info/Sundalah
-
#nav {
margin:0;
width:auto;
height:39px;
}
#nav ul {
margin:0;
padding:0;
line-height:30px;
width: 1024px;
height: 39px;
background: url(../index_files/menu.jpg);
position: relative;
}
}
#nav ul li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#nav ul li, #nav ul li a {
height: 39px;
display: block;
}
#nav li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#nav ul li ul {
background-color: #f2ead5;
margin-top: 8px;
text-align:center;
color:#2a8ac6;
font-family:"Arial";
font-size:19px;
-moz-box-shadow: 3px 3px 3px #cc8930;
-webkit-box-shadow: 3px 3px 3px #cc8930;
box-shadow: 3px 3px 3px #cc8930;
float:none;
opacity: 0.9;
}
body.index #nav ul li.menu1{
width: 118px;
}
body.index #nav ul li.menu1 a:hover{
background: transparent url(../index_files/menu.jpg) 0 0px no-repeat;
}
body.index #nav ul li.menu2 {
left: 119px;
width: 212px;
}
body.index #nav ul li.menu2 a:hover{
background: transparent url(../index_files/menu.jpg) 119px 0px no-repeat;
}
body.index #nav ul li.menu3 {
left: 332px;
width: 161px;
}
body.index #nav ul li.menu3 a:hover{
background: transparent url(../index_files/menu.jpg) 332px 0px no-repeat;
}
body.index #nav ul li.menu4 {
left: 494px;
width: 174px;
}
body.index #nav ul li.menu4 a:hover{
background: transparent url(../index_files/menu.jpg) 494px 0px no-repeat;
}
body.index #nav ul li.menu5 {
left: 669px;
width: 193px;
}
body.index #nav ul li.menu5 a:hover{
background: transparent url(../index_files/menu.jpg) 669px 0px no-repeat;
}
body.index #nav ul li.menu6 {
left: 863px;
width: 166px;
}
body.index #nav ul li.menu6 a:hover{
background: transparent url(../index_files/menu.jpg) 863px 0px no-repeat;
}
body.community #nav ul li ul {
background-color: #aeceab;
}
body.kids #container #nav ul li ul {
background-color: #89bab7;
opacity: 0.8;
}
body.market #nav ul li ul {
background-color: #ffd0ce;
}
body.sundays #nav ul li ul {
background-color: #E7DAB2;
}
body.index #nav ul li ul {
background-color: #E7DAB2;
}
body.contacts #nav ul li ul {
background-color: #E7DAB2;
}
#nav ul li ul li a:link{
text-decoration: none;
}
div#container div#nav div#specefic ul li ul#sundays li{
width: 211px !important;
}
div#container div#nav div#specefic ul li ul#market li{
width: 161px !important;
}
div#container div#nav div#specefic ul li ul#kids li{
width: 174px !important;
}
div#container div#nav div#speceficul li ul#community li{
width: 193px !important;
}
/*********************************************/
/* hide menu and allow it to return */
/*********************************************/
#nav ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#nav ul li:hover ul {
visibility:visible;
z-index:9999;
}
/**********************************************/
/*sets top level hover color*/
#nav li:hover {
opacity: 1;
}
/*sets link items hover color and background*/
#nav ul li:hover ul li a:hover {
opacity: 1;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
}
/* IE7 Display Fix */
#nav #holder ul li {
display: inline;
}
Your CSS is in a real mess I removed some of unnecessary things from there which caused the issues.
your drop.css:
#nav {
height: 39px;
margin: 0;
width: auto;
}
.mainmenu {
background: url("../index_files/menu.jpg") repeat scroll 0 0 transparent;
height: 39px;
line-height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 1024px;
}
#nav ul li, #nav ul li a {
display: block;
height: 39px;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
#nav ul li ul {
background-color: #F2EAD5;
box-shadow: 3px 3px 3px #CC8930;
color: #2A8AC6;
float: none;
font-family: "Arial";
font-size: 19px;
margin-top: 8px;
opacity: 0.9;
text-align: center;
}
body.index #nav ul li.menu1 {
width: 118px;
}
body.index #nav ul li.menu2 {
width: 212px;
}
body.index #nav ul li.menu3 {
width: 161px;
}
body.index #nav ul li.menu4 {
width: 174px;
}
body.index #nav ul li.menu5 {
width: 193px;
}
body.index #nav ul li.menu6 {
width: 166px;
}
body.community #nav ul li ul {
background-color: #AECEAB;
}
body.kids #container #nav ul li ul {
background-color: #89BAB7;
opacity: 0.8;
}
body.market #nav ul li ul {
background-color: #FFD0CE;
}
body.sundays #nav ul li ul {
background-color: #E7DAB2;
}
body.index #nav ul li ul {
background-color: #E7DAB2;
}
body.contacts #nav ul li ul {
background-color: #E7DAB2;
}
#nav ul li ul li a:link {
text-decoration: none;
}
div#container div#nav div#specefic ul li ul#sundays li {
width: 211px !important;
}
div#container div#nav div#specefic ul li ul#market li {
width: 161px !important;
}
div#container div#nav div#specefic ul li ul#kids li {
width: 174px !important;
}
div#container div#nav div#speceficul li ul#community li {
width: 193px !important;
}
#nav ul ul {
position: absolute;
top: 30px;
visibility: hidden;
}
#nav ul li:hover ul {
visibility: visible;
z-index: 9999;
}
#nav li:hover {
opacity: 1;
}
#nav ul li:hover ul li a:hover {
opacity: 1;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#nav #holder ul li {
display: inline;
}
also in your html change the first to thats the class which I added so it doesn't clash with the sub menu (thats why you could see the menu image in there).
Hope it helps
EXAMPLE 2
to use images in , don't put any image in and use this code... NB! this is only a sample!
.menu1 {
background-position: 0 0;
}
.menu2 {
background-position: 0 -16px;
}
.menu3 {
background-position: 0 -32px;
}
.menu4 {
background-position: 0 -49px;
}
.menu5 {
background-position: 0 -64px;
}
.menu, .menu2, .menu3, .menu4, .menu5 {
background-image: url("images/menuiconset.png");
background-repeat: no-repeat;
height: 16px;
width: 180px;
}
if all buttons are the same size .. put height and width in .menuX if buttons are different size

CSS, Hover error (Second Opinion)

looks like i have had a long day, bit tired and can't think. Anyway i have a problem in my css, i recently just fixed one error, then added css sprites and implemented it into my menu. The problem is that the hover state of my main menu is being imprinted onto my sub menus.
So body.currentpage #container #nav .mainmenu li ul li, is having a background image put on it from body.currentpage #nav li#menu6 a:hover. The html is located at, http://www.letsmine.info/Sundalah. Here is the CSS
#nav {
height: 39px;
margin: 0;
width: auto;
margin-bottom: -8px;
}
.mainmenu {
background: url("../index_files/menu.jpg") repeat scroll 0 0 transparent;
height: 39px;
line-height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 1024px;
}
#nav li, #nav li a {
display: block;
height: 39px;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
#nav li ul {
background-color: #F2EAD5;
box-shadow: 3px 3px 3px #CC8930;
color: #2A8AC6;
float: none;
font-family: "Arial";
font-size: 19px;
margin-top: 8px;
opacity: 0.9;
text-align: center;
padding: 0px;
}
body #nav li#menu1 {
left: 0;
width: 118px;
}
body #nav li#menu2 {
left: 119px;
width: 212px;
}
body #nav li#menu3 {
left: 332px;
width: 161px;
}
body #nav li#menu4 {
left: 494px;
width: 174px;
}
body #nav li#menu5 {
left: 664px;
width: 193px;
}
body #nav li#menu6 {
left: 861px;
width: 166px;
}
body.index #nav li#menu1 a:hover{
background: transparent url(../index_files/menu.jpg) 0 -39px no-repeat;
}
body.index #nav li#menu2 a:hover{
background: transparent url(../index_files/menu.jpg) -119px -39px no-repeat;
}
body.index #nav li#menu3 a:hover{
background: transparent url(../index_files/menu.jpg) -332px -39px no-repeat;
}
body.index #nav li#menu4 a:hover{
background: transparent url(../index_files/menu.jpg) -494px -39px no-repeat;
}
body.index #nav li#menu5 a:hover{
background: transparent url(../index_files/menu.jpg) -664px -39px no-repeat;
}
body.index #nav li#menu6 a:hover{
background: transparent url(../index_files/menu.jpg) -861px -39px no-repeat;
}
body.community #container #nav li ul {
background-color: #AECEAB;
}
body.kids #container #nav li ul {
background-color: #89BAB7;
opacity: 0.8;
}
body.market #container #nav li ul {
background-color: #FFD0CE;
}
body.sundays #container #nav li ul {
background-color: #E7DAB2;
}
body.index #container #nav li ul {
background-color: #E7DAB2;
}
body.contacts #container #nav li ul {
background-color: #E7DAB2;
}
#nav li ul li a:link {
text-decoration: none;
}
div#container div#nav li ul#sundays li {
width: 211px;
}
div#container div#nav li ul#market li {
width: 161px;
}
div#container div#nav li ul#kids li {
width: 174px;
}
div#container div#nav li ul#community li {
width: 193px;
}
#nav ul {
position: absolute;
top: 30px;
visibility: hidden;
}
#nav li:hover ul {
visibility: visible;
z-index: 9999;
}
#nav li:hover {
opacity: 1;
}
#nav li:hover ul li a:hover {
opacity: 1;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#nav #holder ul li {
display: inline;
}
You can fix this one by changing the selector in this :
body.index #nav li#menu2 a:hover {
background: transparent url(../index_files/menu.jpg) -119px -39px no-repeat;
}
to this:
body.index #nav li#menu2 > a:hover
This way, only a elements that are direct children of li#menu2 will have the background applied.
You'll have to do the same > trick to each of the 6 similar rules.
You can fix the "stuffed text" with the same idea.
Change this selector:
#nav li
to this:
#nav > li