WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > Internet explorer 8 gaps problem?

Reply
  Thread Tools Display Modes
Old 13th January 11, 12:37 AM   #1
techbuilder
WLC Member
 
Join Date: Jan 2011
Posts: 25
Default Internet explorer 8 gaps problem?

Hey everyone I'm having an issue with internet explorer 8 causing a big gap
in chrome and fire fox it's fine

here's how it's supposed to look
this is using chrome and fire fox


And here is what internet explorer looks (which is horrible )


Here's my coding and my text doesn't show up either but thats a different issue
here's my code.

HTML
Code:
<html>
<head>
<title>CPDEngineering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style9.css" rel="stylesheet" type="text/css" media="screen" />
<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>
</head>
<body>

<table id="Table_01" width="951" height="1312" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="13" height="1311" rowspan="13">
			</td>
		<td width="937" height="19" colspan="13">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="13" height="3">
			</td>
		<td colspan="10" rowspan="2">
			<img src="images/Banner.gif" width="897" height="158" alt=""></td>
		<td width="27" height="3" colspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="13" height="1289" rowspan="11">
			</td>
		<td width="27" height="233" colspan="2" rowspan="4">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="3" height="1134" rowspan="10">
			</td>
		<td width="890" height="14" colspan="8">
			</td>	</tr>
	<tr>
		<td colspan="2">
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','../../Documents/CPD_Photoshop/Navbar1.1.jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar1.jpg" name="Home" width="126" height="51" border="0"></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Manufacturing','','../../Documents/CPD_Photoshop/Navbar2 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar2.jpg" name="Manufacturing" width="154" height="51" border="0"></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','../../Documents/CPD_Photoshop/Navbar3 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar3.jpg" name="Services" width="121" height="51" border="0"></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','../../Documents/CPD_Photoshop/Navbar4 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar4.jpg" name="About Us" width="129" height="51" border="0"></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','../../Documents/CPD_Photoshop/Navbar5 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar5.jpg" name="Contact Us" width="132" height="51" border="0"></a></td>
		<td colspan="2">
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RequestforQoute','','../../Documents/CPD_Photoshop/Navbar6 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar6.jpg" name="RequestforQoute" width="228" height="51" border="0"></a></td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="890" height="31" colspan="8" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="31" height="367" colspan="3" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="342">
			</td>
		<td colspan="6" rowspan="4">
        
			<span style="position:absolute;z-index:1"><img src="images/TemplateBack.jpg"></span>
		  <div style="position:relative; height:1000px">
<div style="position:absolute;z-index:1"></div>
<div style="position:absolute; top:606px; left: 102px; width:643px; height:139px; z-index:7; color:#FFF; font:'Myriad Pro'; font-size:120%;">
  <div align="left">
    <p align="center">
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <BODY DIR="LTR">
    </p>
    <p ALIGN="CENTER">
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <BODY DIR="LTR">
    </p>
    <p ALIGN="CENTER">
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <BODY DIR="LTR">
    </p>
    <p ALIGN="CENTER"><strong>Custom  Product Development Corporation offers complete mechanical  engineering and design/drafting support on its in-house Auto CAD,  Solid Works and Metalsoft Unfold/Fold CAD/CAM systems to help  customers develop new products and support the transition from  prototype through production runs.</strong></p>
  </div>
  </div>
  <div style="position:absolute; top:514px; left: 207px; width:457px; height:50px; z-index:8; color:#FFF; font:'Myriad Pro'; font-size:180%;">
  <div align="left">
    <p align="center">
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <BODY DIR="LTR">
    <p ALIGN="CENTER">
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <BODY DIR="LTR">
    </p>
    <p ALIGN="CENTER">
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <BODY DIR="LTR">
    </p>
    <p ALIGN="CENTER"><strong>Engineering  &amp; Design Support:</strong></p>
  </div>
  </div>
</div>
</td>
		<td width="26" height="342">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="4">
			</td>
		<td width="34" height="4" colspan="3">
			</td>
		<td width="23" height="689" rowspan="5">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="265">
			</td>
		<td width="26" height="265">
			</td>
		<td width="8" height="265" colspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="420" rowspan="3">
			</td>
		<td width="34" height="401" colspan="3" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="838" height="12" colspan="6">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="872" height="19" colspan="9">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td>
            <div style="position:absolute;top:1060px;left:950px; width:600px; height:430px; z-index:5;font-size:200%;">
      <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Requestfor','','../../Documents/CPD_Photoshop/Request-for-qoute.png',0)"><img src="../../Documents/CPD_Photoshop/Requestqoute.png" name="Requestfor" width="176" height="31" border="0"></a>
      </div>
</div>

			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="100" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="121" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="129" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="132" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="202" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
		<td></td>
	</tr>
</table>

</body>
</html>
Here is my CSS
Code:
body {
	width:951px;
width:951px;
margin: 0 auto;
	text-align:center;
	margin-top:
	background-color:#000;
		    
}

#container{
	width:951px;
	margin:auto;
	margin-top:auto
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}
techbuilder is offline   Reply With Quote
Old 13th January 11, 10:55 AM   #2
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Internet explorer 8 gaps problem?

wow where to start!

first of all no doctype...no wait here it is
on line 103,109,115,126,131 and 137 ?????
a very crazy table structure which i cant understand
absolute positioning with no need for it to exist
the html tag also appears 6 extra times
as does the body tag
(all encased within a depreciated align:center paragraph?)
???? i'm suprised it even renders at all on any browser....

ok. what you need to do is to bin it. and start again.

1. doctype at the top
2. only 1 html and body tag
3. please dont use tables, use divs
4. no need for absolute positioning
5. all styles in the stylesheet not just token ones.

and take a close look at what you put in your stylesheets too.

eg
margin:auto;
margin-top:auto
margin-left:auto;
margin-right:auto;
????

width:951px;
width:951px;????

margin-top:???
Phreaddee is offline   Reply With Quote
Old 13th January 11, 11:21 AM   #3
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Internet explorer 8 gaps problem?

I'll simply agree with -
Quote:
what you need to do is to bin it. and start again.
and everything that follows in the post
chrishirst is offline   Reply With Quote
Old 13th January 11, 12:15 PM   #4
techbuilder
WLC Member
 
Join Date: Jan 2011
Posts: 25
Default Re: Internet explorer 8 gaps problem?

I cannot start from scratch I have been working on a 11 pages similar to this one for the past two weeks and this is do Friday.

I got it to work in internet explorer but firefox doesn't work
so please if someone could kindly help me even though I did it the wrong way it would save me so much.

here's the edited code I did to work in internet explorer
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>CPDEngineering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style9.css" rel="stylesheet" type="text/css" media="screen">
<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>



<table id="Table_01" width="951" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="13" height="1311" rowspan="13">
			</td>
		<td width="937" height="19" colspan="13">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="13" height="3">
			</td>
		<td colspan="10" rowspan="2">
			<img src="images/Banner.gif" width="897" height="158" alt=""></td>
		<td width="27" height="3" colspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="13" height="1289" rowspan="11">
			</td>
		<td width="27" height="233" colspan="2" rowspan="4">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="3" height="1134" rowspan="10">
			</td>
		<td width="890" height="14" colspan="8">
			</td>	</tr>
	<tr>
		<td colspan="2">
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','../../Documents/CPD_Photoshop/Navbar1.1.jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar1.jpg" name="Home" width="126" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Manufacturing','','../../Documents/CPD_Photoshop/Navbar2 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar2.jpg" name="Manufacturing" width="154" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','../../Documents/CPD_Photoshop/Navbar3 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar3.jpg" name="Services" width="121" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','../../Documents/CPD_Photoshop/Navbar4 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar4.jpg" name="About Us" width="129" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','../../Documents/CPD_Photoshop/Navbar5 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar5.jpg" name="Contact Us" width="132" height="51" border="0" alt=""></a></td>
		<td colspan="2">
		  <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RequestforQoute','','../../Documents/CPD_Photoshop/Navbar6 (2).jpg',0)"><img src="../../Documents/CPD_Photoshop/Navbar6.jpg" name="RequestforQoute" width="228" height="51" border="0" alt=""></a></td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="890" height="31" colspan="8" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="31" height="367" colspan="3" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="342">
			</td>
		<td colspan="6" rowspan="4">
<div style="position:relative; height:1000px">
<div style="position:absolute;z-index:1">
<img src="images/TemplateBack.jpg" alt="">

</div>

<div style="position:absolute;z-index:1"></div>
<div style="position:absolute; top:606px; left: 102px; width:643px; height:139px; z-index:7; color:#FFF; font:'Myriad Pro'; font-size:120%;">
  <div align="left">
    <p align="center">
      
    <p ALIGN="CENTER">
      
    <p ALIGN="CENTER">
      
    <p ALIGN="CENTER"><strong>Custom  Product Development Corporation offers complete mechanical  engineering and design/drafting support on its in-house Auto CAD,  Solid Works and Metalsoft Unfold/Fold CAD/CAM systems to help  customers develop new products and support the transition from  prototype through production runs.</strong></p>
  </div>
  </div>
  <div style="position:absolute; top:514px; left: 207px; width:457px; height:50px; z-index:8; color:#FFF; font:'Myriad Pro'; font-size:180%;">
  <div align="left">
    <p align="center">
      
    <p ALIGN="CENTER">
      
    <p ALIGN="CENTER">
      
    <p ALIGN="CENTER"><strong>Engineering  &amp; Design Support:</strong></p>

  </div>
</div>
</td>
		<td width="26" height="342">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="4">
			</td>
		<td width="34" height="4" colspan="3">
			</td>
		<td width="23" height="689" rowspan="5">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="265">
			</td>
		<td width="26" height="265">
			</td>
		<td width="8" height="265" colspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="26" height="420" rowspan="3">
			</td>
		<td width="34" height="401" colspan="3" rowspan="2">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="838" height="12" colspan="6">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td width="872" height="19" colspan="9">
			</td>
		<td>
			</td>
	</tr>
	<tr>
		<td>
            <div style="position:absolute;top:1060px;left:750px; width:600px; height:430px; z-index:5;font-size:200%;">
      <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Requestfor','','../../Documents/CPD_Photoshop/Request-for-qoute.png',0)"><img src="../../Documents/CPD_Photoshop/Requestqoute.png" name="Requestfor" width="176" height="31" border="0" alt=""></a>
      </div>


			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="100" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="121" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="129" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="132" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="202" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
		<td></td>
	</tr>
</table>

</html>
Here's what happens in firefox




This code of mine works in the twisted way I did it in all browsers but I don't see the difference between this one and the one posted above.
techbuilder is offline   Reply With Quote
Old 13th January 11, 12:22 PM   #5
techbuilder
WLC Member
 
Join Date: Jan 2011
Posts: 25
Default Re: Internet explorer 8 gaps problem?

Here's the code for my home that works in all browsers with no glitch including firefox.

the coding is to long so I'm going to post half on this section and the rest on the section lower

Code:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>CPDwebsiteFinal2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<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>


<table id="Table_01" width="950" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="11">
			</td>
		<td width="937" height="22" colspan="11">
			</td>
	</tr>
	<tr>
		<td width="16" height="1289" rowspan="10">
			<img src="images/spacer.gif" width="16" height="1289" alt=""></td>
		<td width="890" height="155" colspan="8">
        <img src="ExtraPhotos/images/Banner.gif" width="897" height="158" alt=""></td>
        			
		<td width="31" height="233" colspan="2" rowspan="4">
			<img src="images/spacer.gif" width="31" height="233" alt=""></td>
	</tr>
	<tr>
		<td width="890" height="21" colspan="8">
			</td>
	</tr>
	<tr>
		<td>
		  <a href="file:///C:/Users/MTL/Desktop/CPDwebsiteFinal2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','WebExxx/images/images/Navbar1.1.jpg',0)"><img src="WebExxx/images/Navbar1.jpg" name="Home" width="126" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="file:///C:/Users/MTL/Desktop/Manufacturing/CPDManufacturing.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Manufacturing','','WebExxx/images/images/Navbar2.jpg',1)"><img src="WebExxx/images/Navbar2.jpg" name="Manufacturing" width="154" height="51" border="0" alt=""></a></td>
		<td>
		  <a href="file:///C:/Users/MTL/Desktop/Services/CPDservices.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','WebExxx/images/images/Navbar3.jpg',0)"><img src="WebExxx/images/Navbar3.jpg" name="Services" width="121" height="51" border="0" alt=""></a></td>
		<td colspan="2">
		  <a href="file:///C:/Users/MTL/Desktop/AboutUs/CPDAboutus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About us','','WebExxx/images/images/Navbar4.jpg',0)"><img src="WebExxx/images/Navbar4.jpg" name="About us" width="129" height="51" border="0" alt=""></a></td>
		<td colspan="2">
		  <a href="file:///C:/Users/MTL/Desktop/Contact%20Us/CPDcontact-us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','WebExxx/images/images/Navbar5.jpg',0)"><img src="WebExxx/images/Navbar5.jpg" name="Contact Us" width="132" height="51" border="0" alt=""></a></td>
		<td colspan="0">
			<a href="http://www.cheesycam.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Request for Qoute','','WebExxx/images/images/Navbar6.jpg',0)"><img src="WebExxx/images/Navbar6.jpg" name="Request for Qoute" width="228" height="51" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/CPDwebsiteFinal2_13.jpg" width="890" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			
<div style="position:relative; height:367px">
<div style="position:absolute;z-index:1">
<img src="images/Body1.jpg" alt="">
</div>
<div style="position:absolute; top:123px; left: 443px; width:442px; height:188px; z-index:2; color:#FFF; font:Calibri; font-size:105%">
  <div align="left">
    <p><b>
      &quot; With more than 35 years of experience,    <br>
      CUSTOM PRODUCT DEVELOPMENT CORPORATION <br>
      provides innovative/low cost engineered 
      mechanical components and Turn-Key
      Assembly solutions.Our technical design expertise,
      coupled with creative manufacturing 
      and supply chain control, ensures that our 
      customers receive the best possible service
      available in today's competitive industry.&quot;</b></p>
    <p>&nbsp;</p>
  </div>
</div>
</div>  
</td>
  <td width="8" height="367">
			<img src="images/spacer.gif" width="8" height="367" alt=""></td>
		<td width="23" height="1056" rowspan="6">
			<img src="images/spacer.gif" width="23" height="1056" alt=""></td>
	</tr>
	<tr>
		<td width="898" height="4" colspan="9">
			<img src="images/spacer.gif" width="898" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<div style="position:relative; height:261px">
<div style="position:absolute;z-index:1">
<img src="images/Leftimg.jpg" alt="">
</div>
<div style="position:absolute; top:74px; left: 170px; width:346px; height:150px; z-index:2; color:#FFF; font:Calibri; font-size:115%">
  <div align="left">
    <p><b>
      We pride ourselves on outstanding 
      customer service and product quality.  
      Whether you are a current customer, or a 
      potentially new customer, we take a genuine 
      interest in your product requirements. 
      Customer loyalty is a priority
      at Custom Product Development Corporation.</b> 
    </p>
    <p>&nbsp;</p>
  </div>
</div>
</div>



This one works but the code listed above does not work and I cannot tell the difference.

Please help me
I know the coding is horrible and I am a beginner at this but time is of the essence and if it wasn't I would do it the right way.

Thank you for any helpful information you may provide
techbuilder is offline   Reply With Quote
Old 13th January 11, 12:23 PM   #6
techbuilder
WLC Member
 
Join Date: Jan 2011
Posts: 25
Default Re: Internet explorer 8 gaps problem?

Code:
 
</td>
		<td colspan="2" rowspan="2">
			<img src="images/CPDwebsiteFinal2_19.jpg" width="82" height="265" alt=""></td>
		<td colspan="2">
			<img src="images/Rightbodyimg.jpg" width="291" height="261" alt=""></td>
		<td width="8" height="265" rowspan="2">
			<img src="images/spacer.gif" width="8" height="265" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/CPDwebsiteFinal2_22.jpg" width="517" height="4" alt=""></td>
		<td colspan="2">
			<img src="images/CPDwebsiteFinal2_23.jpg" width="291" height="4" alt=""></td>
	</tr>
	
    <tr>
		<td width="898" height="401" colspan="9">
          
          <div id="content">
          <div style="position:relative; height:401px">
    <div style="position:absolute;z-index:1"> 
        <img src="ExtraPhotos/images/Borderbottom.png" alt="">
    </div>
    <div style="position:absolute;top:44px;left:-115px; width:600px; height:430px; z-index:2;font-size:200%;">
      <a href="http://www.ebay.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Precision Machining','','WebExxx/images/images/Precision-Maching.jpg',0)"><img src="WebExxx/images/Precision-Maching.jpg" name="Precision Machining" width="247" height="148" border="0" alt=""></a></div>
</div>

         <div style="position:absolute;top:935px;left:535px; width:600px; height:430px; z-index:2;font-size:200%;">
           <a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Precision Sheetmetal','','WebExxx/images/images/Precision-Sheet-metal.jpg',0)"><img src="WebExxx/images/Precision-Sheet-metal.jpg" name="Precision Sheetmetal" width="244" height="148" border="0" alt=""></a></div>
</div>
 
 <div style="position:absolute;top:935px;left:800px; width:600px; height:430px; z-index:2;font-size:200%;">
 <a href="http://www.cpd-corp.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gasket','','WebExxx/images/images/Gasket-die-cutting-.jpg',0)"><img src="images/Gasket-die-cutting-.jpg" alt="Gasket" name="Gasket" width="245" height="148" border="0"></a>
 


 
 <div style="position:absolute;top:158px;left:-530px; width:600px; height:430px; z-index:2;font-size:200%;">
   <a href="http://www.ebay.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Assembly','','WebExxx/images/images/Assembly-&-turn-key.jpg',0)"><img src="WebExxx/images/Assembly-&-turn-key.jpg" name="Assembly" width="244" height="146" border="0" alt=""></a></div>
</div>

 <div style="position:absolute;top:1090px;left:535px; width:600px; height:430px; z-index:2;font-size:200%;">
   <a href="http://www.instructables.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Engineering','','CPD folder/images/Engineering.jpg',0)"><img src="ExtraPhotos/images/Engineering.jpg" name="Engineering" width="244" height="146" border="0" alt=""></a></div>

<div style="position:absolute;top:1090px;left:800px; width:600px; height:430px; z-index:2;font-size:200%;">
    <a href="http://www.hackaday.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Quality','','CPD folder/images/Quality-Assurance.jpg',0)"><img src="images/Quality-Assurance.jpg" name="Quality" width="244" height="146" border="0" alt=""></a></div>


	
    </tr>
	<tr>
		<td width="898" height="19" colspan="9">
			<img src="images/spacer.gif" width="898" height="19" alt=""></td>
	</tr>
	
    <tr>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="16" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="126" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="154" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="121" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="116" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="69" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="63" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="228" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
	</tr>
techbuilder is offline   Reply With Quote
Old 13th January 11, 02:41 PM   #7
techbuilder
WLC Member
 
Join Date: Jan 2011
Posts: 25
Default Re: Internet explorer 8 gaps problem?

I admit defeat and don't have a choice but to start from scratch

any good css tutorial sites that show you how to do it the right way?
techbuilder is offline   Reply With Quote
Old 13th January 11, 07:06 PM   #8
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Internet explorer 8 gaps problem?

You need to use css to do this as a table-less out. That tabled structure is going to kill you. What is supposed to be in the middle of that layout, a video?
rkrause is offline   Reply With Quote
Old 14th January 11, 12:02 AM   #9
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Internet explorer 8 gaps problem?

Quote:
I know the coding is horrible and I am a beginner at this but time is of the essence and if it wasn't I would do it the right way.
starting from scratch WILL actually save you time

and as ryan says
Quote:
That tabled structure is going to kill you
think seriously about the structure before committing to building it. get your calculator out and work out all your margins/paddings etc.
build a basic wireframe first and get the layout issues out of the way. doesnt matter if it looks ugly, just need to get it all properly positioned.
then fill with your images/content

a page such as your does not need to have as much code as it does, and the table is creating extra fluff/confusion that will make it extremely difficult to rectify.
for instance you could use a structure similar to this

HTML Code:
<body>
<div id="pagewrapper">
<div id="header">header goes here</div>
<div id="nav">navigation goes here</div>
<div id="content">content goes here</div>
<div id="footer">footer goes here</div>
</div>
</body>
do your navigation as an unordered list
HTML Code:
<ul id="mainmenu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
</ul>
every list item can have its own class name as well.
there are heaps of online tutorials regarding using ul's for menus.
the same can be done with the footer div as well
as for the content you can then subdivide that div as needed ie leftcol, rightcol etc.

set your background images in the css
use css over images as much as is possible
and remember the box model principle
margin border padding width padding border margin

so a div with the following
Code:
width:100px
margin:10px /* as for different amounts for each side I always just remember 'TRouBLe' */
padding:10px;
border: 10px solid #666;

would actually take up 160px (width) on screen
ie (particularly older versions) will no doubt have a fit and do some silly margin/padding error which will drive you nuts unless you add
display:inline; to the div in question. then it seems ie plays nicely.

set your link styles h1-h6 and paragraph styles also in your css
try to avoid align tags within your html. all alignment should be taken care of with css

once you've got the basic layout complete its just a matter of duplicating the page and adding the page specific content.
Phreaddee is offline   Reply With Quote
Old 14th January 11, 09:47 AM   #10
techbuilder
WLC Member
 
Join Date: Jan 2011
Posts: 25
Default Re: Internet explorer 8 gaps problem?

Thank you very much Phreaddee

here's the new codding for my homepage that i've got so far

XHTML
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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Style2.css"/>


</head>

<body>
<div id="container">
<div id="header">
<ul id="navbar">
  <li><a href="home.html" id="home">Home</a></li>
  <li><a href="manufacturing.html" id="manufacturing">Manufacturing</a></li>
  <li><a href="services.html" id="services">Services</a></li>
  <li><a href="aboutus.html" id="aboutus">AboutUs</a></li>
  <li><a href="contactus.html" id="contactus">ContactUs</a></li>
  <li><a href="requestforquote.html" id="requestforquote">RequestforQuote</a></li>
  </ul>
  </div>
</div>
</body>
</html>
And here is my CSS

Code:
*{
	padding:0;
	margin:0;
}

body {
	font-family:Calibri;	
	padding:0;
	margin:0;
	background-color:#000000;
}

#container {
	width:897px;
	padding:0;
	margin:auto;
}

#header{
	background-repeat:no-repeat;
	background-image:url(Banner.png);	
	height: 158px;
	width: 897px;
	margin-top: 20px;
	clear: both;
}

#navbar {
	margin: 0px;
	padding: 0px;
	margin-left: 5px;
		
	list-style: none;
}

#navbar a {
	text-decoration: none;
	display:block;
	float:left;
	text-indent: -5000px;
}

#navbar li{
float: left;
}

#navbar #home{	
	background-image:url(Home.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 180px;
	width: 120px;
	height: 58px;
}

#navbar #home:hover{
	background-position: 0-58px;
}

#navbar #manufacturing{	
	background-image:url(Manufacturing.png);		
	background-repeat:no-repeat;
	background-position: 0 0;
	margin-top:180px;
	margin-left:1px;	
	width: 154px;
	height: 58px;
}
#navbar #manufacturing:hover{
	background-position: 0 -58px;
}

#navbar #services{	
	background-image:url(Services.png);			
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 121px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #services:hover{
	background-position: 0 -58px;
}

#navbar #aboutus{	
	background-image:url(About-Us.png);			
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 129px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #aboutus:hover{
	background-position: 0 -58px;
}

#navbar #contactus{
	background-image:url(ContactUs.png);					
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 132px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #contactus:hover{
	background-position: 0 -58px;
}

#navbar #requestforquote{	
	background-image:url(RequestForQuote.png);					
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 229px;
	height:58px;
	margin-left: 0px;
	margin-top: 180px;
		
	
}

#navbar #requestforquote:hover{
	background-position: 0 -58px;
}
for some reason only the home button doesn't roll over in internet explorer
but all the other buttons do.
The width is correct so I have no clue
techbuilder is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:49 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.