Fix for navbar overflow problem

[buntrosgali]

heres my site the site  the only nav bar that has drop downs is the first called "business league" but in some browsers, ie new version firefox, some ie, linux the drop down is hiding behind the news module. Anyone got a fix for this? so it goes over the news rotator.

And also does anyone know how to make the size of the font in the nav bars smaller? i cant find it cheers

[Nullig]

For the font size, add it to this section of your stylesheet:

#primary-nav a {
  font-size: 12px;

Nullig

[KO]

For the drop down...

Code: Select all

#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px;
[color=red]z-index:500;[/color]
}

[buntrosgali]

hey guys that font size worked but i inserted that other code to stop the nav bar going behind the news rotator but it didnt work here is my css stylesheet see if you can advise. cheers

/*
Theme Name: Not So Boring NI
Theme URI: http://www.pigsflymedia.com/
Description: Football Business League
Author:Pigsflymedia.com
Author URI: http://www.pigsflymedia.com/




This theme was designed and built by Stephen Lynch

*/

/* =General
-----------------------------------------------------------------------------*/

/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;


}
body


{background: url(uploads/images/BusinessLeagueimages/bgnew.gif) repeat-x;

  color: #333;
  margin:0px;    /* gives some air for the pagewrapper */
background-color: #000;
}
#sideimg {
float:left;

margin-left:10px;
margin-right: 10px;
margin-top: 0px;
top:300px;
width:610px;
background-image: url(images/footside1.jpg);
height:52px;
z-index:13;
}
#master {

margin-left:0px;
margin-right: auto;
margin-top: 0px;
top:300px;
width:800px;
background-color:#ffffff;


height:1350px;
z-index:1;
}




#header {
  float: left;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  width: 800px;
  height: 160px;
  background-image: url(uploads/images/footyheader2.jpg);
  background-color: #00FF33;
  z-index:2;
}
#pigsfly {
  float: left;
  margin-top: 2px;
  margin-right: 0px;
  margin-left: 0px;
  width: 800px;
  height: 65px;
  background-image: url( uploads/images/headeradvert.gif);

  z-index:3;
}
#hyperlinks {
  float: left;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  width: 800px;
  height: 30px;

  background-color: #00FF33;
  z-index:4;
}
#breadcrumbs {
  float: left;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  width: 800px;
  height: 10px;
 
 
  z-index:5;
}

#ads {
float: right;
margin-left:0px;
margin-top:20px;
  width:150px;
  background-color:#0033CC;
  height:0px;
  z-index:6;
}
#ads li{
list-style: none;
margin: 0 0 0px 0;
padding: 0;
}

#ads a{
margin: 0;
padding: 0;

}

#rotator {
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  width: 450px;
  height: 330px;

  z-index:7;
}
#leaguetable {
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  width: 140px;
  height: 330px;

  background-color:;
 
  z-index:8;
}
#calender {
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  width: 435px;
  height: 272px;
  background-color:#fff;


  background-image: url( uploads/images/fixtures.png);
  z-index:9;
}
#widget {
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  width: 10px;
  height: 200px;
  background-color:
   
  z-index:10;
}
#bigpic {
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  width: 620px;
  height: 220px;
  background-color:;
  z-index:11;
}

#maincontent {
  float: left;
  margin-top: 0px;
  margin-right: 5px;
  margin-left: 10px;
  width: 600px;
  height: auto;
  min-height: 450px;
 
  background-color: #fff;
  z-index:14;
}
#bottomhyperlinks {
float:left;

margin-left:10px;
margin-right: 10px;
margin-top: 20px;
top:300px;
width:620px;
background-color:;
height:70px;
z-index:12;
}
#footer {
float:left;

margin-left:10px;
margin-right: 10px;
margin-top: 20px;
top:300px;
width:620px;
background-color:;
height:52px;
z-index:13;
}

#teamlogo {
float:left;

margin-left:10px;
margin-right: 10px;
margin-top: 20px;
width:140px;
height:200px;
background-image: url(images/teamlogoskel.jpg);
z-index:14;
}

#teamphoto {
float:left;

margin-left:10px;
margin-right: 10px;
margin-top: 20px;
width:450px;
height:200px;
background-image: url(images/photoskel.jpg);
z-index:15;
}

#teamresults {
float:left;

margin-left:10px;
margin-right: 10px;
margin-top: 20px;
width:140px;
height:200px;
background-image: url(images/resultsskel.jpg);
z-index:16;
}

#teamtext {
float:left;

margin-left:10px;
margin-right: 10px;
margin-top: 20px;
width:450px;
height:200px;
background-image: url(images/editorskel.jpg);
z-index:17;
}
#primary-nav a {
  font-size: 14px;
}

[KO]

It seems that Firefox 2 works fine. IE6 does not do dropdown menu as you seem to have removed the javascript that needs to be there for IE6.

There is also some other CSS that actually makes the menu. I noticed that colors to highlight something does not work on "code" so it should be...

#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
z-index:500;
}

Anyways something has changed as Firefox seems to work now. Maybe that z-index is not needed at all.