Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post

    IE and Firefox giving dif results on centering

    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:
    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 :
    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 !

  2. Users who have thanked caymaniac for this post:

    Zhra (10-20-2007)

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    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?

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.
    Code:
    <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]>

  • #6
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    311
    Thanks
    1
    Thanked 35 Times in 35 Posts
    Try

    Code:
    <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.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    36
    Thanks
    1
    Thanked 1 Time in 1 Post
    yep .. that did it !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •