Skip navigation
DKphotos112
Currently Being Moderated

Main content moves as window is resized

Aug 13, 2013 5:27 PM

Tags: #help #adobe #content #jquery #mac #div #html #javascript #images #css #code #layout #html5 #moves

Hi, I cant seem to find whats causing this problem im sure its a very simple mistake that I must be missing.

 

Once page is resized the middle content moves to the side as if the navbar has a smaller bottom margin.

 

http://s14.postimg.org/ooi7s4929/Screen_Shot_2013_08_14_at_01_10_31.png

http://s10.postimg.org/q3a9yy92x/Screen_Shot_2013_08_14_at_01_10_36.png

 

 

 

HTML:

 

<!doctype html>

<html>

<head>

<link rel="shortcut icon" href="favicon.ico" >

   <link rel="icon" type="image/gif" href="../animated_favicon1.gif" >

<title>Portfolio</title>

<meta charset="utf-8">

 

 

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

<script type="text/javascript">

 

 

<script src="js/jquery-1.7.2.min.js"></script>

<script src="js/lightbox.js"></script>

<link href="css/lightbox.css" rel="stylesheet"/>

<style type="text/css">

a {

          font-size: 15px;

          color: #777777;

}

body,td,th {

          font-size: 15px;

          color: #444444;

          font-family: "Josefin Slab";

}

a:link {

          text-decoration: none;

          color: #444444;

}

a:visited {

          text-decoration: none;

          color: #444444;

}

a:hover {

          text-decoration: none;

          color: #60baec;

}

a:active {

          text-decoration: none;

          color: #444444;

}

 

 

</style>

 

 

<script type="text/javascript">

 

 

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_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_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 text="#444444" link="#444444" vlink="#60baec" alink="#444444" onLoad="MM_preloadImages('images/Studio_06-Home-roll-over.jpg','image s/Studio_14-Blog-roll-over.jpg','images/Studio_16-contact-roll-over.j p g','../images/home_03-roll-over.jpg','images/home_03-roll-over.png')" >

 

 

<div class="wrapOverall">

 

 

<div class="container" id="header container"><div class="header"><a href="../index.html"><img src="images/Home-Page_03.png" name="Logo" width="448" height="69" class="logo" id="Logo" onMouseOver="MM_swapImage('Logo','','images/home_03-roll-over.png',1) " onMouseOut="MM_swapImgRestore()" border="0" /></a></div>

  <div class="navMain">

             

          <div class="navMain">

             

                         <ul>

                         <li><span style="font-family: 'Josefin Slab'"><a href="Home.html">HOME</a>

                               </span>

                           <li><span style="font-family: 'Josefin Slab'"><a href="../Portfolio/Portfolio.html">PORTFOLIO</a>

                               </span>

                           <li><span style="font-family: 'Josefin Slab'">PRICING

                               </span>

                         <li><span style="font-family: 'Josefin Slab'"><a href="../About/About.html">ABOUT</a>

                         </span>

                <li><span style="font-family: 'Josefin Slab'">BLOG

                </span>

                <li><span style="font-family: 'Josefin Slab'"><a href="../Contact/Contact.html">CONTACT</a></span>

            </ul>

              

        </div><!--END navMain-->

            

</div><!--END logo-->

         

</div><!--END header--></div>

 

 

     

<!--MAIN CONTENT-->

 

 

<div class="imageCrop">

 

 

 

 

 

 

<center>

  <a href="Wedding Photography/Wedding Photography.html"><img src="images/croped images/Wedding-photography-crop.png" width="1094" height="166" class="wedding" onMouseOver="MM_swapImage('Wedding','','images/Portfolio_Wedding-roll -over.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center>

 

 

<div class="container" id="container"><center>

  <a href="Wedding Photography/Wedding Photography.html"><img src="images/Portfolio_Wedding.png" name="Wedding" width="294" height="30" class="weddingTxt" id="Wedding" onMouseOver="MM_swapImage('Wedding','','images/Portfolio_Wedding-roll -over.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center></div>

 

 

 

 

 

 

<center>

  <a href="Studio Photography/Studio Photography.html"><img src="images/croped images/Studio-photography-crop.png" width="1094" height="166" class="studio" onMouseOver="MM_swapImage('Studio','','images/Portfolio_Studio-roll-o ver.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center>

 

 

<div class="container" id="container"><center>

  <a href="Studio Photography/Studio Photography.html"><img src="images/Portfolio_Studio.png" name="Studio" width="262" height="30" class="studioTxt" id="Studio" onMouseOver="MM_swapImage('Studio','','images/Portfolio_Studio-roll-o ver.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center></div>

 

 

 

 

<center>

  <a href="Still Life Photography/Still Life Photography.html"><img src="images/croped images/Still_Life-photography-crop.png" width="1094" height="166" class="still" id="Image1" onMouseOver="MM_swapImage('StillLife','','images/Portfolio_Still-Life roll over.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center>

 

 

<div class="container" id="container"><center>

  <a href="Still Life Photography/Still Life Photography.html"><img src="images/Portfolio_Still-Life.png" name="StillLife" width="294" height="30" class="stillTxt" id="StillLife" onMouseOver="MM_swapImage('StillLife','','images/Portfolio_Still-Life roll over.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center></div>

 

 

 

 

<center>

  <a href="Street Photography/Street Photography.html"><img src="images/croped images/Street-photography-crop.png" width="1094" height="166" class="street" onMouseOver="MM_swapImage('Street','','images/Portfolio_Street-roll-o ver.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center>

 

 

<div class="container" id="container"><center>

  <a href="Street Photography/Street Photography.html"><img src="images/Portfolio_Street.png" name="Street" width="262" height="30" class="streetTxt" id="Street" onMouseOver="MM_swapImage('Street','','images/Portfolio_Street-roll-o ver.jpg',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center></div>

 

 

 

 

 

 

<center>

<img src="images/croped images/Client_Gallery-photography-crop.png" width="1094" height="166" class="client" onMouseOver="MM_swapImage('Client','','images/Portfolio_Client-Galler y roll over.png',1)" onMouseOut="MM_swapImgRestore()" border="0" />

</center>

 

 

<div class="container" id="container"><center>

  <a href="#"><img src="images/Portfolio_Client-Gallery.png" name="Client" width="195" height="30" class="clientTxt" id="Client" onMouseOver="MM_swapImage('Client','','images/Portfolio_Client-Galler y roll over.png',1)" onMouseOut="MM_swapImgRestore()" border="0" /></a>

</center></div>

 

 

 

 

</div>

 

<!-- END MAIN CONTENT-->

 

 

<div id="containerFooter">

<div id="Box1" style="font-family: 'Josefin Slab'">

<p>All content <span style="font-size: 20px">©</span> DKphotos 2013</p>

</div> <!--end Box1 -->

 

 

<div id="Box2">

<p><script type="text/javascript">

// BeginOAWidget_Instance_2149022: #OAWidget

 

 

          var urlToLike = 'http://www.facebook.com/DKphotos.net';

          if (urlToLike == '') {

            urlToLike = window.location.href;

      }

      urlToLike = encodeURIComponent(urlToLike);

 

 

      var font = encodeURIComponent('arial');

 

 

 

 

document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=en_US&href='+urlToLike +'&layout=button_count&show_faces=false&width=450&height=150&action=li ke&font='+font+'&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:450; height:150"></iframe>')

 

 

 

 

// EndOAWidget_Instance_2149022

  </script>

          </div><!--END fbLike--></p>

</div> <!--end Box2 -->

<!--float clearing-->

<hr class="clearing" />

</div> <!--end Container -->

 

 

 

 

</div><!--END wrapOverall-->

</body>

</html>

 

 

 

 

 

 

 

CSS:

 

@charset "utf-8";

/* CSS Document */

 

 

 

 

 

body {

          background-image:url(images/bg_body.jpg);

          background-color:#ffffff;

          background-attachment:fixed;

          background-position:top;

 

 

}

 

 

 

 

 

 

.wrapOverall {

          width: 1920px;

          display: inline;

}

 

 

.container {

width: 100%;

min-width: 1020px;

max-width: 100%;

}

 

 

.header img.logo{

          float: left;

          margin: 0px 15px 0px 15px;

          margin-bottom: 100px;

 

}

 

 

 

 

hr{

   border: #3FF;

}

 

 

 

 

.img.logo, .navMain {

width: auto;

min-height: 10px;

border: 0;

/*to reduce float drop issues in IE*/

word-wrap: break-word;

}

.img.logo {margin-left: 8px; float: left;}

.navMain {margin-left: 10px; margin-top: 10px; margin-bottom: 40px; float:right;}

/**Clear floats after the boxes**/

.clearing {

clear:both;

visibility:hidden;

line-height:0;

font-size:1px;

display:block;

}

 

 

 

 

 

 

#containerFooter {

 

 

width: 100%;

min-width: 650px;

max-width: 100%;

 

 

}

 

 

 

 

 

 

#containerFooter {

font-family: Verdana, Arial, Helvetica, sans-serif;

border: 0;

margin:0 auto; /*centered*/

overflow:hidden; /*float containment*/

}

 

 

#Box1, #Box2 {

          width: auto;

          min-height: 10px;

          border: 0;

          /*to reduce float drop issues in IE*/

          word-wrap: break-word;

}

#Box1 {margin-left: 8px; float: left;}

#Box2 {margin-left: 20px; float: left;}

/**Clear floats after the boxes**/

.clearing {

clear:both;

visibility:hidden;

line-height:0;

font-size:1px;

display:block;

}

 

 

/* ##############################*/

/*    General Navigation Rules   */

/* ##############################*/

 

 

.navMain ul {

          margin: 0px;

          padding: 0px;

          font-size: 14px;

}

.navMain ul li {

          margin: 0px;

          padding: 0px 0px;

          list-style: none;

          display: inline;

}

.navMain ul li a {

          margin:0px;

          padding:0px 10px;

 

}

 

 

.navMain ul li a:hover {

          font-size: 15px;

}

 

 

 

.imageCrop img.wedding{

          z-index: -1;

          margin: 20px 0px 0px 0px;

}

 

 

.imageCrop img.weddingTxt{

          margin: 20px 0px 0px 0px;

}

 

 

 

 

.imageCrop img.studio{

          z-index: -1;

          margin: 20px 0px 0px 0px;

}

 

 

 

 

.imageCrop img.studioTxt{

          margin: 20px 0px 0px 0px;

}

 

 

 

 

.imageCrop img.still{

          z-index: -1;

          margin: 20px 0px 0px 0px;

}

 

 

.imageCrop img.stillTxt{

          margin: 20px 0px 0px 0px;

}

 

 

 

 

.imageCrop img.street{

          z-index: -1;

          margin: 20px 0px 0px 0px;

}

 

 

.imageCrop img.streetTxt{

          margin: 20px 0px 0px 0px;

}

 

 

.imageCrop img.client{

          z-index: -1;

          margin: 20px 0px 0px 0px;

}

 

 

.imageCrop img.clientTxt{

          margin: 20px 0px 30px 0px;

}

 

 

 

 

 

 

 

          #header, #containerFooter {

                    width:100%;

                    float:left;

          }

 

                    #containerFooter {

          position: fixed;

          bottom: -145px;

          z-index: 500;

          background-color: #FFF;

                      }

 

 

 


Thanks!

 
Replies
  • Currently Being Moderated
    Aug 13, 2013 8:13 PM   in reply to DKphotos112

    You are using old HTML code in an HTML5 document.  This can cause browsers to go into a quirks mode because it has to guess at what certain tags mean.  For instance, <center> is not valid HTML in HTML5, and was last valid in HTML4.  It was used to center text, not containers.  One possible solution is to change the doctype of your document back to the old HTML4 specification or you need to take a crash course of centering with CSS using margins.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points