...

View Full Version : IE and Firefox giving dif results on centering



caymaniac
10-19-2007, 12:06 AM
http://www.caymaninanutshell.ky/

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:

<!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>&nbsp;</p>
<p align="center"><?php include('http://www.caymaninanutshell.ky/bmenu.php'); ?></p>
<p align="center">

</p>
</div></div>
</body>

</html>


CSS code :

body {
background: url(images/bg.gif) top center repeat-y;
margin:0px 0px;
padding:0px;
text-align:center;
}
#title {
width: 600px;
margin: 0px auto;

}
#main {
width:770px;
margin: 0px auto;
text-align:left;
padding:0px;
/* background-image: url(images/backwave.png);
background-repeat:repeat-y; */
}
#topmenu {
background-color:#CC9966;
width:650px;
height:25px;
margin:10px auto;
font:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
#topmenu a:link {
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
}
#topmenu a:hover
{
text-decoration:none;
color:#666666;
font-weight:bold;
}
#topmenu ul
{
list-style: none;
}
#topmenu li
{
font-size:0.9em;
float: left;
list-style-type: none;
padding: 5px 8px;
}
#content {
margin : -5px 55px -16px 55px;
}
.image {
padding: 5px;
border:thin #000000 solid;
margin: 5px;
}


Thanks so much in advance !

srule_
10-19-2007, 12:19 AM
Hello,
I looked at your code but it is hard to find a quick solution. It is difficult because you coding is not prober.

Why are you using table to make your site, then u use css for only the menu?

durdledoor
10-19-2007, 10:48 AM
What I have found helpful mate is to have an alternate ie6 stylesheet.

Get your main stylesheet working in FF.

Then make any changes that you need to make for ie on the stylesheet.

Its really useful.

If you do that, you can play around with the ie settings to get them working, and it won't affect what happens in FF.

caymaniac
10-19-2007, 02:04 PM
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.

caymaniac
10-19-2007, 11:59 PM
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.

<link href="cnstyle.css" rel="stylesheet" type="text/css" />
<![if IE]>
<link rel="stylesheet" type="text/css" href="ie-cnstyle.css" />
<![endif]>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="cnstyle.css" />
<![endif]>

Donkey
10-20-2007, 12:44 AM
Try


<link href="cnstyle.css" rel="stylesheet" type="text/css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-cnstyle.css" />
<![endif]-->

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.

caymaniac
10-20-2007, 10:33 PM
yep .. that did it !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum