The top menu bar I have just put in.
At first before i put in the <ul <li> divs to define the menu items it centered fine.
now it's in firefox it's too wide .. and IE it's not wide enough.
below is the code, I would be gratefull for any help at all on making this work good .. otherwise I may have to change tactics from css !
HTML code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cayman in a Nutshell : Grand Cayman Tours and more ...</title>
<link href="cnstyle.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #0066FF;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #00FF33;
}
.style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.style4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF9900;
}
.style5 {
color: #8900f9;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style7 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #0000FF;
}
-->
</style>
</head>
<body onload="MM_preloadImages('images/fullmonty.png','images/minimonty.png','images/7mb.png','images/ed.png','images/src.png','images/aquaad.png')">
<div id="main">
<div id="title"><img src="images/title2.png" alt="Cayman in a Nutshell" width="600" height="200" /></div>
<ul id="topmenu"><li><a href="fullmonty.php">NUTSHELL</a></li><li><a href="minimonty.php">HALF-SHELL</a></li><li><a href="7mb.php">BEACH BREAK</a></li><li><a href="ee.php">GO EAST</a></li><li><a href="src.php">STINGRAY CITY</a></li><li><a href="aquaad.php">AQUABOATS</a></li></ul>
<div id="content">
<p class="style6">Welcome to Cayman in a Nutshell. Quite simply we offer yousome of the most unique experiences you could wish to have whilst visiting the Cayman Islands. With a variety of luxury tours to choose from it is possible for you to see most everything that Grand Cayman has to offer in one convenient package. </p>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td><div align="center" class="style1">CAYMAN IN A NUTSHELL </div></td>
<td><div align="center" class="style2">THE HALF-SHELL TOUR </div></td>
</tr>
<tr>
<td><div align="center"><a href="fullmonty.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Full Monty','','images/fullmonty.png',1)"><img src="images/fullmonty_bw.png" alt="Full Monty" name="Full Monty" width="300" height="100" border="0" id="Full Monty" /></a></div></td>
<td><div align="center"><a href="minimonty.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Mini Monty','','images/minimonty.png',1)"><img src="images/minimonty_bw.png" alt="Mini Monty" name="Mini Monty" width="300" height="100" border="0" id="Mini Monty" /></a></div></td>
</tr>
<tr>
<td><div align="center" class="style4">BEACH BREAK </div></td>
<td><div align="center" class="style3">GO EAST </div></td>
</tr>
<tr>
<td><div align="center"><a href="7mb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Seven Mile Beach','','images/7mb.png',1)"><img src="images/7mb_bw.png" alt="Seven Mile Beach" name="Seven Mile Beach" width="300" height="100" border="0" id="Seven Mile Beach" /></a></div></td>
<td><div align="center"><a href="ee.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Eastern Districts','','images/ed.png',1)"><img src="images/ed_bw.png" alt="Eastern Districts" name="Eastern Districts" width="300" height="100" border="0" id="Eastern Districts" /></a></div></td>
</tr>
<tr>
<td><div align="center" class="style5">STINGRAY CITY </div>
<div align="center"></div></td>
<td><div align="center" class="style7">AQUABOATS ADVENTURE </div></td>
</tr>
<tr>
<td><div align="center"><a href="src.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Stingray City','','images/src.png',1)"><img src="images/src_bw.png" name="Stingray City" width="300" height="100" border="0" id="Stingray City" /></a></div>
<div align="center"></div></td>
<td><div align="center"><a href="aquaad.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Aquaboat Adventure','','images/aquaad.png',1)"><img src="images/aquaad_bw.png" alt="Aquaboat Adventure" name="Aquaboat Adventure" width="300" height="100" border="0" id="Aquaboat Adventure" /></a></div></td>
</tr>
</table>
<p><span class="style6">Our tours start off with the Full Monty, a classic combination of everything special about the Cayman Islands, if however you aren't a boat person and don't feel like kissing a Stingray then the Mini Monty may be more your cup of tea. Along with these there is a nice relaxing visit to the World famous Seven Mile Beach with a Local Lunch included. Alternatively check out the Eastern Districts though to be a step back in time here on Grand Cayman withsome breath taking sights. If you just want to go get wet and play with our amazingly friendly Stingrays then the Stingray City tour on it's own will probably be what you are looking for. Whatever you are after here in Grand Cayman we've got it. <strong>SEE IT ALL !</strong></span></p>
<p> </p>
<p align="center"><?php include('http://www.caymaninanutshell.ky/bmenu.php'); ?></p>
<p align="center">
</p>
</div></div>
</body>
</html>
thanks .. i will look into doing the seperate IE style sheet
and as for using the table ... i use the table for the front page roll over buttons only .. everything else is css .. there is always a time and a place for tables.
i just don't get why the auto margin would all of a sudden make the width of the menu bar different just because i included the <ul><li>
it was perfect in both browsers before i did that.
Ok I am using the code below .. and it fixed my IE problem .. but the IE style sheet is affecting the Firefox layout. It's pushing everything across (adding the margin of 20px from the IE stylesheet)
Below is the code linking to the two style sheets .. as far as I can tell it's right.
Your conditional link was written wrong, and your second conditional link to the main style sheet (if it was written correctly) would have overwritten any changes in the ie sheet.
Before you post, read our: 
