SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    RE: IE 6 Problem with Footer Space

    Just finshed a layout and the only problem i have is the footer in IE6. There is to much space compared to Firefox. Can't seem to narrow the gap any ideas?

    Thanks in advance


    Site Address: www.creativebubbles.co.uk


    CSS:

    Code:
    /*Written by Martin Sandhu 30 January 2007*/
    
    
    
    /* Basic elements */
    
    
    html,body{
    	height:100%;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    
    	.hideFromCSSBrowsers {display: none;}
    
    	img{border:none;}
    
    	body{background:#ffffff;
    	}
    	
    .clear {clear:both;}
    
    
    table {
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;	
    }
    
    em {
    text-decoration:underline;
    font-style:normal;
    }
    
    
     h1 {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    }
    
     p {
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;
    }
    
     a {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    }
     a:hover {
    font:12px Arial, Helvetica, sans-serif;
    color:#0a9ade;
    font-weight:bold;
    text-decoration:none;
    }
    
    
    /* Header and Container */
    
    
    	
    #maincontainer {
    margin: 0px auto;
    text-align: left;
    width: 863px;
    }
    
    #topNav {
    width:863px;
    padding: 8px 0px 8px 0;
    margin:0;
    background:#95d6f4;
    text-align:right;
    }
    
    
    #topNav p{
    font:12px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    margin:0 8px 0 0px;
    padding:0;
    }
    
    #topNav a {
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #topNav a:hover {
    color:#FFFFFF;
    text-decoration:underline;
    }
    
    
    #header {
    float:left;
    width:863px;
    height:109px;
    }
    
    #logo {
    width:200px;
    float:left;
    }
    
    
    #greyLine {
    border: solid 2px #cccccc;
    margin:0 0 10px 0;
    }
    
    /* breadcrumbs */
    
    
    #quickNavigation {
    float:right;
    width:500px;
    margin:80px 0 0 0;
    padding:0;
    }
    
    #quickNavigation p {
    text-align:right;
    color:#999999;
    font:12px Arial, Helvetica, sans-serif;
    }
    
    #quickNavigation a {
    color:#3eacdf;
    text-decoration:none;
    }
    
    #quickNavigation a:hover {
    color:#3eacdf;
    text-decoration:underline;
    }
    
    /* middle section and news box */
    
    
    
    #topSection {
    width:863px;
    margin:0;
    padding:0;
    float:left;
    height:237px;
    }
    
    #brandImage {
    width: 468px;
    float:left;
    margin:0 10px 0 0;
    padding:0;
    height:237px;
    }
    
    #newsHeadline {
    margin:0;
    padding:0;
    }
    
    #news {
    width:385px;
    margin:0px 0 0 0;
    padding:0 0 0 0;
    float:right;
    }
    
    #news h1 {
    margin:0;
    padding:0;
    }
    
    #news h1 a {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    vertical-align:top;
    }
    
    #news h1 a:hover {
    font:14px Arial, Helvetica, sans-serif;
    color:#0a9ade;
    font-weight:bold;
    text-decoration:none;
    }
    
    #news img {vertical-align:top;}
    
    .newsSummary {
    margin:10px 0 0 0;
    }
    
    
    #news p {
    margin:0px 0 0px 0;
    padding:0;
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;
    }
    
    #news a {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    margin:0px 0 0 0;
    padding:0;
    text-decoration:none;
    font-weight:bold;
    }
    
    #news a:hover {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    margin:0px 0 0 0;
    padding:0;
    text-decoration:underline;
    font-weight:bold;
    }
    
    /* content */
    
    
    #content {
    width:863px;
    margin:10px 0 0 0;
    padding:0;
    float:left;
    }
    
    #servicesSummary {
    width:468px;
    float:left;
    }
    
    #servicesSummary h1 {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    margin:0 0 10px 0;
    }
    
    #servicesSummary p {
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;
    margin:0 0 10px 0;
    }
    
    #servicesSummary a {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    }
    
    #servicesSummary a:hover {
    font:12px Arial, Helvetica, sans-serif;
    color:#0a9ade;
    font-weight:bold;
    text-decoration:none;
    }
    
    .subHeading {
    text-decoration:underline;
    }
    
    
    #currentWorkImages {
    float:right;
    width:385px;
    }
    
    #currentWorkImages h1 {
    margin:0;
    padding:0;
    }
    
    #currentWorkImages h1 a {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    }
    
    #currentWorkImages h1 a:hover {
    font:14px Arial, Helvetica, sans-serif;
    color:#0a9ade;
    font-weight:bold;
    text-decoration:none;
    }
    
    #imageHolder {
    margin:10px 0 0 0;
    padding:0;
    }
    
    #imageHolder img {
    margin:0 0 5px 0;
    padding:0;
    }
    
    
    /*----footer------*/
    
    
    #footer {
    width:863px;
    background:#95d6f4;
    float:left;
    }
    
    #footer p {
    font:12px Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    }
    
    #address {
    width:300px;
    float:left;
    margin:5px 0 5px 5px;
    font-weight:bold;
    }
    
    #contactDetails {
    float:right;
    width:300px;
    text-align:right;
    margin:5px 5px 5px 0px;
    font-weight:bold;
    }
    
    #contactDetails a {
    color:#ffffff;
    text-decoration:none;
    }
    
    #contactDetails a:hover {
    color:#ffffff;
    text-decoration:underline;
    }
    
    /* Bottom Footer Links and Tools */
    
    
    
    
    
    #tools {
    float:left;
    width:863px;
    margin:5px 0 5px 0;
    padding:0;
    }
    
    * html #tools{float:none;}
    
    #furtherLinks {
    width:360px;
    margin:0 0 0 0px;
    padding:0;
    float:left;
    }
    
    #furtherLinks p {
    font:12px Arial, Helvetica, sans-serif;
    color:#999999;
    }
    
    #furtherLinks a {
    color:#999999;
    text-decoration:none;
    }
    
    #furtherLinks a:hover {
    color:#999999;
    text-decoration:underline;
    }
    
    #xhtmldec {
    float:right;
    width:300px;
    margin:0 0 0 0px;
    padding:0;
    text-align:right;
    }
    
    #xhtml img {
    margin:0;
    padding:0;
    }
    
    
    /*adminstration tools*/
    
    table.indexTable {
    	width: 100%;
    }
    table.indexTable th {
    	text-align: left;
    }
    table.indexTable th a {
    	text-decoration: none;
    }
    table.editForm {
    	
    }
    .indexTable td {
    	border-bottom: 1px solid #eee;
    	padding: 4px 6px;
    }
    .narrow {
    	width: 5%;
    	text-align: center;
    }

    HTML

    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" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Creative Bubbles | Web Design &amp; Graphic Design Agency in Notitngham, UK</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.creativebubbles.co.uk/creative-bubbles-news.rss" />
    </head>
    
    <body>
    	<div id="maincontainer">
    		
    		<div id="topNav">
    			<p>
    				<a href="#" accesskey="h" title="Creative Bubbles graphic design, marketing and web design agency"><em>H</em>ome</a> | 
    				<a href="#" accesskey="a" title="About Creative Bubbles expertise in design, marketing and web design"><em>A</em>bout Us</a> |	
    				<a href="#" accesskey="s" title="Information about services Creative Bubbles offer from design, marketing and web design"><em>S</em>ervices</a> | 
    				<a href="#" accesskey="o" title="The work Creative Bubbles does in print, marketing and web design"><em>O</em>ur Work</a> | 	
    				<a href="#" accesskey="n" title="News about what Creative Bubbles is doing in the web industry from print, marketing, web and graphic design"><em>N</em>ews</a> | 
    				<a href="#" accesskey="c" title="Contact Us for information or getting a quote"><em>C</em>ontact Us</a>	
    			</p>
    		</div>
    		
    		<div id="header">
    			<img src="images/site/logo.jpg" alt="Creative Bubbles Logo" width="192" height="109" id="logo" title="Creative Bubbles" />		
    			<div id="quickNavigation">
    				<p>Quick Navigation: <a href="#" accesskey="h" title="Creative Bubbles graphic design, marketing and web design agency">Home</a></p>
    			</div>
    		</div>
    		
    	
    		<!-- Image and News Section -->
    		
    		
    		
    		<div id="topSection">
    		
    			<div id="topSectionImageHolder">
    			
    			<img src="images/site/banner.jpg" alt="Photo of Women Blowing Bubbles to Indicate Creative Bubbles Brand Being Fun to Work With" width="468" height="237" id="brandImage" title="Creative Bubbles a fun and easy web design agency to work with" />
    			
    			</div>
    			
    			<div id="news">
    			
    				<div id="newsHeadline">
    					<h1><a href="#" accesskey="n" title="News about what Creative Bubbles is doing in the web industry from print, marketing, web and graphic design">Latest News</a> <a href="http://www.creativebubbles.co.uk/creative-bubbles-news.rss"><img src="images/site/rss.gif" alt="RSS" border="0" title="RSS" /></a></h1>
    				</div>
    					
    					<div class="newsSummary">
    						<p><a href="#">Creative Bubbles launches as the UK's Newest Web Design Agency</a></p>
    						<p>Creative Bubbles has launched a new brand which has just got a new contract to build a goverment web site.</p>
    					</div>
    					<div class="newsSummary">
    						<p><a href="#">Creative Bubbles launches as the UK's Newest Web Design Agency</a></p>
    						<p>Creative Bubbles has launched a new brand which has just got a new contract to build a goverment web site.</p>
    					</div>
    					<div class="newsSummary">
    						<p><a href="#">Creative Bubbles launches as the UK's Newest Web Design Agency</a></p>
    						<p>Creative Bubbles has launched a new brand which has just got a new contract to build a goverment web site.</p>
    					</div>
    					<div class="newsSummary">
    						<p><a href="#">Creative Bubbles launches as the UK's Newest Web Design Agency</a></p>
    						<p>Creative Bubbles has launched a new brand which has just got a new contract to build a goverment web site.</p>
    					</div>
    					
    			</div>
    			
    	  	</div>
    		
       		<!-- Content -->
    		<div id="content">
    			
    			<div id="servicesSummary">
    			
    				<h1>Creative Bubbles Has Arrived.....</h1>
    				<p>&nbsp;</p>
    			    <a href="#">Web Design &amp; New Media</a>
    			      <p>&nbsp;</p>
    			    
    				
    				<a href="#">Web Application Development</a>
    			      <p>&nbsp;</p>
    			    <a href="#">Graphic Design</a>
    			     <p>&nbsp;</p>
    			    <a href="#">Free Web Surveys</a>
    			      <p>&nbsp;</p>
    		      
    			   <a href="#" class="subHeading">View Our Full Range of Services</a>
    			</div>
    			
    			<div id="currentWorkImages">
    			
    				<h1><a href="#" accesskey="o" title="The work Creative Bubbles does in print, marketing and web design">Our Current Work</a></h1>
    				
    				<div id="imageHolder">
    				
    				<img src="images/site/loughbourghbanner.jpg" alt="Image of Loughbourgh University Logo" width="385" height="70" title="Case study for the web design work we did for Loughbourgh University" /> 
    				<img src="images/site/lightrailbanner.jpg" alt="Image of JMI website" width="385" height="70" title="Case study for the web design and branding work we did for J.M.I Earthing" /> 
    				<img src="images/site/corebanner.jpg" alt="Image of Core Telecom website" width="385" height="70" title="Case study for web design and web development and branding work we did for Core Telecom" /> 
    				<img src="images/site/pentabanner.jpg" alt="Image of Penta website" width="385" height="70" title="Case study for web design and web development work we did for Penta Investments" />	
    				<img src="images/site/normansbanner.jpg" alt="Image of Norman Bar website" width="385" height="70" title="Case study for web design and web development work we did for Norman Bar in Leeds " />
    				<img src="images/site/basfordbanner.jpg" alt="Image of Penta website" width="385" height="70" title="Case study for web design and web development work we did for local Nottinghamshire football club Basford United" />				</div>
    				
    			</div>
    		
    		</div>
    		
    		<!-- Footer -->
    		
    		<div id="footer">
    			<div id="address">
    			  <p>Creative Bubbles<br />
    				</p>
    			</div>	
    			<div id="contactDetails">
    				<p>Telephone:XXXX XXXXXXX <br />
    				Email: <a href="mailto:info@creativebubbles.co.uk">info@creativebubbles.co.uk</a></p>
    			</div>
    		</div>
    		
    		<div id="tools">
    			<div id="furtherLinks">
    				<p><a href="#">Accessi<em>b</em>ility</a> | <a href="#">Site<em>m</em>ap</a> | <a href="#"><em>T</em>erms of Business</a></p>	
    			</div>
    			<div id="xhtmldec">
    				<a href="http://validator.w3.org/check?uri=referer" title="This Page Conforms to W3C Web Standards Valid XHTML" target="_blank"><img src="images/site/validxhtml.gif" alt="Valid XHTML Document Image" title="This Page Conforms to W3C Web Standards Valid XHTML" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This Page Uses a Valid CSS Document According to W3C Standards" target="_blank"><img src="images/site/validcss.gif" alt="Valid CSS Document Image" title="This Page Uses a Valid CSS Document According to W3C Standards" /></a>			
    			</div>	
    		</div>
    	
    	
    	
    	</div>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry there seemed to be a site refresh problem and it posted 3 times.

  3. #3
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding line-height:24px; (play with the numbers) in the footer or footer p. If that doesn't do much, try also adding to the footer a clear:both;
    intragenesis, llc professional web & graphic design

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Los Angeles CA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They only seemed to be off by a couple of pixels. Have you tried removed the margin-top of 10px from #content and adding it to the div above it...so you can avoid any margin-collapsing stuff...?


Bookmarks

Posting Permissions

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