...OK back at it again, I've changed the layout of my site a little, and still have a wacky "whitespace" between two of my div tags. I've deleted any empty spaces beteeen <IMG> and <Div> tags, but still have my issue.
I found an unconventional way to fix it by extending my shadow to have a black background, but still want to figure out what's causing the issue so I can resolve it if I come across it in the future.
It probably wouldn't do much good by having you look at the url, because it looks correct when the original shadow background is now set to black, but here is my code:
</script>
<link href="ground_control.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('Images/images/images/GC_FinalMaster_MAIN_flatten_02_rollover.jpg','Imag es/images/images/GC_FinalMaster_MAIN_flatten_03_rollover.jpg','Imag es/images/images/GC_FinalMaster_MAIN_flatten_04_rollover.jpg')">
<div id="content">
<div id="header"><a href="groundcontrol.html"><img src="Images/images/images/GC_FinalMaster_MAIN_flatten_01.jpg" width="800" height="192" border="0" /></a></div>
<div id="graphics"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','Images/images/images/GC_FinalMaster_MAIN_flatten_02_rollover.jpg',1)">< img src="Images/images/images/GC_FinalMaster_MAIN_flatten_02.jpg" name="Image7" width="300" height="181" border="0" id="Image7"/></a><a href="firefly.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','Images/images/images/GC_FinalMaster_MAIN_flatten_03_rollover.jpg',1)">< img src="Images/images/images/GC_FinalMaster_MAIN_flatten_03.jpg" name="Image8" width="200" height="181" border="0" id="Image8"/></a><a href="scorpion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','Images/images/images/GC_FinalMaster_MAIN_flatten_04_rollover.jpg',1)">< img src="Images/images/images/GC_FinalMaster_MAIN_flatten_04.jpg" name="Image5" width="300" height="181" border="0" id="Image5"/></a></div><div id="text">
<div id="innovation_rugged"><img src="Images/images/images/GC_FinalMaster_MAIN_flatten_06.jpg" width="466" height="67"/></div>
<div id="graph">
<p>For the best results, you need the best technology. ION land systems give you the power and performance to acquire seismic data in any environment, under any conditions. From the Arctic to the jungle, the desert to transitional zones, we’ve got you covered. Rugged, reliable, and efficient, our portfolio of land acquisition systems is built with your survey requirements and preferences in mind. Whether the job demands cabled or cableless systems, analog or digital sensors, we’ve got you covered. And now, after combining the strengths of ARAM and ION, we are able to back our systems with an unmatched commitment to customer service.</p>
<p><span class="style2">[+]</span> Learn more about our portfolio of land systems by clicking on the icons above. </p>
<div id="learn_more"></div>
</div>
</div>
<div id="ion_land"><img src="Images/images/images/GC_FinalMaster_MAIN_flatten_11.jpg" /></div>
</div>
</body>
</html>
and here's my CSS:
#content {
background-repeat: repeat;
width: 845px;
margin-right: auto;
margin-left: auto;
vertical-align: top;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-image: url(Images/GC_shadow_new.png);
padding: 0px;
height: 100%;
}
#learn_more {
float: right;
padding-bottom: 0px;
padding-top: 0px;
}
body {
background-color: #FBFBFB;
background-image: url(background_gradient_grey.jpg);
background-repeat: repeat-x;
margin-right: auto;
margin-left: auto;
}
#graphics {
padding: 0px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
.style2 {color: #fcaf17}
#text {
background-color: #000000;
height: 305px;
width: 800px;
color: #FFFFFF;
padding: 0px;
margin-right: auto;
margin-left: auto;
}
#graph {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
width: 535px;
margin-right: auto;
margin-left: auto;
padding-right: 100px;
padding-left: 90px;
line-height: 2em;
height: 200px;
}
#ion_land {
width: 800px;
background-image: url(Images/images/images/ion_logo.jpg);
height: 100px;
padding: 0px;
margin-right: auto;
margin-left: auto;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#innovation_rugged {
padding-right: 20px;
padding-left: 130px;
padding-top: 0px;
padding-bottom: 0px;
}
#header {
margin-right: auto;
margin-left: auto;
width: 800px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-top-style: solid;
border-top-color: #000000;
border-right-color: #E3E3DF;
border-bottom-color: #E3E3DF;
border-left-color: #E3E3DF;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(Images/images/images/GC_FinalMaster_MAIN_flatten_01.jpg);
height: 192px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
