Tab styles look different in IE and FF 1.5

[Kysmiley]

Can anyone look at my coding on www.bluegrassmountain.com/index1.php and see if you can tell me why my nav tabs look so different and why i can not get a background color to show up behind the tabs.
Pat

[Paul O'B]

Hi,

The first thing to fix is the text size because you have medium for mozilla and small for ie. You should be giving small to all and x-small to ie5.+ only.

You should also get rid of the default padding and margins as that is what is making the lists look different also.

* {margin:0;padding:0}/* clear the decks */
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
html,body {
  margin-top: 20px;
  margin-bottom:20px;
  padding: 0;
}
body {  
  margin-top: 20px;
  margin-bottom:20px;
  font:small arial, hevetica, sans-serif;
  text-align: center;
  color: black;
  background-color: black;
}
/* commented backslash hack v2 \*/ 
* html #container {height:100%;}  
* html #container {width:762px;w\idth:760px;}
* html body{font-size:x-small;f\ont-size:small}
/* end hack */

Thebackground isn't showing because you need to clear the floats. You will need to add an extra div around the ul to do this. Strangely enough your code already refers to this div as you refer to #navlist and then #navlist ul which in your present structure is completely wrong and the ul will not be styled correctly.

  <div id="header"> </div>
  <div id="mainnav">
    <div id="navlist">
	  <ul>
		<li id="current"><a href="#">Main</a></li>
		<li><a href="../calendar/month.php">Calendar</a></li>
		<li><a href="../events.php">Events</a></li>
		<li><a href="../links.php">Links</a></li>
	  </ul>
  	<div class="clearer"></div>
	</div>
  </div>
  <div id="sidebar">

Then the css is as follows.

.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

#navlist {
  position: relative; 
  /*left: -30px; remove this */
  background-color: #f5f5f5;
  background:#369 url("http://www.bluegrassmountain.com/images/bg.gif") repeat-x bottom; 
  font-size:85%;
  line-height:normal;
  }
#navlist ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#navlist li {
  float:left;
  background:url("http://www.bluegrassmountain.com/images/right.gif") no-repeat right top;
  margin:0;
  padding:0 5px 0 0;
  }
#navlist a {
  float:left;
  display:block;
  background:url("http://www.bluegrassmountain.com/images/left.gif") no-repeat left top;
  padding:5px 7px 4px 20px;
  text-decoration:none;
  font-weight:bold;
  color:#9cf;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#navlist a {float:none;}
/* End IE5-Mac hack */
#navlist a:hover {
  color:#fff;
  }
#navlist #current {
  background-image:url("http://www.bluegrassmountain.com/images/right_on.gif");
  }
#navlist #current a {
  background-image:url("http://www.bluegrassmountain.com/images/left_on.gif");
  color:#333;
  padding-bottom:5px;
  }
 

Hope that helps

[figbeam]

Just a guess. Since the path to the bg images is "../images/right.gif" and the page seems to be located in the document root, the path would actually be not under the document root. Checked; yes, the path should be "images/right.gif" (ie. without the "../").

I also saw that you havent gotten rid of the lists bullets. Try: #navlist ul {list-style-type: none;}.

Visit Listamatic and see how navigation may be constructed.

Oops, beaten to it.

[Kysmiley]

Thank-you Paul and figbean I will place those changes into place. Now to find out if I can combin the suckerfish effect along with the slidingdoors to get a dropdown menu on one of the tabs.
Pat

[Kysmiley]

Not there yet. It looks really good in FF 1.5 yet in IE I am not able to get the tab images to show now. Any ideas on why this is happening? Also If you can point me in the direction to find out if or how to combin Slidingdoors with suckerfish dropdowns it would be great. Pat

[Paul O'B]

Hi,

You need to set a z-index on the list to bring it above the background.

#navlist li {
  float:left;
  background:url("http://www.bluegrassmountain.com/images/right.gif") no-repeat right top;
  margin:0;
  padding:0 5px 0 0;
  z-index:4;position:relative;
  }

I'm not sure what type of drop downs you are going for but I have some menus here based on suckerfish that might help you with your task

http://www.pmob.co.uk/temp/dropdown-hoz-safe.htm
http://www.pmob.co.uk/temp/horizontal-menu-hozsub.htm
http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Hope it helps

[Kysmiley]

Thanks paul you are an angel. the z-index worked like a charm. Where can i learn about using this tip. If you revisit my page you will see the last tab shows performers I just want to have a dropdown from that tab if I can set that up.
Pat

[Paul O'B]

Hi,

Change your list structure so that the sub ul is contained within a parent list tag like so.

 
<div id="header"> </div>
<div id="mainnav">
	<div id="navlist">
	 <ul id="nav">
		<li id="current"><a href="#">Main</a></li>
		<li><a href="../calendar/month.php">Calendar</a></li>
		<li><a href="../events.php">Events</a></li>
		<li><a href="../links.php">Links</a></li>
		<li><a href="">Performers</a>
		 <ul>
			<li><a href="/missy/">Missy</a></li>
			<li><a href="/steviehall/">Stevie Hall</a></li>
			<li><a href="/twebb.php">Tommy Webb</a></li>
			<li><a href="/tge/">True Gospel Echoes</a></li>
		 </ul>
		</li>
	 </ul>
	 <div class="clearer"></div>
	</div>
</div>
<div id="sidebar">

Note that a nested ul must be contained within the parent li .e.g. <li> <ul><li></li></ul></li>. In your original code you have the nested list outside a parent list which is invalid and won't work.

Next add the js to your page:

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Add an identifier to the main ul so the js can find it.

<div id="mainnav">
	<div id="navlist">
	 <ul id="nav">
		<li id="current"><a href="#">Main</a></li>

Next add the submenu code to display the menu on hover:

/* sub menu styling */
#navlist ul ul{
display:none;/* hide submenu */
position:absolute;/* remove it from the flow so it can overlap */
left:-10px;
top:1.4em;
width:13em;
}
#navlist ul ul li{float:none;}
#navlist ul ul li a{float:none;}
/* mac hide \*/
* html #navlist ul ul li,
* html #navlist ul ul li a {height:1%}
/* end hide */
#mainnav ul li:hover ul,#mainnav ul li.over ul {/* make sub menu appear */
display: block;
}

That should do what you want with any luck

heres the whole page with the css in the head (although the message board may corrupt the links and anchors).

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bluegrass Mountain, Bluegrass, glospel and country music from the mountain states.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   this.className+=" over";
  }
  sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" over\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<style type="text/css">
* {margin:0;padding:0}/* clear the decks */
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
html,body {
  margin-top: 20px;
  margin-bottom:20px;
  padding: 0;
}
body {  
  margin-top: 20px;
  margin-bottom:20px;
  font: small arial, hevetica, sans-serif;
  text-align: center;
  color: black;
  background-color: black;
}
  
#container {
  margin-left:auto;
  margin-right:auto;
  width: 760px; 
  min-height:100%;
  text-align: left;
  background: white;
  border-left: 1px solid #5b9ecb;
  border-right: 1px solid #5b9ecb;
		 position:relative;
  }
/* commented backslash hack v2 \*/ 
* html #container {height:100%;}  
* html #container {width:762px;w\idth:760px;}
* html body{font-size:x-small;f\ont-size:small;}
/* end hack */ 
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
#mainheader {
  position:absolute;
  left:0;top:0;
  height: 160px;
  width:100%;
  background-color: #fff;
  border-bottom: 1px solid #5b9ecb;
  z-index:1;
}
#header {
  text-align:center;
  height: 125px;
  width:100%;
  background:  black url("http://www.bluegrassmountain.com/images/bg1bkg.jpg") no-repeat  center center;
  border-top: 1px solid #5b9ecb;
  border-bottom: 1px solid #5b9ecb;
  position:relative;
  z-index:2;
  overflow:hidden;
  
}
* html #mainheader {height:161px;he\ight:160px}
* html #header {height:127px;he\ight:127px}
#mainnav {
  width:100%;
  height: 40px;
  margin:0;
  background-color: #f5f5f5;
  position:relative;
  z-index:2;
}
#navlist {
  position: relative;
  background: url("http://www.bluegrassmountain.com/images/bg.gif") repeat-x bottom;
  font-size:85%;
  line-height:normal;
  }
#navlist ul {
  margin:0;
  padding:10px 10px 0;
  list-style-type:none;
 }
#navlist li {
  float:left;
  background:url("http://www.bluegrassmountain.com/images/right.gif") no-repeat right top;
  margin:0;
  padding:0 5px 0 0;
  z-index:4;position:relative;
  }
#navlist a {
  float:left;
  display:block;
  background:url("http://www.bluegrassmountain.com/images/left.gif") no-repeat left top;
  padding:5px 7px 4px 20px;
  text-decoration:none;
  font-weight:bold;
  color:#9cf;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#navlist a {float:none;}
/* End IE5-Mac hack */
#navlist a:hover {
  color:#fff;
  }
#navlist #current {
  background-image:url("http://www.bluegrassmountain.com/images/right_on.gif");
  }
#navlist #current a {
  background-image:url("http://www.bluegrassmountain.com/images/left_on.gif");
  color:#333;
  padding-bottom:5px;
  }
* html #mainnav{height:42px;he\ight:40px}  
/* sub menu styling */
#navlist ul ul{
display:none;/* hide submenu */
position:absolute;/* remove it from the flow so it can overlap */
left:-10px;
top:1.4em;
width:13em;
}
#navlist ul ul li{float:none;}
#navlist ul ul li a{float:none;}
/* mac hide \*/
* html #navlist ul ul li,
* html #navlist ul ul li a {height:1%}
/* end hide */
#mainnav ul li:hover ul,#mainnav ul li.over ul {/* make sub menu appear */
 display: block;
}
 
 
 
 
 
 

#sidebar {
  border-left: 1px solid #5b9ecb;
  background-color:#5b9ecb;
  min-height:40%;
  text-align:center;
  float: right;
  width: 150px;
  padding:10px 0;  
}
* html #sidebar {height:40%}
/* mac hide \*/
* html #sidebar {height:40%}
/* end hide*/
#content {
  /*width: 573px;*/
  padding:5px 0 ;
  }
#content p, #sidebar p, #mainnav p, #header p,#footer p  {margin:5px 5px 5px 5px;}
#content h1 {
 text-align:center;
 margin:5px;
 padding:5px;
 font: x-large;
 color: blue;
}  
#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height: 34px;
  background-color: #f5f5f5;
  border-top: 1px solid #5b9ecb;
  font: small arial, hevetica, sans-serif;
  text-align: center;
}
#footer a:link {
  padding: 5px 10px 5px 10px;
  font-size: x-small;
  color: blue;
}
#footer a:visited {
  padding: 5px 10px 5px 10px;
  font-size: x-small;
  color: black;
}
#footer a:active {
  padding: 5px 10px 5px 10px;
  background-color:#5b9ecb;
  color: black;
  border: 2px inset;
  font-size: x-small;
  font-weight:bold;
}
#footer a:hover {
  padding: 5px 10px 5px 10px;
  background-color:blue;
  color: white;
  border: 2px outset;
  font-size: x-small;
  font-weight:bold;
}
#footer p {margin:0;padding:0}
* html #footer {height:35px;he\ight:34px;}
.divider1 {
 width:100%;
 height:1px;
 overflow:hidden;
 background:transparent;
 position:relative;
 border-bottom: 1px solid #5b9ecb;
}
#clearfooter {height:27px;width:100%;clear:both}
.blank , .blank2 {
 position:absolute;
 left:547px;
 width:2px;
 height:0px;
 overflow:hidden;
 border-top: 1px solid #5b9ecb;
}
.blank {top:-1px;}
.blank2 {bottom:-1px; border-top:1px solid #5b9ecb;
}
span.Q {
 margin: 8px;
 padding:5px;
 font-size:x-large;
 font-weight: bold;
 color:#5b9ecb;
}
span.A {
 margin: 8px;
 padding:5px;
 font-size:x-large;
 font-weight: bold;
 color:blue;
}
 
</style>
/head>
<body>
<div id="container">
  <div id="mainheader">
	<!--<div class="blank2"></div>-->
	<!-- for decoration only -->
  </div>
  <div id="header"> </div>
  <div id="mainnav">
	<div id="navlist">
	  <ul id="nav">
		<li id="current"><a href="#">Main</a></li>
		<li><a href="../calendar/month.php">Calendar</a></li>
		<li><a href="../events.php">Events</a></li>
		<li><a href="../links.php">Links</a></li>
		<li><a href="">Performers</a>
		  <ul>
			<li><a href="/missy/">Missy</a></li>
			<li><a href="/steviehall/">Stevie Hall</a></li>
			<li><a href="/twebb.php">Tommy Webb</a></li>
			<li><a href="/tge/">True Gospel Echoes</a></li>
		  </ul>
		</li>
	  </ul>
	  <div class="clearer"></div>
	</div>
  </div>
  <div id="sidebar">
	<p>Bands</p>
  </div>
  <div id="content">
	<p>Footer stays at the bottom of the window unless the content is longer then it stays at the bottom of the document.</p>
	<p>Footer stays at the bottom of the window unless the content is longer then it stays at the bottom of the document.</p>
  </div>
  <div id="clearfooter"></div>
  <!-- to clear footer -->
  <div id="footer">
	<div class="divider1"></div>
	<div class="blank"></div>
	<!-- for decoration only -->
	<a href="refund.php">Refunds</a> | <a href="faq.php">F.A.Q.</a> | <a href="contact.php">Contact Us</a> </div>
</div>
</body>
</html>

z-indexes are need to control the stacking order of positioned elements and if a parent has a z-index set then you may need to control where elements overlap.

http://www.aplus.co.yu/css/z-pos/

[Kysmiley]

Thank-you sdo much paul I will now put that new coding into place. I have been playing with this also and trying to understand it more
Pat