Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Footer background image works in FF and Safari but overlaps design in IE...

    Hi,

    I'm building a portfolio website and am still pretty new at websites. I added a footer for the first time and put a background image on it. My intent is to make the site work no matter what size the browser is. When I finished the design, I found out that IE doesn't seem to like background images on the footer. Is there any way to make it work or is it a lost cause?

    Let me know if you need any of the files.

    Thanks,
    Mark

    Link:
    http://www.markthibault.com/test/index.html

    Code:
    <html>
    <head>
    <title>Mark Thibault: Animation and Design</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link rel="stylesheet" href="/Scripts/_common/css/main.css" type="text/css" media="all">
    
    <link href="Scripts/multibox.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="all" /><![endif]-->
    
    <script type="text/javascript" src="Scripts/_common/js/mootools.js"></script>
    <script type="text/javascript" src="Scripts/overlay.js"></script>
    <script type="text/javascript" src="Scripts/multibox.js"></script>
    <style type="text/css">
          html, body
          {
             height: 100%;
             margin: 0;
             padding: 0;
    		 background:none;
    		 text-align:center;
    		 
          }
          div#container
          {
             height: auto !important;
             height: 100%;
             min-height: 100%;
          }
    	  * html #container {
        	 height: 100%;
          }
    
          h1
          {
             margin: 0 0 0px 0;
             padding: 0px;
             color: #083709;
          }
          h2
          {
             margin: -4px 0px;
             padding: 0 0px;
             border-bottom: 0px solid #ccc;
          }
          p
          {
             margin: 0;
             padding: 0px 0px; 
          }
          p#footer
          {
             margin: -612px 0 0 0;
             height: 611px;
             padding: 9px;
    		 background-image:url(images/backgroundgradient.jpg);
    		 background-position:center;
    		 background-repeat:no-repeat;
             text-align: center;
          }
    	  * html #footer
    	  {top::0}
       </style>
    
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="overflow:hidden" link="#CCCCCC">
    
    <div id="container">
    
    <!-- ImageReady Slices (structure final6.psd) -->
    <table id="Table_01" width="740" height="224" border="0" cellpadding="0" cellspacing="0" align="center" >
    	<tr>
    		<td colspan="13">
    	  </td>
    		<td>
    			<img src="images/MarkThibault2_02.png" width="37" height="82" alt=""></td>
    		<td>
    	  </td>
    	</tr>
    	<tr>
    		<td colspan="5" rowspan="2">
    	  </td>
    		<td colspan="8">
    			<img src="images/MarkThibault2_05.png" width="337" height="46" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_06.png" width="37" height="46" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_07.png" width="127" height="46" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="8">
    			<img src="images/MarkThibault2_08.png" width="337" height="62" alt=""></td>
    		<td rowspan="3">
    			<img src="images/MarkThibault2_09.png" width="37" height="95" alt=""></td>
    		<td rowspan="3">
    	  </td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<img src="images/MarkThibault2_11.png" width="34" height="33" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_12.png" width="70" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_13.png" width="19" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_14.png" width="109" height="22" alt=""></td>
    		<td colspan="2">
    			<img src="images/MarkThibault2_15.png" width="18" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_16.png" width="77" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_17.png" width="20" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_18.png" width="46" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_19.png" width="20" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_20.png" width="83" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_21.png" width="19" height="22" alt=""></td>
    		<td>
    			<img src="images/MarkThibault2_22.png" width="61" height="22" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="12">
    			<img src="images/MarkThibault2_23.png" width="542" height="11" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="70" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="19" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="109" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="77" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="20" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="46" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="20" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="83" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="19" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="61" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="37" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="127" height="1" alt=""></td>
    	</tr>
    </table>
    </h1>
    <!--<h2>
    
    <table id="Table_02" width="741" height="103" border="0" cellpadding="0" cellspacing="0" align="center">
    	<tr>
    		<td rowspan="7">
    			<img src="images/content_01.png" width="34" height="103" alt=""></td>
    		<td colspan="13">
    			<img src="images/content_02.png" width="374" height="7" alt=""></td>
    		<td rowspan="7">
    			<img src="images/content_03.png" width="168" height="103" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_04.png" width="37" height="16" alt=""></td>
    		<td rowspan="7">
    			<img src="images/content_05.png" width="127" height="103" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<img src="images/content_06.png" width="12" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_07.png" width="51" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_08.png" width="11" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_09.png" width="51" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_10.png" width="11" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_11.png" width="50" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_12.png" width="10" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_13.png" width="51" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_14.png" width="11" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_15.png" width="50" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_16.png" width="11" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_17.png" width="50" height="51" alt=""></td>
    		<td rowspan="2">
    			<img src="images/content_18.png" width="5" height="51" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="9" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="5">
    			<img src="images/content_19.png" width="37" height="87" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="42" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="13">
    			<img src="images/content_20.png" width="374" height="4" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="6">
    			<img src="images/content_21.png" width="186" height="16" alt=""></td>
    		<td colspan="7">
    			<img src="images/content_22.png" width="188" height="16" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="13">
    			<img src="images/content_23.png" width="374" height="14" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="13">
    			<img src="images/content_24.png" width="374" height="11" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="11" alt=""></td>
    	</tr>
    </table>
    
    </h2>!-->
    <p>     </p>
       </div></div>
    <!-- End ImageReady Slices -->
    <p id="footer" style="color:#CCCCCC">
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br>Contact:<br>(503) 278-0749  |  
    <a href="mailto:mthibault03@gmail.com" style="text-decoration:none">mthibault03@gmail.com</a>
    </p>
    <script type="text/javascript">
    			var box = {};
    			window.addEvent('domready', function(){
    				box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
    			});
    		</script>
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to have a full complete doctype. Add this to the top of your code.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    frogg03 (05-05-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow.. How simple. Thanks.

    But now I have spacing issues, which I'm guessing is because I'm using a table?

    I reuploaded the site to show you what I mean.
    Last edited by frogg03; 05-05-2009 at 09:34 PM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yep. You should read the link in my sig titled "Why Tables for Layout is Stupid?". If you don't care then read this: http://somethingstrange.com/2009/03/...sterious-gaps/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    frogg03 (05-05-2009)

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ya, I had just read "Why Tables for Layout is Stupid?"... that link worked though with the "line-height:0" in the container.

    Thanks so much for the help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •