Ok,
I tried to make this easy. Basically, I have a header, then four buttons (floated), then a container (for my contentpage).
I didn't have to float the buttons..but I did want to give them "DIV" tags so that I could set up a border for each button. But, because they are DIV..I have to float them so that they are all on the same line. (There might be a better way to do this--I'm a newbie)
In IE7, since, the buttons are floated (about 50px in height) then the "container" that is to be below them is actually hidden behind the buttons, because the buttons are "out of the flow" since they are floated. If I set "margin-top:59px" to the container, it works great.
My problem is that float doesn't work the same in IE6 in that float doesn't seem to be displacing the container. In other words, if I remove the margin-top:59px..it works just fine in IE6. So...in order to have it work in IE7, I put the margin-top:59px in..but then I get a 59px gap between the buttons in IE6. Why does this work this way--how can I fix this?
I have put the code below:
Page:
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#header {
border:2px solid black;
margin-bottom:5px;
font-size:0;
}
div#aboutbutton {
border: 2px solid black;
float:left;
font-size:0;
}
div#exhibitbutton {
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
font-size:0;
}
div#awardsbutton {
border: 2px solid black;
float:left;
font-size:0;
}
div#artbutton {
border-top: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
float:left;
font-size:0;
}
div#container {
position:relative;
margin-top:59px;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
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;
}
Here is my page:
<%@ Master Language="
VB" CodeFile="MasterPage.master.
vb" Inherits="MasterPage" %>
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if lt IE 7]>
<link rel='stylesheet' type='text/css' href='ie6sheet.css' />
<![endif]-->
<title>Sun Bauer</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;
}
}
</script>
</head>
<body>
<form id="form1" runat="server" accept="4">
<div id='main'>
<div id='header' >
<img src="Site_Images/Sunbanner.jpg" />
</div>
<div id='aboutbutton'>
<asp:ImageButton ID="AboutButton" runat="server" ImageUrl="Site_Images/ctl00_aboutbuttonwhite.bmp" PostBackUrl="default.aspx" />
</div>
<div id='exhibitbutton'>
<asp:ImageButton ID="ShowsButton" runat="server" ImageUrl="Site_Images/ctl00_showsbuttonwhite.bmp" PostBackUrl="shows.aspx" />
</div>
<div id='awardsbutton'>
<asp:ImageButton ID="AwardsButton" runat="server" ImageUrl="Site_Images/ctl00_awardsbuttonwhite.bmp" PostBackUrl="awards.aspx" />
</div>
<div id='artbutton'>
<asp:ImageButton ID="SunsartButton" runat="server" ImageUrl="Site_Images/ctl00_sunsartbuttonwhite.bmp" PostBackUrl="artgallery.aspx" />
</div>
<div id='container' >
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id='footer'>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="Admin/addpictures.aspx">Login</asp:HyperLink>
<span style="margin-left:40px">Future Copyright Info</span>
</div>
</div>
</form>
</body>
</html>
Thanks SO much!
Rob
Float acts differently in IE6 than IE7
