EDIT:
RESOLVED: THANKS splitpea
Hi,
I am fairly inexperienced with web development and am trying to bring myself up to speed. I have done a layout for my personal website and am having problems with the div backgrounds.
I have a "container" div that wraps around all of my content. I set it's background color to white. Internet Exploder 7 and Dreamweaver's preview render this how I want it to be seen. Firefox, Safari, Chrome, and IE 8 do not.
Any suggestions would be greatly appreciated
Thanks,
Whit
Here is what I want:
Here is what I am getting:
Here is my site code
HTML
RESOLVED: THANKS splitpea
Hi,
I am fairly inexperienced with web development and am trying to bring myself up to speed. I have done a layout for my personal website and am having problems with the div backgrounds.
I have a "container" div that wraps around all of my content. I set it's background color to white. Internet Exploder 7 and Dreamweaver's preview render this how I want it to be seen. Firefox, Safari, Chrome, and IE 8 do not.
Any suggestions would be greatly appreciated
Thanks,
Whit
Here is what I want:
Here is what I am getting:
Here is my site code
HTML
Code:
<!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=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="source.js"></script>
</head>
<body bgcolor="#E1E1E1">
<div id='container'>
<div id='header'></div>
<div id='spacer'></div>
<div id='links'>
<a href='#' onClick="makeRequest('contentMain', 'default')">Home</a> |
<a href='#' onClick="makeRequest('contentMain', 'about')">About Me</a> |
<a href='#' onClick="makeRequest('contentMain', 'resume')">Resume</a> |
<a href='#' onClick="makeRequest('contentMain', 'links')">Links</a>
</div>
<div id='pageContent'>
<div id='contentLeft'>
<div id='topContentLeft'>
<p align="center">Connect:</p>
<p align="center" class="shortPara">
<a href="http://facebook.com/XXXX"><img src="whitimages/facebook-button.gif" alt="facebook" border="0" width="125" height="31"></a>
<br>
<a href="http://www.linkedin.com/in/xxxxx"><img src="whitimages/linkedin-button.gif" width="125" height="31" alt="linkedin" border=""></a>
<br>
<script language="javascript">
myvar = "mailto:";
myvar += "xxx";
myvar += "xxx@";
myvar += "xxx";
myvar += ".edu";;
document.writeln("<a href='" + myvar +"'><img src='whitimages/email-button.gif' width='125' height='31' alt='email' border=0></a>");
</script>
</div>
<div id='bottomContentLeft'>bottom content left</div>
</div>
<div id='contentMain'>content main</div>
<div id='contentRight'></div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
Code:
#container {
width: 850px;
height: 100%;
margin: 0 auto;
background-color: #FFFFFF;
font-family: Calibri, Verdana, Arial, sans-serif;
}
#header {
width: 850px;
float: left;
height: 57px;
background:url(images/index_01.gif);
display: inline;
}
#spacer {
width: 850px;
float: left;
height: 32px;
background:url(images/index_02.gif);
display: inline;
}
#links {
background-color: #FFF;
width: 850px;
height: 26px;
float: left;
background: url(images/index_03.gif);
text-align: center;
font-size: 12pt;
font-weight: bold;
text-align: center;
color: #bbbbbb;
display: inline;
}
#contentLeft
{
background-color: #FFF;
width: 213px;
float:left;
display: inline;
margin: 0;
}
#topContentLeft
{
background-color: #FFF;
width: 190px;
height: 160px;
overflow:hidden;
float: left;
background:url(images/index_04.gif);
background-repeat:no-repeat;
padding-top: 7px;
padding-right: 12px;
padding-left: 11px;
padding-bottom: 12px;
display: inline;
}
#bottomContentLeft
{
background-color: #FFF;
width: 190px;
height: 160px;
overflow:hidden;
float: left;
background:url(images/index_04.gif);
background-repeat:no-repeat;
padding-top: 7px;
padding-right: 12px;
padding-left: 11px;
padding-bottom: 12px;
display: inline;
}
#contentMain
{
background-color: #FFF;
width: 407px;
overflow:visible;
float: left;
padding-left: 5px;
padding-right: 5px;
display: inline;
}
#contentRight
{
background-color: #FFF;
width: 200px;
height: 385px;
background:url(images/index_06.gif);
background-repeat:no-repeat;
float: right;
padding-right: 9px;
padding-left: 10px;
padding-top: 5px;
display: inline;
}
#footer
{
width: 850px;
height: 22px;
background:#666;
float:left;
}