CSS layout: background issues.

Discussion in 'Web Design and Development' started by hiddenpremise, May 1, 2010.

  1. hiddenpremise macrumors regular

    hiddenpremise

    Joined:
    Jul 25, 2008
    Location:
    Somewhere between my imagination and reality
    #1
    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:
    [​IMG]
    Here is what I am getting:
    [​IMG]

    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;
    }
    
    
     
  2. splitpea macrumors 6502a

    Joined:
    Oct 21, 2009
    Location:
    Among the starlings
    #2
    You need #container to expand to contain the floats. The best way to do this is to remove the height declaration and instead set it to "overflow: hidden" or "overflow: auto". Without this, the floats don't affect the actual height of the container. IE 7's rendering is technically incorrect.
     
  3. hiddenpremise thread starter macrumors regular

    hiddenpremise

    Joined:
    Jul 25, 2008
    Location:
    Somewhere between my imagination and reality

Share This Page