AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of brightsusan
brightsusan
Flag for United States of America asked on

Firefox and Internet Explorer 6 Incompatibility

I have created a web site that uses a php code that calls the page as a variable.  The problem I am having is that in IE 7 the pages look correct and in Firefox all but the "Catalog Login" page look correct but in IE6 all pages except the "Links" and "Contact" page are moving down.  

Some have suggested that it is due to extra <head> & <body> tags since each page is a page of its own, when it "includes" it into the "index" page it addes the entire code.  I have tried removing those tags and it still does it.  Also each page is using the Style Sheet so if I don't use the <head> tag on that page I cannot use the Style sheet.

I really need this corrected ASAP so any help is greatly appreciated

http://www.its-supply.com 

Style Sheet: 
 
/* Style Sheet */
 
/* Body text  */
body{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	color:#000000; 
	}
 
/* Headings */
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 18px; 
	color: #000000; 
	}	
	
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 20px; 
	color: #000000; 
	}		
	
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 24px; 
	color: #000000; 
	}		
 
/* Float Image */
img.floatLeft {
	float: left; 
	margin-right: 5px; 
	}
img.floatRight {
	float: right; 
	margin-left: 5px; 
	}
 
/* Center Image */
div.center{
	width: 100%; 
	text-align: center;
	}	
 
#wrapper{
width: 895px;
margin: auto;
}
	
#wrapperlogin{
width: 950px;
margin: auto;
}
	
#header{
width: 895px; 
height: 183px; 
background:url(images/t1.jpg); 
background-repeat: no-repeat; 
}
 
#menu{
width: 167px;
height: 650px;
float: left;
display: inline; 
background: url(images/m1.jpg); 
background-repeat: no-repeat; 
font-family:Arial, Helvetica, sans-serif;
font-size: 16px; 
font-weight: bolder; 
text-align: center;
margin-right: 15px;
} 	
 
 
#main{
width: 695px; 
height: 100%; 
margin-top: 30px; 
margin-right: 10px; 
margin-bottom: 10px; 
margin-left: 177px;
}
 
#mainlogin{
width: 800px; 
margin-top: 0px; 
margin-right: 10px; 
margin-bottom: 10px; 
margin-left: 190px;
}
 
 
#footer{
width: 895px;
height: auto; 
margin-top: 10px;
}
 
/* Unvisted links */
a:link {
	color:#0000CC; 
	text-decoration:underline;
}
 
/* Visted link */
a:visted {
	color:#0000CC;  /* Dark Green */
	text-decoration: underline;
}		
 
 
 
Index.php 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>Industrial Tooling and Supply, Inc. </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="keywords" content="I.T.S. Supply, Industrial Tooling and Supply, Inc., Industrial, Tooling, Supply, Industrial Tooling, Supply" />
</head>
<body>
<div id="wrapper"><!--Start of Container -->
<div id="header"><!-- Start of Header -->
</div>
<!--End of Header -->
<div id="menu"><!--Start of Menu --> 
  <p>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="140" height="600">
      <param name="movie" value="images/menu.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <embed src="images/menu.swf" width="140" height="600" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
    </object>
  </p>
  <p>
  </div>
<!-- End of Menu -->
<div id="main"><!--Start of Main Content-->
  <?php 
  	if(!isset($_REQUEST['content']))
 	include("main.inc.php");
	else
	{
		$content = $_REQUEST['content']; 
		$nextpage = $content . ".inc.php"; 
		include($nextpage);
		}
	?>	
</div><!-- End of Main Content -->
<div id="footer"><!--Start of Footer-->
<?php include("//home/users/web/b1915/ipw.itsweb/public_html/includes/footer.html") ?>
</div><!--End of Footer -->
</div><!-- End of Container -->
</body>
</html>
 
 
About Us Page: 
 
<!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>Industrial Tooling & Supply, Inc.</title>
<meta name="keywords" content="I.T.S. Supply, Industrial Tooling and Supply, Inc., Industrial, Tooling, Supply, Industrial Tooling, Supply" />
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
<!--
.style1 {
	font-size: 24px;
	font-family: "Times New Roman", Times, serif;
}
.style3 {
	font-size: 36px;
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
}
.style5 {color: #0000CC}
a:link {
	color: #000099;
}
-->
</style>
</head>
<body>
<table width="759" border="0" align="center" cellspacing="5">
  <tr>
    <th colspan="3" align="center" valign="top" scope="col"><p class="style3">The I.T.S. Advantage<br />
      <br />
    </p>    </th>
  </tr>
  <tr>
    <td width="349" align="left" valign="top"><h3 align="center"><img src="images/aboutus_ba.jpg" width="349" height="34" /></h3>
      <ul><li><a href="index.php?content=savings" class="style5">Documented Cost Savings</a>
        <ul>
          <li> 2008 - Over 1.5 Million in documented cost savings for our customers</li>
          <li>2007 - Over 2.5 Million in documented cost savings for our customers </li>
          </ul>
        </li>
        <li>25 year old company with Over 200 years combined experience! </li>
        <li>Family-owned with integrity recognized by both our customers   and suppliers </li>
        <li>Representing over 200 quality lines          </li>
        <li>Specialize in Cutting Tools, Abrasives, and MRO Supplies </li>
        <li>E-commerce online ordering with same day shipping. </li>
        <li>Longevity contracts to hold the line on increased costs. </li>
        <li>Four divisions with independent   management </li>
        <li>24/7 Customer Service </li>
      </ul>      </td>
    <td width="11" align="left" valign="middle"><img src="images/vert_divider.jpg" width="8" height="267" /></td>
    <td width="373" align="left" valign="top"><p><img src="images/aboutus_mp.jpg" width="349" height="34" /></p>
      <p>&nbsp;</p>
      <ul><li>Integrated Supply Contracts<br />
          <br />
            </li>
        <li>Negotiated Contract Pricing <br />
          <br />
        </li>
        <li>Inventory Management Programs
          <ul>
            <li> Vending Machines</li>
            <li>Vendor Managed Inventory - VMI</li>
            <li>Software Technology</li>
          </ul>
        </li>
      </ul>      
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top"><strong><em><br />
          <span class="style1">Contact us and give your business the   I.T.S. Advantage today!</span></em></strong></td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top"><br />
      <table width="669" border="0" cellpadding="10" cellspacing="20">
        <tr>
          <th scope="col"><img src="images/ISAlogocolorTrans.gif" alt="ISA" width="119" height="46" /></th>
          <th scope="col"><img src="images/aama.gif" alt="AAMA" width="98" height="47" /></th>
          <th scope="col"><img src="images/ibclogo1.gif" alt="IBC" width="120" height="25" /></th>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

Open in new window

Scripting LanguagesPHPWeb Browsers
Avatar of undefined
Last Comment
brightsusan
8/22/2022 - Mon
blumi
IE6 handles margin and padding different, you can start your research there.
Or try to change the width of the middle part.

Looks like a float problem were one div is to wide for the space.

Recommended
http://shouldiusetablesforlayout.com/
brightsusan
ASKER
I have tried to rearrange the sizes and keep messing it up.  Can you take a look at my code and see if you can figure out what I should put?

Basically the index page & other pages have two columns.  The  #menu and the #main
The login page has two columns The #menu and the #mainlogin

they are contained in a wrapper:
Index & Other pages : #wrapper
Login Page: #wrapperlogin

again in IE7 all pages look file
in IE6 all page except the links and contact page drop down
in Firefox only the "catalog login" drops down

I am at my wits end.... :) 

Style Sheet: 
 
/* Style Sheet */
 
/* Body text  */
body{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	color:#000000; 
	}
 
/* Headings */
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 18px; 
	color: #000000; 
	}	
	
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 20px; 
	color: #000000; 
	}		
	
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 24px; 
	color: #000000; 
	}		
 
/* Float Image */
img.floatLeft {
	float: left; 
	margin-right: 5px; 
	}
img.floatRight {
	float: right; 
	margin-left: 5px; 
	}
 
/* Center Image */
div.center{
	width: 100%; 
	text-align: center;
	}	
 
#wrapper{
width: 895px;
margin: auto;
}
	
#wrapperlogin{
width: 950px;
margin: auto;
}
	
#header{
width: 895px; 
height: 183px; 
background:url(images/t1.jpg); 
background-repeat: no-repeat; 
}
 
#menu{
width: 167px;
height: 650px;
float: left;
display: inline; 
background: url(images/m1.jpg); 
background-repeat: no-repeat; 
font-family:Arial, Helvetica, sans-serif;
font-size: 16px; 
font-weight: bolder; 
text-align: center;
margin-right: 15px;
} 	
 
 
#main{
width: 695px; 
height: 100%; 
margin-top: 30px; 
margin-right: 10px; 
margin-bottom: 10px; 
margin-left: 177px;
}
 
#mainlogin{
width: 695px; 
height: 800px; 
margin-top: 0px; 
margin-right: 10px; 
margin-bottom: 10px; 
margin-left: 177px;
}
 
 
#footer{
width: 895px;
height: auto; 
margin-top: 10px;
}
 
/* Unvisted links */
a:link {
	color:#0000CC; 
	text-decoration:underline;
}
 
/* Visted link */
a:visted {
	color:#0000CC;  /* Dark Green */
	text-decoration: underline;
}

Open in new window

blumi
I am a bit busy on work at the moment, what i suggest is to try this.
Hope it helps quick, have to go


#main{
width: 680px; 
height: 100%; 
margin-top: 30px; 
margin-right: 10px; 
margin-bottom: 10px; 
margin-left: 177px;
}
 
#mainlogin{
width: 680px; 
height: 800px; 
margin-top: 0px; 
margin-right: 10px; 
margin-bottom: 10px; 
margin-left: 177px;
}

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
brightsusan
ASKER
put that in but it still looks the same??

Do I maybe need to change something on the #menu ?
Lukasz Chmielewski
try to move the main div inside menu div

<div id="menu">
   <p>
   ... your flash object
   </p>
  <div id="main">
  etc.
brightsusan
ASKER
When I did that the page still dropped down and then the footer was over the main content?
I would think it is with the padding and margins but no matter what I put they still do not work?  I have the menu column at a total width of 177px and the margin-left for the main div is 177px so they should work.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Lukasz Chmielewski
and adding position: absolute?

#main{
width: 695px;
height: 100%;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 177px;
position: absolute;
}
brightsusan
ASKER
That didn't work either
ASKER CERTIFIED SOLUTION
brightsusan
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
blumi
As I said in the first answer here...

Cheers, nothing to thanks for
Your help has saved me hundreds of hours of internet surfing.
fblack61
brightsusan
ASKER
Actually I had to add something that wasn't in your answer.  In older versions of IE it doesn't do the margins & padding the same so I had to clear out the default margins & padding so that it didn't add anything to my numbers.  It was adding to my margins & padding and that was throwing it off and making it larger than it actually was.
blumi
I told you that they handle margin and padding different and told you to search there for a solution. I'm happy for you that you learned something about margin and padding.

I believed that you and anyone here want to learn it and you just need a tip were to search for a solution.

You have a lot issues with your site, just test it with the w3c html and css validator. Further is a menu with flash not recommended, that is not pretty good for search engine optimization.

How can you expect that someone send you just an issue free all in one solution after reading for an hour through your ugly and wrong coding. I think you are insolent.
brightsusan
ASKER
I'm not sure why you are so angry.  I didn't see anything that was posted that would cause your harsh comments.  I just said that I had to add that universal style to remove the default margins and padding.  I didn't ask for an all in one solution.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent