Ok...I know this has to do something with IE6 compatability--as this works great in IE7. Basically, I am getting about a 3px gap below the images I am using and the bottom border. I've messed around with the header quite a bit...
The header pic (sunbanner.jpb) is 796 x 295 px.
I have messed with explicitly putting a variety of different heights on "div#header" and leaving it blank.
Please help.
Here is my HTML:
<!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=iso-8859-1" /><title>
About The Artist
</title><link href="mainstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type='text/javascript' >
function EvImageOverChange(name, direction)
{
switch(direction)
{
case 'in': name.src = 'Site_Images/' + name.id + 'Selecting.bmp';
break;
case 'out' : name.src = 'Site_Images/'+ name.id + 'white.bmp';
break;
case 'neither' : name.src = 'Site_Images/' + name.id + 'selected.bmp';
break;
}
}
</head>
<body>
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm" accept="4">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/=" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<script src="/WebResource.axd?d=7wDI-3sNJCame3klgZ_Veg2&t=633185801258125000" type="text/javascript"></script>
<div id='main'>
<div id='header' >
<img src="Site_Images/Sunbanner.jpg" />
</div>
<div id='aboutbutton'>
<input type="image" name="ctl00$AboutButton" id="ctl00_AboutButton" OnMouseOver="javascript
:EvImageOverChange(this, 'in');" OnMouseOut="javascript
:EvImageOverChange(this, 'neither');" src="Site_Images/ctl00_aboutbuttonselected.bmp" onclick="javascript
:WebForm_DoPostBackWithOptions( new WebForm_PostBackOptions("ctl00$AboutButton&qu ot;, "", false, "", "default.aspx", false, false))" style="border-width:0px;" />
</div>
<div id='exhibitbutton'>
<input type="image" name="ctl00$ShowsButton" id="ctl00_ShowsButton" OnMouseOver="javascript
:EvImageOverChange(this, 'in');" OnMouseOut="javascript
:EvImageOverChange(this, 'out');" src="Site_Images/ctl00_showsbuttonwhite.bmp" onclick="javascript
:WebForm_DoPostBackWithOptions( new WebForm_PostBackOptions("ctl00$ShowsButton&qu ot;, "", false, "", "shows.aspx", false, false))" style="border-width:0px;" />
</div>
<div id='awardsbutton'>
<input type="image" name="ctl00$AwardsButton" id="ctl00_AwardsButton" OnMouseOver="javascript
:EvImageOverChange(this, 'in');" OnMouseOut="javascript
:EvImageOverChange(this, 'out');" src="Site_Images/ctl00_awardsbuttonwhite.bmp" onclick="javascript
:WebForm_DoPostBackWithOptions( new WebForm_PostBackOptions("ctl00$AwardsButton&q uot;, "", false, "", "awards.aspx", false, false))" style="border-width:0px;" />
</div>
<div id='artbutton'>
<input type="image" name="ctl00$SunsartButton" id="ctl00_SunsartButton" OnMouseOver="javascript
:EvImageOverChange(this, 'in');" OnMouseOut="javascript
:EvImageOverChange(this, 'out');" src="Site_Images/ctl00_sunsartbuttonwhite.bmp" onclick="javascript
:WebForm_DoPostBackWithOptions( new WebForm_PostBackOptions("ctl00$SunsartButton& quot;, "", false, "", "artgallery.aspx", false, false))" style="border-width:0px;" />
</div>
<div id='container' style="position:relative; margin-top:59px;">
<div id='sunpic'>
<img id="ctl00_ContentPlaceHolder2_Image1" src="Site_Images/Portaitofsun.jpg" style="width:250px;border-width:0px;" />
</div>
<div id='abouttext' >
<span id="ctl00_ContentPlaceHolder2_Label1"><p>Sun Bauer was born in the beautiful country of Korea. At an early age, Sun developed a great love and appreciation of art. Using a limited amount of art supplies that were available to her, she developed her art skills as a self-taught artist. During her time in school, Sun entered many competitions and did very well. At the age of 19 she left Korea to live in the United States. She continued to develop her art, and entered in several competitions for the first time within the United States, winning several awards. Sun, eventually, moved to Kansas and got married to Bob Bauer. Together they raised two sons: Daniel, and Tim. Sun has always encouraged her children to express themselves using art. Tim is an English teacher in Korea, and Daniel followed in his motherâs footstep, is very active as an artist and musician, graduated from the Kansas City Art Institute.
</p></span>
<span id="ctl00_ContentPlaceHolder2_Label2"><p>Sun believes that art is an ongoing and continuous learning experience. In her practice as a growing artist she began to take classes at the Johnson County Community College. There, she worked and studied with many local artists. In an effort to continue her study, Sun has attended several workshops and seminars. She is always taking classes and studying the works of other artists to learn of new techniques in many types of Media. She has taught private classes in her home to share her talents. Although, she is knowledgeable in many types of Media, Sun prefers to work with oils and watercolors. Her work consists of portraits, landscapes, murals, and still life paintings. Sunâs paintings range in size from 3x4âinch miniatures to 30x40âinch wall hangings to full wall murals. Sun has the remarkable ability to look at people, objects, and landscapes and reproduce them within her art, with great beauty. It shows in her Portraits and her commissioned artwork. Recently, Sun has become more interested in working with miniature paintings but she also is still working on normal size art works. She has a true passion for art and it shows.</p></span>
<span id="ctl00_ContentPlaceHolder2_Label3"><p></p></span>
<span id="ctl00_ContentPlaceHolder2_Label4"><p> </p></span>
<span id="ctl00_ContentPlaceHolder2_Label5"><p> </p></span>
</div>
</div>
<div id='footer'>
<a id="ctl00_HyperLink1" href="Admin/addpictures.aspx">Login</a>
<span style="margin-left:40px">Future Copyright Info</span>
</div>
</div>
<div>
<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="tJTCzFVfkJgGp20w36tpLQ2" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLBxYXBDQKG9eWLAgK90NjoBwKC2bvuAgKnqOJzmGwgaud vHWljRFC94SgETv5Y35s=" />
</div></form>
</body>
</html>
CSS:
body {
font-family: sans-serif;
margin: 0;
margin-top:5px;
padding: 0;
background: url(site_images/back.jpg) center;
background-repeat: repeat-y;
}
h1, h6 {
margin: 0;
font-weight: normal;
}
div#main {
width:800px;
margin-left:auto;
margin-right:auto;
}
div#container {
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
}
div#header {
border:2px solid black;
margin-bottom:5px;
background:green;
}
div#footer
{
background:white;
border-bottom: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
padding:10px;
}
div#test {
font: arial;
}
div#aboutbutton {
border: 2px solid black;
float:left;
height:50px;
}
div#addpicturesbutton
{
border: 2px solid black;
float:left;
height:50px;
}
div#addshowbutton
{
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
height:50px;
}
div#addawardsbutton
{
border: 2px solid black;
float:left;
clear:right;
height:50px;
}
div#exhibitbutton {
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
height:50px;
}
div#awardsbutton {
border: 2px solid black;
float:left;
height:50px;
}
div#artbutton {
border-top: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
float:left;
height:50px;
}
div#sunpic
{
margin-top:10px;
margin-left:10px;
margin-right:10px;
border:2px solid black;
height:351px;
width:250px;
float:left;
}
div#abouttext
{
margin:10px;
font-family: sans-serif;
}
#login
{
background:white;
border-right:2px solid black;
}
.absolute
{
position: absolute;
top:50px;
left:50px;
background-color: #5795df;
width: 320px;
border:double 2px black;
text-align:center;
}
.MyView
{
border-color: Blue;
}
.MyView td
{
border-color: Blue;
}
Why roughly 3px gap at bottom of stuff?
