OK, I am building a website for my brother and my example page is Premier Auto Source Inc.

Do you see that little darker grey strip between the two images (header and footer)? Here is my code from that /test2.php page:

<?include("header.php");?>


<div align="center">

<div id="outer">

<img src="/images/top.jpg" alt="TESTING" border="0" />




<img src="/images/bottom.jpg" alt="TESTING" border="0" />

</div>
</div>

and here is my corrosponding css file:

body {background-color: #0d0c0c;


}




div#outer {
position: absolute;
left: 50%;
width: 668px;
background-color:#0d0c0c;
margin-top:0px;
margin-bottom: 20px;
margin-left: -345px;
margin-right: 0;
padding:0px;
border:0;
}



Ok, now that you have that, First: why is it putting that little spacer grey stripe thing when I have all of mypadding set to 0? Second, how will I accomplish putting a div layer that will be seamless with my two images? I am experience with div layers, css and php, but I am pulling my hair out over here. PLEASE! HELP ME!!!!! I am on a time limit because this is for his personal business.

Hi KellyElizabeth,

I presume you are probably using IE to browse the page. I've checked your test page using the following browsers:

OS Browsers
Mac OS9 Netscape 4.77, 6.2 & 7.0 / Opera 5.00 & 6.03 / Internet Explorer 5.1
Mac OSX Netscape 7.1 / Mozilla 1.7.13 / iCab 3.0beta382 / Safari 2.0.4 /
Firefox 1.5.0.5 / Camino 1.0.2 / Internet Explorer 5.2 / Opera 7.54u1
WinXP Pro Firefox 1.0.6 / Internet Explorer 6.0 / Opera 9.00

And the only browsers out of these that exhibit the problem are:

OS Browsers
Mac OS9 Netscape 4.77 & 6.2
WinXP Pro Internet Explorer 6.0

The older Mac OS9 browsers I can understand, but IE 6.0 under Windows as well! Maybe these browsers are being picky about the way the code is presented to them.

The fix is to place the images on the same line:

<?include("header.php");?>

<div align="center">

<div id="outer">

<img src="/images/top.jpg" alt="TESTING" border="0" /><img src="/images/bottom.jpg" alt="TESTING" border="0" />

</div>
</div>

and this then works in all the above browsers.

Hope this helps you hit your deadline.

Dene

Try the following three things. One, if not all, should work:

1) Put the following code in your CSS

img {
   border:  none;
   margin:  0;
   padding:  0;
}

This will make sure there are no borders and no spacing for any of your images by default (this can, however, be overridden by inline styles or classes, so it's not etched in stone.)


2) Try the following:

<div id="outer"><img src="/images/top.jpg" alt="TESTING" border="0" /><img src="/images/bottom.jpg" alt="TESTING" border="0" /></div>

You'll notice how there are no spaces between any of it. IE can be picky that way sometimes.

Finally,

3) Specify width and height attributes for your images. This probably won't solve your problem...it's just good practice.

I like the site it looks good.

One other suggestion, don't nail yourself down with absolutely positioning everything, you'll create more headaches for yourself. Use the normal document flow to your advantage. Make a main "container" and set it to position:relative. Then lay out the rest inside the container. Position absolute for an entire design is just not necessary and carries its own set of ugly bugs.