[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