[thelist] Is there any way to keep a footer from covering a floatin xhtml?

Jonathan j at firebright.com
Fri Apr 9 14:00:19 CDT 2004


List (et al) (and Tony especially):

Quick question for you...

In moz, I have this element that just won't align. 

http://www.firebright.com/staging/actuality/template/template.html

I've tried everything I can think of, but I can't seem to get it working.
Have any ideas?  It's set down something like 4px compared to IE, where it
lines up.

Thanks in advance...

It's the "float" element here:

/* end flat screen thinking bar */
#endflat {
 background:#336799;
 height:42px;
 border-left: 40px solid #005893;
 /* border-bottom:1px dashed #ccc; */
}

/* top level grey navigation bar */
#gtopnav {
 background:#646464;
 top: 0px;
 width:100%;
 height: 21px;
 border-top:3px solid #646464;
}
#gtopnavwrapper {
 border-left:40px solid #333;
}

/* top level logo container */
#logo {
 /* position: absolute; */
 background:#fff;
 left:0px;
 top: 14px;
 width:100%;
 height: 57px;
}

/* top level header light grey line */
#navgrey {
 background:#DAD4D8;
 top: 71px;
 width:100%;
 height: 10px;
}

/* left greenbox header */
#greenhead {
 background:#A2D39C;
 width:123px;
 height: 24px;
 border-left:40px solid #007236;
 border-bottom:1px solid #007236;
 border-top:1px solid #007236;
 border-right:1px solid #007236;
}

/* this is the green left box element */
#greenelem {
 border-bottom:1px solid #007236;
 border-right:1px solid #007236;
 background:#E7FEE7;
 width:163px;
 height: 20px;
}

#greenelem A:link    {color:#007236; text-decoration:none;}
#greenelem A:visited {color:#007236; text-decoration:none;}
#greenelem A:active  {color:#007236; text-decoration:none;}
#greenelem A:hover   {color:#000; text-decoration:underline;}


/* left greenbox header */
#bluehead {
 background:#7DA7D9;
 width:123px;
 height: 24px;
 border-left:40px solid #0071BC;
 border-bottom:1px solid #0071BC;
 border-top:1px solid #0071BC;
 border-right:1px solid #0071BC;
}


/* this is the blue box left element */
#blueelem {
 border-bottom:1px solid #0071BC;
 border-right:1px solid #0071BC;
 background:#E5EBFF;
 width:163px;
 height: 20px;
}

#blueelem A:link    {color:#0071BC; text-decoration:none;}
#blueelem A:visited {color:#044F93; text-decoration:none;}
#blueelem A:active  {color:#044F93; text-decoration:none;}
#blueelem A:hover   {color:#000; text-decoration:underline;}


#leftgrey {
 background:#666;
 left:0px;
 top: 0px;
 width:100px;
 height: 24px;
}

body {
margin:0px 0px 0px 0px;
padding:0px;
font: 8pt/16pt verdana, arial; 
color: #555753; 
}

#left {
position: absolute;
left:0px;
width:180px;
}

#float {
 position: absolute;
 right:200px;
 top: 24px;
 width:128px;
}

/* this container holds the careers and downloads link */
#rightfloata {
 position: absolute;
 right:8px;
 text-align: right;
 top: 60px;
 width:190px;
}

/* this container holds search */
#rightfloatb {
position: absolute;
right:0px;
top: 88px;
width:199px;
background-image: url(../../img/search_bg.gif)
}


body[class] #content {
   height:auto;
   }

.box3out {
 background:#fff;
}
.box3in {
 margin-left: 179px;
 min-height:250px;
 height:250px;
 voice-family: "\"}\"";
 voice-family: inherit;
 margin-left: 181px;
}
 html>body #content {
 margin-left: 181px;
}
body[class] .box3in {
 height:auto;
}

   
#bottomspacer {
padding-top: 6px;
}

#right {
margin-top: 0px; 
margin-left: 20px; 
margin-bottom: 10px; 
padding-top: 14px;
padding-left: 10px;
padding-right: 10px;
float: right;
width:201px;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
background:#fff;
}

#topmenu {
}

#footer {
 background:#646464;
 border-left:40px solid #333;
 height:21px;
 /* this line determines how much space between the last paragraph and the
footer*/
 margin-top: 56px; 
 voice-family: "\"}\"";
 voice-family: inherit;
 height:20px;
}		
 html>body #footer {
 height:20px;
}

#copyright {
 background:#fff;
 font-size:9px;
 font-family: verdana;
 font-weight: normal;
 margin-left: 6px;
 color: #999;
 text-align:right;
}

.copyright {
}


p,h1,pre {
/* margin:0px 0px 0px 0px; */
line-height: 14px;
}

h1 {
font-size:14px;
padding-top:10px;
padding-bottom:0px;
color: #000;
}

h2 {
padding:0px;
margin: 0px;
font-size:13px;
color: #0071BC;
}

.topnav {
 font-size:11px;
 font-family: verdana;
 font-weight: bold;
 margin-left: 10px;
 color: #fff;
}

.noborder {
 border: 0px;
}

#gtopnav a:link, #gtopnav a:visited { 
 color:#ffffff;
 text-decoration:none;
 font-weight: bold;
}

#gtopnav a:hover { 
 color:#00ff00;
 text-decoration:none;
 font-weight: bold;
}

.sbwhite {
font-size:10px;
font-family: verdana;
font-weight: bold;
margin-left: 6px;
color: #fff;
}

/* left nav header green */
.sbgreen {
font-size:10px;
font-family: verdana;
font-weight: bold;
margin-left: 6px;
color: #007236;
}

/* left nav element green */
.sgreen {
font-size:10px;
font-family: verdana;
font-weight: normal;
margin-left: 12px;
color: #007236;
}

/* left nav header green */
.sbblue {
font-size:10px;
font-family: verdana;
font-weight: bold;
margin-left: 6px;
color: #0071BC;
}

.sblue {
font-size:10px;
font-family: verdana;
font-weight: normal;
margin-left: 12px;
color: #0071BC;
}

.pbbold {
font-size:11px;
font-family: verdana;
font-weight: bold;
color: #003371;
line-height:18px;
}
.bbold {
font-size:11px;
font-family: verdana;
font-weight: bold;
color: #069;
}

.btiny {
font-size:9px;
font-family: verdana;
font-weight: bold;
color: #069;
}

.tiny {
font-size:9px;
font-family: verdana;
font-weight: normal;
color: #069;
}

.wtiny {
font-size:9px;
font-family: verdana;
font-weight: normal;
color: #fff;
}

.bottomnav {
 font-size:9px;
 margin-left: 12px;
 font-family: verdana;
 font-weight: normal;
 color: #fff;
}

#header h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}

#right p {
font-size:10px
}
	
form { font-size: 9px; color=#990000; }
	
input {
 font-family : verdana;
 font-size : 10px;
 font-weight : bold;
 background-color : #DDEAFB;
 border-color : 336699;
 border-style : inset;
 border-width : 1px;
 color : FFFFFF;
}
	
.button {
 font-family : verdana;
 font-size : 9px;
 font-weight : normal;
 background-color : #FFF;
 border-color : #999;
 border-style : inset;
 border-width : 1px;
 color : #000;
}

a:link { 
 font-weight: normal;
 text-decoration: none; 
 color: #006699;
}
a:visited { 
 font-weight: normal;
 text-decoration: none; 
 color: ##0066ff;
}
a:hover, a:active { 
 cursor:pointer;
 text-decoration: underline; 
 color: #006699;
}

----
Email: j at FireBright.com
For Support: http://helpdesk.FireBright.com/
Toll Free: (866) FIREBRIGHT x901
Fax:  (916) 359 0151

FireBright, Inc.
4660 Natomas Blvd 
Suite 120-112
Sacramento, CA 95835

Please visit our site:
http://www.FireBright.com/

 

> -----Original Message-----
> From: thelist-bounces at lists.evolt.org 
> [mailto:thelist-bounces at lists.evolt.org] On Behalf Of Tony Crockford
> Sent: Thursday, April 08, 2004 2:53 PM
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] Is there any way to keep a footer from 
> covering a floatin xhtml?
> 
> At 22:32 on Thursday, 08 Apr 2004, Jonathan wrote:
> 
> > Is there a way to make sure that it does not come up the page?  I 
> > suppose I could float the left content as well, but I was 
> hoping not 
> > to.
> 
> I struggled with the same problem here: http://www.torbytes.co.uk/
> 
> and in the end I could have an invalid CSS hack to get 
> min-height cross browser or add a hacky, but valid spacer gif 
> to the content div.
> 
> http://www.pixy.cz/blogg/clanky/css-minheight-hack.html  
> explains the CSS route.
> 
> hth
> 
> Tony
> --
> * * Please support the community that supports you.  * * 
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip 
> Harvester and archives of thelist go to: 
> http://lists.evolt.org Workers of the Web, evolt ! 
> 




More information about the thelist mailing list