SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Mac not putting footer div at bottom of content

    Hi,

    I am trying to rebuild our site from an old tables based layout to a new css based layout but am having problems creating a footer where our copyright, sitemap and tel numbers go. I created one for ie and netscape quite painlessly but now I am creating the stylesheet for IE5 on the Mac and it just aint having it, I have simplified it vy removing the contants but that hasn't helped. Please could someone have a look and see if they could suggest why?

    sites are below

    new site

    http://dev.wisechoice.biz/wisechoice...ss/default.htm

    old site

    in profile

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've only looked atthis quickly but you seem to have a lot of strange things going on in that code.

    You have floated elements and absolutely placed them as well. So you are taking a chance on what will win out. You have used absolute positioning when you could have just let it flow. From what I know about the mac (not much) it will often inherit positioning incorrectlty into child elements so you are better letting as much flow as possible.

    This layout looks the same in ie6 , firefox and as far as I can see on my old mac it look spretty much the same.
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* Main Document Tags */
    body {text-align: center;background-color: #316DAD;}
    /* Layers */
    #main-container{margin-left: auto;margin-right: auto;margin-top:0;width: 780px;background-color: #316DAD;left: 2px;text-align: left;overflow: visible;visibility: visible;z-index: 1;position: relative;top: 0px;}
    #inner-container{margin-left: 0;margin-right: 0;margin-top:0;width: 100%;height: 400px;background-color: #ff00ff;left: 0px;text-align: center;overflow: visible;visibility: visible;position: absolute;top: 200px;}
    #logoandnavigation {margin-left: auto;margin-right: auto;margin-bottom:0;width: 780px;height: 27px;text-align: center;top: 0px;}
    #logo{background-color: #316DAD;z-index: 2;float: left;top: 0px;position: absolute;text-align: left;left: 0px;padding: 0px;}
    #navigation{
    height: 25px;
    text-align: right;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom:0;
    z-index: 1;
    float: right;
    right: 0px;
    position: absolute;
    padding-left: 0px;
    width: 550px;
    top: 12px;
    left: 305px;
    }
    #sub-naviagtion{background-color: #999999;height: 25px;border-top-width: 1px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: solid;border-right-style: none;border-bottom-style: none;border-left-style: none;border-top-color: #FFFFFF;clear: both;text-align: center;vertical-align: top;padding: 0px;margin-top: 10px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;}
    #headline{background-color: #C6CBE7;text-align: left;background-image: url(http://dev.wisechoice.biz/wisechoice...kground-repeat: no-repeat;background-position: left top;height: 130px;margin: 0px;}
    #headline-text {line-height: 20px;position: relative;text-align: left;padding-top: 30px;padding-right: 10px;padding-bottom: 10px;margin-left:287px}
    #main-content{padding-left:20px;padding-right:20px;background-color: #FFFFFF;padding-top: 10px;padding-bottom: 20px;overflow: visible;visibility: visible;z-index: 3;margin-top: 0px;margin-left: 0px;}
    #side-panel{width: 202px;background-color: #FFFFFF;padding: 0px;overflow: visible;visibility: visible;height: 300px;margin-top: 0px;margin-bottom: 0px;margin-left: 10px;z-index: 3;clear: none;float: right;text-align: center;}
    #microsoft-partner{overflow: visible;visibility: visible;clear: both;float: left;width: 202px;height: 83px;position: relative;background-color: #FFFFFF;background-image: url(http://dev.wisechoice.biz/wisechoice...kground-repeat: no-repeat;background-position: center center;background-attachment: scroll;margin: 0px;padding: 0px;}
    #broadband{	overflow: visible;visibility: visible;clear: both;float: left;width: 202px;background-color: #FFFFFF;position: relative;left: 0px;top: 0px;}
    #domain-name-lookup{ overflow: visible;visibility: visible;clear: both;float: left;width: 202px;background-color: #FFFFFF;position: relative;left: 0px;top: 0px;}
    #fast-links{ overflow: visible;visibility: visible;clear: both;float: left;width: 202px;background-color: #FFFFFF;position: relative;left: 0px;top: 0px;}
    .side-panel-heading{background-color: #999999;border: 1px solid #999999;font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;color: #FFFFFF;text-decoration: none;margin: 2px;padding: 2px;}
    .side-panel-content{border: 1px solid #999999;FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #214874;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none;text-align: right;padding: 2px;margin-top: 3px;margin-right: 2px;margin-bottom: 2px;margin-left: 2px;}
    #footer{
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0;
    width: 780px;
    height: 27px;
    text-align: center;
    visibility: visible;
    background-color: #0099FF;
    z-index: 10;
     
     
    }
    #footerlinks{text-align: left;position: relative;}
    #animated-telephone{
    position: relative;
    visibility: hidden;
    }
    #copyright{overflow: visible;position: relative;visibility: visible;background-color: #ff00ff;}
    /* Text */
    p {FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #214874;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none;text-align: justify;}
    h1 {text-align: left;position: relative;left: 0px;top: 0px;}
    h2 {font-family: Arial, Helvetica, sans-serif;font-size: 12pt;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;color: #333333;text-decoration: none;margin: 0px;text-align: left;left: 0px;top: 0px;}
    h3 {font-family: Arial, Helvetica, sans-serif;font-size: 10pt;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;color: #333333;text-decoration: none;margin: 0px;text-align: left;left: 0px;top: 0px;}
    h4 {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;line-height: normal;font-weight: bold;font-variant: normal;color: #FFFFFF;text-decoration: none;margin: 0px;}
    h5 {}
    h6 {}
    #toptext{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    #bottomtext{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, helvetica, sans-serif;TEXT-DECORATION: none;text-align: center;line-height: 25px;margin: 0px;padding: 0px;}
    .footertext{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, helvetica, sans-serif;TEXT-DECORATION: none;text-align: center;vertical-align: middle;}
    /* Links */
    a{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #999999;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.active{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #999999;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a:visited{COLOR: #666666;TEXT-DECORATION: none}
    a:hover{COLOR: #111111;TEXT-DECORATION: none}
    a.homepagelinks{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #cc0000;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.homepagelinks:active{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #cc0000;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.homepagelinks:visited{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #cc0000;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.homepagelinks:hover{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #770000;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.toplinks{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.toplinks:active{COLOR: #ffffff;TEXT-DECORATION: none}
    a.toplinks:visited{COLOR: #ffffff;TEXT-DECORATION: none}
    a.toplinks:hover{COLOR:yellow;TEXT-DECORATION: none}
    a.bottomlinks{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.bottomlinks:active{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, helvetica, sans-serif;TEXT-DECORATION: none}
    a.bottomlinks:visited{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, helvetica, sans-serif;TEXT-DECORATION: none}
    a.bottomlinks:hover{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: yellow;FONT-FAMILY: Arial, helvetica, sans-serig;TEXT-DECORATION: none}
    a.footerlinks{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.footerlinks:active{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.footerlinks:visited{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.footerlinks:hover{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    a.fastlink{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #316dad;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: underline}
    a.fastlink:active{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #316dad;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: underline}
    a.fastlink:visited{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #316dad;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: underline}
    a.fastlink:hover{FONT-WEIGHT: bold;FONT-SIZE: 12px;COLOR: #316dad;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}
    /* extra layers */
    /* forms */
    input {color:#214874;font-size:11px;font-family:Arial, Helvetica, sans-serif;background-color: #C6CBE7;border: 1px solid #214874;font-weight: bold;margin: 2px;}
    select {color:#214874;font-size:11px;font-family:Arial, Helvetica, sans-serif;background-color: #C6CBE7;border: 1px solid #214874;font-weight: bold;margin: 2px;}
    textarea {color:#214874;font-size:11px;font-family: Arial, Helvetica, sans-serif;background-color: #C6CBE7;border: 1px solid #214874;font-weight: bold;margin: 2px;}
    .checkbox {border: 0px none;padding: 2px;}
    form {margin: 0px;padding: 0px;}
    #main-content p{margin-right:220px}
    </style>
    </head>
    <body>
    <div id="main-container"> 
    <div id="logoandnavigation"> 
    	<div id="logo"> 
    	 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="200" height="25">
    		<param name="movie" value="logo.swf" />
    		<param name="quality" value="high" />
    		<embed src="http://dev.wisechoice.biz/wisechoice.biz-css/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="25"></embed> 
    	 </object>
    	</div>
    	<div id="navigation"> 
    	 <p id ="toptext"> <a href="http://www.wisechoice.biz/aboutus.asp" class="toplinks">About 
    		Us</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="http://www.wisechoice.biz/productsandservicese.asp" class="toplinks">Products 
    		&amp; Services</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="http://www.wisechoice.biz/portfolio.asp" class="toplinks">Portfolio</a>&nbsp;&nbsp; 
    		|&nbsp;&nbsp; <a href="https://secure.wltd.co.uk/wisechoice/ClientLogin.asp" class="toplinks">Client 
    		Login</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="http://www.wisechoice.biz/contactus.asp" class="toplinks">Contact 
    		Us</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="http://www.wisechoice.biz/links.asp" class="toplinks">links</a> 
    	 </p>
    	</div>
    </div>
    <div id="sub-naviagtion"> 
    	<p id ="bottomtext"> <a href="default" class="bottomlinks">Introduction</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	 |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	 <a href="corevalues.asp" class="bottomlinks">Core Values</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	 |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	 <a href="Partnerships.asp" class="bottomlinks">Partnerships</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	 |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	 <a href="careers.asp" class="bottomlinks">Careers</a> </p>
    </div>
    <div id="headline"> 
    	<div id="headline-text"> 
    	 <h2>About us</h2>
    	 <h3>Web Developer and Internet Service Provider, Wisechoice.biz is dedicated 
    		to connecting businesses with clients</h3>
    	</div>
    </div>
    <div id="main-content"> 
    	<div id="side-panel"> 
    	 <div id ="microsoft-partner"> </div>
    	 <div id ="broadband"> 
    		<div class ="side-panel-heading"> Is broadband in your area? </div>
    		<div class ="side-panel-content"> 
    		 <form method="post" action="checkforadsl.asp" target="blank">
    			number:&nbsp;&nbsp;&nbsp; 
    			<input name="telephone" type="text" value="" size="22" />
    			<input name="submit2" type="submit" value="Check" />
    		 </form>
    		</div>
    	 </div>
    	 <div id ="domain-name-lookup"> 
    		<div class ="side-panel-heading"> Domain Name Lookup </div>
    		<div class ="side-panel-content"> 
    		 <form action="whois.asp" name="frmDomainCheck" id="frmDomainCheck" strmethod="get">
    			Domain:&nbsp;&nbsp;&nbsp; 
    			<input type="text" name="domain" maxlength="35" size="22" value="" />
    			<select name="suffix">
    			 <option selected="selected">.co.uk</option>
    			 <option>.me.uk</option>
    			 <option>.org.uk</option>
    			 <option>.net.uk</option>
    			 <option>.plc.uk</option>
    			 <option>.ltd.uk</option>
    			 <option>.com</option>
    			 <option>.net</option>
    			 <option>.org</option>
    			 <option>.biz</option>
    			 <option>.info</option>
    			</select>
    			<input type="submit" value="&nbsp;Search&nbsp;&nbsp;" name="submit" />
    		 </form>
    		</div>
    	 </div>
    	 <div id ="fast-links"> 
    		<div class ="side-panel-heading"> Fast Links </div>
    		<div class ="side-panel-content"> <a href="http://www.wisechoice.biz/searchengineering.asp" class ="fastlink">Search 
    		 Engine Optimisation</a><br />
    		 <a href="http://www.eezeeweb.co.uk" class ="fastlink">Web Design</a><br />
    		 <a href="http://www.eezeewebsite.co.uk" class ="fastlink">Web Hosting 
    		 </a> </div>
    	 </div>
    	</div>
    	<p id ="p1">Website communications dedicated to delivering profitable, cost 
    	 effective, tried and tested website solutions.</p>
    	<p id ="p2">A no-nonsense approach to solving the challenges of business has 
    	 created an obsession that is objectives led and results driven. Conscientious 
    	 consultancy and traditional media experience ensure that Key Performance 
    	 Indicators (KPI) are agreed and Returns On Investment (ROI) are achieved. 
    	</p>
    	<p id ="p3">Website solutions that generate profit, customer loyalty and or 
    	 new business by ensuring that every process integrates seamlessly with the 
    	 Marketing Mix.</p>
    	<p id ="p4">The Internet is a medium that is extremely flexible, incredibly 
    	 accountable and has the unique ability to make other marketing initiatives 
    	 accountable too. Solid commercial experience ensures that the "new economy" 
    	 is delivered with a blend of "old economy" know-how.</p>
    	<p id ="p5">Services; design, build, maintain, host, develop, market and manage 
    	 content for websites. Orientation; E-commerce &amp; E-business - Website 
    	 concept &amp; implementation - ISP facilities from email to hosting - Marketing 
    	 strategy &amp; development</p>
    	<p>Services; <a href ="webdesign.asp" class ="homepagelinks">design,</a> <a href ="webdesign.asp" class ="homepagelinks">build,</a> 
    	 <a href ="contentmanagement.asp" class ="homepagelinks">maintain,</a> <a href ="hosting.asp" class ="homepagelinks">host,</a> 
    	 <a href ="bespokeapplications.asp" class ="homepagelinks">develop,</a> <a href ="searchengineering.asp" class ="homepagelinks">search 
    	 engineer,</a> <a href ="emailmarketing.asp" class ="homepagelinks">market</a> 
    	 and <a href ="contentmanagement.asp" class ="homepagelinks">manage content 
    	 for websites,</a> including <a href ="photography.asp" class ="homepagelinks">digital 
    	 photography</a>. Orientation; <a href ="bespokeecommerce.asp" class ="homepagelinks">E-commerce 
    	 &amp; E-business</a> - <a href ="productsandservices.asp" class ="homepagelinks">Website 
    	 concept &amp; implementation</a> - <a href ="unlimitedaccess.asp" class ="homepagelinks">ISP 
    	 facilities</a> from <a href ="emailprovision.asp" class ="homepagelinks">email</a> 
    	 to <a href ="hosting.asp" class ="homepagelinks">hosting</a> - Marketing 
    	 strategy &amp; development, <a href ="http://www.thecoachhousenursery.co.uk" class ="homepagelinks">Nursery 
    	 webcams</a> for nurseries, promotional webcams for promotions and security 
    	 webcams for surveillance</p>
    </div>
    <div id ="footer"> lkjh;kjh </div>
    </div>
    </body>
    </html>
    Hope it helps anyway.

    Paul

  3. #3
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yep works great. Thanks paul, your a star!


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
  •