CSS Navigation Problems in Mozilla

[onyxlogix]

I am having troubles with a CSS vertical navigation menu when it is viewed in Mozilla (IE works fine).


Page: Services | Small World Solutions

As you can see, the left hand navigation in Mozilla shifts righward as if there is some padding (though there is 0 padding). Yet, the other content in the Sidebar (Company News and Search form) are fine - it's just the navigation.


Here is my CSS file:

body {
	margin: 0 0 0 0;
	padding: 0;
	background: #F2F2F1 url(http://www.smallworldsolution.com/images/bg.gif) repeat-x top;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333333;
	
}

h1, h2, h3 {
	margin: 0;
	font-weight: normal;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #0066FF;

}

h1 {
	font-size: 20px;
	padding-top:4px;
		font-family: "Trebuchet MS",  Arial, Helvetica, sans-serif;
		color:#0066FF;

}

h2 {
	font-size: 16px;
	color:#000;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}
h3 {
	font-size: 13px;
font-weight: bold;
	color:#0066FF;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

p, ul, ol {
	margin: 0 0 2em 0;
	text-align: justify;
	line-height: 26px;
	font-size: 11px;
}

a:link {
	color: #0066FF;
	text-decoration:none;
	padding-bottom:2px;
	border-bottom:1px dotted #ccc;
}

a:hover, a:active {
	text-decoration: none;
	color: #333;
	padding-bottom:2px;
	border-bottom:1px dotted #0066FF;
}

a:visited {
	text-decoration: none;
	color: #333;
	padding-bottom:2px;
	border-bottom:1px dotted #333;
}

img {
	border: none;
}

img.left {
	float: left;
	margin-right: 15px;
}

img.right {
	float: right;
	margin-left: 15px;
}

/* Form */

form {
	margin: 0;
	padding: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

legend {
	display: none;
}

input, textarea, select {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}

/* Header */

#header {
	width: 900px;
	height: 96px;
	margin: 0 auto 0 auto;
	padding: 0 8px 0 8px;
	background: url(http://www.smallworldsolution.com/images/header.jpg) repeat-x left bottom;
}

#logo {
	float: left;
}

#logo h1 {
	font-size: 38px;
	color: #494949;
}

#logo h1 sup {
	vertical-align: text-top;
	font-size: 24px;
}

#logo h1 a {
	color: #494949;
}

#logo h2 {
	margin-top: -10px;
	font-size: 12px;
	color: #A0A0A0;
}

#logo a {
	text-decoration: none;
}

/* Menu */

#navigation {
text-align: center;
margin-top:73px;
float: right; /*Set to "left" or "right" to position menu accordingly*/
/*border-bottom: 1px solid #999e87; uncomment this line to add bottom border*/
}
#navigation ul {
	font-family: "Trebuchet MS", Arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	margin: 0;
	padding: 0;
	line-height:12px;
}
#navigation li {
	display: inline;
	background: url(http://www.smallworldsolution.com/images/tabm.gif) repeat-x center top;
	text-align: center;
	padding: 0;
	margin-right: 4px;	
	float: left;
}

#navigation a {
	color: #333;
	background: url(http://www.smallworldsolution.com/images/tabl.gif) no-repeat left top;
	float: left;
	margin:	0;
	padding-left:7px;
	text-decoration: none;
}
#navigation a:hover {
	color: #333;
	background: url(http://www.smallworldsolution.com/images/tabl2.gif) no-repeat left top;
	float: left;
	margin:	0;
	padding-left:7px;
	text-decoration: none;
}
#navigation a span {
	background: url(http://www.smallworldsolution.com/images/tabr.gif) no-repeat right top;
	display: block;
	padding:7px 13px 4px 5px;
}
#navigation a:hover span {
	background: url(http://www.smallworldsolution.com/images/tabr2.gif) no-repeat right top;
	display: block;
	padding:7px 13px 4px 5px;
}
#navigation a span {
	float: none;
}

#toplinks {
	float:right;
	padding-right:13px;
	margin-top:5px;
}
#toplinks a {
	align:right;
	border-bottom:none;
	font-size:10px;
	color:#FFFFFF;
}
#toplinks a:visited {
	align:right;
text-decoration:none;
	border-bottom:none;
	font-size:10px;
}


#tabsJ {
      float:left;
	  margin-top:45px;
      width:100%;
	font-family: "Trebuchet MS", Arial;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;	
	line-height:12px;

      }
    #tabsJ ul {
	margin:0;
	padding:5px 0 0 452px;
	list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("http://www.smallworldsolution.com/images/tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
	  		border-bottom:none;

      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("http://www.smallworldsolution.com/images/tabrightJ.gif") no-repeat right top;
      padding:0 15px 0 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }




#menu {
	float: right;
}

#menu ul {
	margin: 0;
	padding: 15px 0 0 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin-left: 30px;
	padding: 7px;
	text-decoration: none;
	font-size: 13px;
	color: #000000;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .active a {
	background: url(http://www.smallworldsolution.com/images/img02.gif) repeat-x left bottom;
}

/* Page */

#page {
	width: 900px;
		background:#FFFFFF url(http://www.smallworldsolution.com/images/pagebg2.gif) repeat-y left;
		padding: 0 8px 0 8px;

	margin: 0 auto;
}

/* Content */

#content {
	float: right;
	width: 679px;

}

/* Post */

.post {
}

.post .title {
	margin-bottom: 20px;
	padding-bottom: 5px;
	background: url(http://www.smallworldsolution.com/images/img03.gif) repeat-x left bottom;
}

.post .entry {
padding: 0 5px 0 0;
}
.post .entry  ul {
	margin: 0;
	padding: 0 0 16px 16px;
list-style-type: square;
list-style-position: inside;
}

.post .entry  li {

}

.post .meta {
	padding: 15px 0 20px 0;
	background: url(http://www.smallworldsolution.com/images/img03.gif) repeat-x;
}

.post .meta p {
	margin: 0;
	line-height: normal;
	color: #999999;
}

.post .meta .byline {
	float: left;
}

.post .meta .links {
	float: right;
}

.post .meta .more {
	padding: 0 20px 0 18px;
	background: url(http://www.smallworldsolution.com/images/img06.gif) no-repeat left center;
}

.post .meta .comments {
	padding-left: 22px;
	background: url(http://www.smallworldsolution.com/images/img07.gif) no-repeat left center;
}

.post .meta b {
	display: none;
}
#bread{
float:right;
margin-top:4px;
margin-right:5px;
}
#bread p{
color:#999999;
}
#bread a{
color:#999999;
}
#bread a:hover{
color:#999999;

}
#bread a:visted{
color:#999999;

}

/* Sidebar */

#sidebar {
	float: left;
	width: 195px;
}


#sidebar h2 {
	margin-bottom: 10px;
	padding-top:8px;
	text-align:left;
	background: url(http://www.smallworldsolution.com/images/img03.gif) repeat-x left bottom;
	font-size: 14px;
}



/* Search */

#search {
}

#search h2 {
	margin-bottom: 20px;
}

#s {
	width: 124px;
	margin-right: 6px;
	padding: 2px;
	border: 1px solid #F0F0F0;
}

#x {
	padding: 2px;
	background: #ECECEC url(http://www.smallworldsolution.com/images/img08.gif) repeat-x left bottom;
	border: none;

	font-size: 11px;
	color: #4F4F4F;
}

/* Boxes */

p.description {
	background:url(http://www.smallworldsolution.com/images/box1.jpg) right bottom no-repeat #005A97;
	padding:40px 010px 0;
	color:#fff;
	height:50px;
	font-weight:bold;
	text-align:center;
	font-size:1.2em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height:25px;
	text-transform:uppercase;
}
p.description a {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	border-bottom:1px dotted #8CD1FF;
}
p.description a:hover {
	border-bottom:1px solid #8CD1FF;
}

.box1 {

}


.box2 {
	color: #fff;
}

.box2 h2 {
	margin-bottom: 15px;
	background: url(http://www.smallworldsolution.com/images/img10.gif) repeat-x left bottom;
	font-size: 16px;
	color: #FFFFFF;
}

.box2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {
	color: #fff;
}

/* Footer */

#footer {
	height: 400px;
	min-height: 300px;
	padding: 30px 0 0 0;
	background: #6B6B6B url(http://www.smallworldsolution.com/images/ft.gif) no-repeat center top;
}

html>body #footer {
	height: auto;
}

#footer .wrap {
	width: 870px;
	margin: 0 auto;
	
}

#legal {
	clear: both;
	padding-top: 20px;
	text-align: center;
	color: #fff;
}

#legal a {
	color: #fff;
}
#legal a:visited {
	color: #fff;
text-decoration:none;
}

#fbox1, #fbox2, #fbox3 {
	float: left;
	
}

#fbox1 {
	width: 310px;
	padding-left:8px;
	
}

#fbox2 {
	width: 200px;
	padding-left: 70px;
}

#fbox3 {
	width: 200px;
	padding-left: 70px;
	padding-right:8px;
}

[ianm]

you have float set to right for #navigation could that be it?

[PR Design]

I haven't had chance to look in detail, I'm "working". But you could try throwing in a few

float:left

and

text-align:left

snippets...

[onyxlogix]

Originally Posted by ianm

you have float set to right for #navigation could that be it?

No, #navigation is for the tabs on the header. The problem exists in the Sidebar area.

Also, I don't think just using text-align would work. The Sidebar is already align-left too.

[ianm]

well, what is the navigation in the sidebar called? that helps if we have some information to go on

[onyxlogix]

Originally Posted by ianm

well, what is the navigation in the sidebar called? that helps if we have some information to go on

OK, actually I left out the CSS for the sidebar nav. Ooop! The CSS above is the general CSS file; below is the CSS for the navigation in the sidebar:

/********************
MENU
*********************/
#menu_vert {
   padding-left: 0;
   margin-left: 0;
}


/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
   padding-bottom: 0.1em;
}

/* menu li block */
#menu_vert li {
   list-style: none;
   margin: 0 0 0 0;
   border-bottom: 1px dotted #c0c0c0;
   display: block;
}

#menu_vert ul ul li {
   border: none;
}

/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; } 
* html #menu_vert li hr { height: 1%; }
/** end fix **/

/* first level links */
div#menu_vert a {
   text-decoration:none; /* no underline for links */
text-align:left;
   display: block; /* IE has problems with this, fixed above */
   padding: 0.2em 0 0.2em 0.8em; /* some air for it */
border-bottom:none;
   color: #2264C3; /* this will be link color for all levels */
   background: #ECECEC url(http://www.smallworldsolution.com/images/plus.gif) no-repeat right center; 
   min-height:1em; /* Fixes IE7 whitespace bug */ 
}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
   font-size: 90%;
text-align:left;
border-bottom:none;
   padding: 0.1em 0 0.1em 0.6em;
   background-image:none;
background-color: #F6F3F3;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
   padding: 0em 0.5em 0em 4.3em;
text-align:left;
  }

/* hover state for all links */
div#menu_vert a:hover {
	text-decoration: none;
	color: #333;
}
div#menu_vert a.activeparent:hover {
   color: #18507C;
}

/* 
active parent, that is the first-level parent 
of a child page that is the current page 
*/
div#menu_vert li a.activeparent {
background: #EFEEEE url(http://www.smallworldsolution.com/images/down.gif) no-repeat right center; 

     color: #333;
}

div#menu_vert ul ul li a.activeparent {
background: #EFEEEE url(http://www.smallworldsolution.com/images/down.gif) no-repeat right center; 

   color: #18507C;
}


/* 
current pages in the default Menu Manager 
template are unclickable. This is for current page on first level 
*/
div#menu_vert ul h3 {
   display: block; 
background: #EFEEEE url(http://www.smallworldsolution.com/images/down.gif) no-repeat right center; 
   padding: 0.2em 0 0.2em 0.8em;  /* some air for it */
   color: #333;                                 /* this will be link color for all levels */
   font-size: 1em;                           /* instead of the normal font size for <h3> */
   margin: 0;                                  /* as <h3> normally has some margin by default */
}

/* 
next level current pages, more padding, 
smaller font and no background color or bottom border 
*/
div#menu_vert ul ul h3 {
   padding: 0.1em 0 0.1em 0.6em;
   background-image:none;
background-color: #F6F3F3;
   border-bottom: none;
   color: #000;     
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
   padding: 0em 0.5em 0em 4.3em;
   background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center; 
}

/* section header */
div#menu_vert li.sectionheader {
   border-right: none;
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0;
   background-color: #fff;
   line-height: 1em;
   margin: 0;
   text-align:center;
}



/* separator */
div#menu_vert li.separator {
   height: 1px !important;
   margin-top: -1px;
   margin-bottom: 0;
   padding:2px 0 2px 0;
   background-color: #000;
   overflow:hidden !important;
   line-height:1px !important;
   font-size:1px; /* for ie */
}

div#menu_vert li.separator hr {
   display: none; /* this is for accessibility */
}

[LeadMagnet]

It's being caused by the UL tag just before the list of menu items.
Either get rid of it or give it an ID attribute and adjust it's position.

[PR Design]

Yeah, put margin:0 and padding:0 on the UL (after you've given it an ID).

[onyxlogix]

Originally Posted by LeadMagnet

It's being caused by the UL tag just before the list of menu items.
Either get rid of it or give it an ID attribute and adjust it's position.

Okay, I added a UL tag with 0 margin and padding.

I added to the menu_vert CSS file:

#menu_vert ul {
   padding-left: 0;
   margin-left: 0;
}

Does it work now? Sorry, I am at 'work' and don't have Mozilla.

[LeadMagnet]

No, don't add another UL tag, just fix the one you already have there.