Website Help

Twentymac · 14 Aug 2009 at 17:19

Im just making a little site for myself as a gallery/portfolio and i've come accross a problem.

In dreamweaver all seems ok. but when i save and open the site in firefox or internet explorer a gap appears.

http://i23.photobucket.com/albums/b379/Macca323/sdasdas.jpg

http://i23.photobucket.com/albums/b379/Macca323/dreamweaevve.jpg

I've used two div layers which has added two different css stylesheets following a tutorial from youtube.

First sheet is for the whole layout, then another for the content box,first time using div layers mind you

Does anyone know why there is a gap here. ?

chrisxuk · 14 Aug 2009 at 17:24

Have you got an extra </div> in there somewhere? Something similar happened to me before and it was because i had one too many </div>'s

Edward01 · 14 Aug 2009 at 19:08

I really like your background, did you make it?

yeah random div maybe, or a margin or padding set to the wrong amount. If you cant sort it post up your html and css and we'll be able to fix it for you i'm sure.

Twentymac · 14 Aug 2009 at 19:34

Code:

<html>
<head>
<title>:: Twentymac Photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-image: url(images/bg.gif);
}
-->
</style>
<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>
<link href="site_layout.css" rel="stylesheet" type="text/css">
<link href="site_layout_content.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/index_03_MO.gif','images/index_04_MO.gif','images/index_05_MO.gif','images/index_06_MO.gif')">
<!-- Save for Web Slices (Untitled-1) -->
<div id="site_layout">
  <table width="650" height="768" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="6">
        <img src="images/index_01.gif" width="650" height="206" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="images/index_02.gif" width="137" height="37" alt=""></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/index_03_MO.gif',1)"><img src="images/index_03.gif" name="Image9" width="75" height="37" border="0" align="absbottom"></a></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/index_04_MO.gif',1)"><img src="images/index_04.gif" name="Image10" width="100" height="37" border="0"></a></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/index_05_MO.gif',1)"><img src="images/index_05.gif" name="Image11" width="96" height="37" border="0"></a></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/index_06_MO.gif',1)"><img src="images/index_06.gif" name="Image12" width="101" height="37" border="0"></a></td>
      <td>
        <img src="images/index_07.gif" width="141" height="37" alt=""></td>
      </tr>
    <tr>
      <td colspan="6"><div id="site_layout_content">
        <p>&nbsp;</p>
        <p><img src="images/home.gif" width="300" height="50"></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
		<p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div></td>
      </tr>
    <tr>
      <td colspan="6"><img src="images/index_09.gif" width="650" height="37" alt=""></td>
      </tr>
  </table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

thats it so far. dunno where all those scripts have come from ?

Nah i didnt make the bg found it on the net somewhere, im going to make one similar though, just all my own stuff on it.

Oh and i have to have all those spaces in there cause if not then the white content space just goes small

chrisxuk · 14 Aug 2009 at 21:00

I've managed to get it a little closer. But not all the way

All though this was without all the images. So try it, it might work

Code:

<html>
<head>
<title>:: Twentymac Photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-image: url(images/bg.gif);
}
-->
</style>
<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>
<link href="site_layout.css" rel="stylesheet" type="text/css">
<link href="site_layout_content.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/index_03_MO.gif','images/index_04_MO.gif','images/index_05_MO.gif','images/index_06_MO.gif')">
<!-- Save for Web Slices (Untitled-1) -->
<div id="site_layout">
  <table width="650" height="768" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="6">
        <img src="images/index_01.gif" width="650" height="206" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="images/index_02.gif" width="137" height="37" alt=""></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/index_03_MO.gif',1)"><img src="images/index_03.gif" name="Image9" width="75" height="37" border="0" align="bottom"></a></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/index_04_MO.gif',1)"><img src="images/index_04.gif" name="Image10" width="100" height="37" border="0"></a></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/index_05_MO.gif',1)"><img src="images/index_05.gif" name="Image11" width="96" height="37" border="0"></a></td>
      <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/index_06_MO.gif',1)"><img src="images/index_06.gif" name="Image12" width="101" height="37" border="0"></a></td>
      <td>
        <img src="images/index_07.gif" width="141" height="37" alt=""></td>
      </tr>
    <tr>
      <td colspan="6"><div id="site_layout_content">
        <p><img src="images/home.gif" width="300" height="50"></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
		<p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div></td>
      </tr>
    <tr>
      <td colspan="6"><img src="images/index_09.gif" width="650" height="37" alt=""></td>
      </tr>
  </table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

Twentymac · 14 Aug 2009 at 23:33

Hhmm its still the same but works on internet explorer now, but the mouseovers dont work on IE. i think i may be something to do with that.

Here it is in Firefox :
http://i23.photobucket.com/albums/b379/Macca323/firefoxpreview.jpg

Here it is in IE :
http://i23.photobucket.com/albums/b379/Macca323/iepreview.jpg

Also i get the ActiveX thing blocking on IE, is that down to the mouseovers i take it ?

TheMagic1an · 15 Aug 2009 at 02:46

You don't appear to have a doctype, you should add one.

I notice you're using a table, use div's instead.

The activeX in IE will disappear when you upload your site, it only appears locally.

Twentymac · 15 Aug 2009 at 02:58

Doctype added.

Im sort of new to web design, able to make some decent designs but when it comes to making the site (dreamweaver etc) i know nothing

Edward01 · 15 Aug 2009 at 03:07

add border-collapse to your table maybe.

If not post your css up as well and i'll have a proper look tomorrow

Twentymac · 15 Aug 2009 at 12:10

style_layout

Code:

#site_layout {
	height: auto;
	width: 100%;
}

Style_layout_content

Code:

#site_layout_content {
	background-color: #FFF;
	height: auto;
	width: auto;
	top: 0px;
	background-image: url(images/index_08.gif);
}

Twentymac · 18 Aug 2009 at 10:45

Anything Edward01 ?

Edward01 · 18 Aug 2009 at 11:59

Sorry forgot about this. First of the obligatory you shouldn't code in tables etc etc.

Secondly, I think it's because of the <p> values before and around your home.gif image. Delete the the <p>&nbsp</p> before and the <p> </p> around the image and you should be fine. Basically firefox and internet explorer interprets them differently.

Let me know if that worked.

Twentymac · 18 Aug 2009 at 12:22

Yep that worked fine chap.

Just gotta figure out how to keep all the white space in that content area because if i delete just one line gaps appear at the top and bottom between the header and footer parts