4 replies [Last post]
dfreem5
Offline
newbie
Florida
Last seen: 13 years 7 weeks ago
Florida
Joined: 2007-10-02
Posts: 9
Points: 0

Hi,
As most of the newbies here, I am getting a bit dangerous with CSS, trying to learn everything on my own. But this one is driving me nuts for days.

I have 2 issues- and I think they might be related.

First, a regular 'ol fieldset w/ legend doesnt not render - in any browser that I know of.

Second, I cant seem to figure out how to get my left nav bar (with color)(column) to stretch 100% vertically, This pushing the footer down to the bottom of the page. I tried everything from abolute positioning of the columns, to floating, to 100% or auto to the body..

Please take a look at a page: (i'm using DW Templates, but you can still see all the code. http://multimediaelements.com/LeasingExperts/apply.html

And here's my stylesheet code:
I welcome any tips for cleaning things up too!

/* CSS Document */

/* CSS Reset is Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 0.12.0 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
/* End CSS Reset */

body {
background-color:#FFFFFF;
margin:0;
height:auto%;
}

a:link {
color:#000000;
text-decoration:none;
}
a:visited {
color:#000000;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
a:active {
color:#000000;
text-decoration:none;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 760px;
float:left;
height:auto%;
}
#header {
position: relative;
margin-left: 161px;
width: 599px;
height:154px;
padding: 0;
background-image:url(images/header.jpg);
}
H1 {
left: 16px;
width: 136px;
position: absolute;
top: 20px;
height: 133px
}
H1 a {
display: block;
font-weight: normal;
font-size: 1px;
background: url(images/logo.gif) no-repeat left top;
width: 136px;
text-indent: 16px;
height: 133px;
}

#NAELBlogo{
left: 65px;
width: 85px;
position: absolute;
top: 451px;
height: 58px;
background: url(images/naelb_logo.gif) no-repeat left top;
}
#NAELBlogo a {
display: block;
height: 58px;
background: url(images/naelb_logo.gif) no-repeat left top;
}

/*- Menu --------------------------- */

#menu {
width: 161px;
background-color:#dcddde;
height:100%;
float:left;
}

#menu li a {
height: 21px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
font-size:14px;
color:#636467;
display: block;
padding: 3px 13px 0 13px;
text-align: right;
}

#menu li a:hover {
color:#636467;
padding: 3px 13px 0 10px;
text-align: right;
background-color:#a1cb3c;
}

#menu li a:active {
color:#636467;
padding: 3px 13px 0 10px;
text-align: right;
}
.menucurrent {
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
font-size:14px;
color:#636467;
text-align: right;
width: 161px;
background-color:#a1cb3c;
}


/*-End Menu --------------------------- */
#mainTextArea {
text-align:left;
padding-left:20px;
padding-top:20px;
padding-bottom:10px;
padding-right:8px;
width:395px;
float:left;
border-right:#D6D6D6 solid 1px;
}
#mainTextArea p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:16px;
}
.mainTextAreaBold {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
font-weight:bold;
}
.headerText {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
font-weight:bold;
}
.container {
width:232px;
height:190px;
margin-right:0px;
margin-left:6px;
float:right;
background-image: url(images/home_text.gif);
background-repeat:no-repeat;

}
#right {
float:right;
width:175px;
height:100%;
padding-top:20px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
}

.rightBold{
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;}

.hr {
height:1px;
border-style:solid;
border-width:1px 0 0 0;
border-color:#000000;
width:75%;
margin-top:2px;
margin-left:21px;
margin-bottom:2px;
margin-right:21px;

}

.greenbullet {
list-style-image:url(images/green_bullet.gif);
padding-left: 15px;
margin-left:8px;
margin-bottom: 1px;
margin-top:1px;
text-indent:3px;
}

#rightGreen {
float: right;
width: 239px;
margin-right: 16px;
border-right: #87987d 1px solid;
padding-right: 12px;
border-top: #87987d 1px solid;
padding-left: 12px;
margin-bottom: 5px;
padding-bottom: 12px;
border-left: #87987d 1px solid;
padding-top: 12px;
border-bottom: #87987d 1px solid;
background-color:#d5ddcc;
}

.TextBlue {
font-size: 14px;
color: #004F6C;
font-family: Arial,Helvetica, sans-serif;
line-height:16px;
}

/*- Footer --------------------------- */
#footer {
padding-right: 0px;
padding-left: 0px;
float: left;
width: 100%;
padding-top: 9px;
text-align: center;
border-top: #D6D6D6 solid 1px;
}
#footer li {
display:inline; /* gets the list items showing horizontally */
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color:#808285;
list-style-type:none; /* removes the bullets */
padding:0 4px 0 8px; /* some space between each item */
margin:-2px !important; /* removes the space left by the bullet point */
margin:0px; /* don't need to remove the space for IE */
border-right: 1px solid #aaa; /* a little bit of shadow on the bar */
}

#footer li.first {
border-left:0; /* no bar required before first item */
}

#footer li.last {
border-right:0; /* no bar required after last item */
}
#footer li.none {
border-right:0; /* no bar required after last item */
border-left:0; /* no bar required before first item */
}
#footer li a {
text-decoration:none; /* removes the underline from links */
color: #666666;
}
#footer li a:hover {
text-decoration:underline; /* adds the underline back on mouseover */
}

#footer p{
margin-top:5px;
font-family: Arial, Helvetica,sans-serif;
font-size:10px;
color:#000000;
}
/*- End footer --------------------------- */

div.row {
clear: both;
padding-top: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

div.row span.label {
float: left;
width: 64px;
text-align: right;
}

div.row span.formw {
float: left;
margin-left:5px;
width: 320px;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
input, textarea, select{
border: #999999 1px solid ;
margin-top:1px;
}

Triumph (not verified)
Anonymous's picture
Guru

dfreem5 wrote:First, a

dfreem5 wrote:
First, a regular 'ol fieldset w/ legend doesnt not render - in any browser that I know of.
I see it but it doesn't have a border because you shut it off with your global reset ... fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;}fieldset,img{border:0;} ...

dfreem5 wrote:
Second, I cant seem to figure out how to get my left nav bar (with color)(column) to stretch 100% vertically, This pushing the footer down to the bottom of the page. I tried everything from abolute positioning of the columns, to floating, to 100% or auto to the body..
Google faux columns.

dfreem5
Offline
newbie
Florida
Last seen: 13 years 7 weeks ago
Florida
Joined: 2007-10-02
Posts: 9
Points: 0

Thanks for the reply. A

Thanks for the reply.

A DUH. :blushing: I stuck that chuck of code in there, thinking I was benefiting from it. Have you ever heard of it and what should it be doing?

Re; the faux columns- I tried. I couldnt make them work either. (probably me again)

Triumph (not verified)
Anonymous's picture
Guru

dfreem5 wrote:I stuck that

dfreem5 wrote:
I stuck that chuck of code in there, thinking I was benefiting from it. Have you ever heard of it and what should it be doing?

Yes, I've used Eric Meyer's global reset (I think he is on the 3rd version now) and it is good to have everything zeroed out if you don't want any browser touching any of your margins or paddings and making them all, for the most part, start out equally. You just have to look out for things just like this. I wonder what the reason of the fieldset border being set to zero is all about... :shrug:

I wouldn't worry about global resets until you absolutely decide you need it.

Go through the faux columns article on A List Apart (http://www.alistapart.com) and see if you can make it work.

dfreem5
Offline
newbie
Florida
Last seen: 13 years 7 weeks ago
Florida
Joined: 2007-10-02
Posts: 9
Points: 0

Re: Reset code. I left it

Re: Reset code. I left it in, but just changed the fieldset border:1

Re: 100% vertical left nav - I applied the faux columns,and by my tests (IE & FF), it works.
So, I went for gusto - and tried to get the footer to 'stick' to the bottom. Again, success!

On a roll now...

OK, so my last question for this evening: :rolleyes:

I'm trying to get the grey 1px line to apply to the left & right sides of the right column (appropriately named #right). But when I do this, it falls down to the bottom of the page- past the footer.

Can you take a look see at what I'm doing wrong?

CSS
/* CSS Document */

/* CSS Document */

/* CSS Reset is Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 0.12.0 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;}fieldset,img{border:1;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
/* End CSS Reset */

body {
margin:0;
height:100%;
}

html {
height:100%;
}

a:link {
color:#000000;
text-decoration:none;
}
a:visited {
color:#000000;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
a:active {
color:#000000;
text-decoration:none;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 760px;
float:left;
min-height:100%;
background:#ffffff url(images/menu_bkgd.gif) repeat-y 0 0 ;
}
#header {
width: 760px;
height:154px;
padding: 0;
background:url(images/header.jpg) no-repeat right #FFFFFF;
}
H1 {
left: 16px;
width: 136px;
position: absolute;
top: 20px;
height: 133px
}
H1 a {
display: block;
font-weight: normal;
font-size: 1px;
background: url(images/logo.gif) no-repeat left top;
width: 136px;
text-indent: 16px;
height: 133px;
}

#NAELBlogo{
position: relative;
display: block; height: 58px;
width:100px;
background: url(images/naelb_logo.gif) no-repeat center top;
margin:2px 00px 1px 55px;

}

/*- Menu --------------------------- */

#menu {
width: 161px;
float:left;
}

#menu li a {
height: 21px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
font-size:14px;
color:#636467;
display: block;
padding: 3px 13px 0 13px;
text-align: right;
}

#menu li a:hover {
color:#636467;
padding: 3px 13px 0 10px;
text-align: right;
background-color:#a1cb3c;
}

#menu li a:active {
color:#636467;
padding: 3px 13px 0 10px;
text-align: right;
}
.menucurrent {
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
font-size:14px;
color:#636467;
text-align: right;
width: 161px;
background-color:#a1cb3c;
}


/*-End Menu --------------------------- */
#mainTextArea {
text-align:left;
padding-left:20px;
padding-top:18px;
padding-bottom:10px;
padding-right:8px;
width:395px;
float:left;
min-height:320px;
}
#mainTextArea p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:16px;
}
.mainTextAreaBold {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
font-weight:bold;
}
.headerText {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
font-weight:bold;
}
.container {
width:232px;
height:190px;
margin-right:0px;
margin-left:6px;
float:right;
background-image: url(images/home_text.gif);
background-repeat:no-repeat;

}
#right {
position:relative;
float:right;
height:100% auto;
width:175px;
padding-top:18px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
border-right:#D6D6D6 solid 1px;
border-left:#D6D6D6 solid 1px;
}

.rightBold{
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;}

.hr {
height:1px;
border-style:solid;
border-width:1px 0 0 0;
border-color:#000000;
width:75%;
margin-top:2px;
margin-left:21px;
margin-bottom:2px;
margin-right:21px;

}

.greenbullet {
list-style-image:url(images/green_bullet.gif);
padding-left: 15px;
margin-left:8px;
margin-bottom: 1px;
margin-top:1px;
text-indent:3px;
}

#rightGreen {
float: right;
width: 239px;
margin-right: 16px;
border-right: #87987d 1px solid;
padding-right: 12px;
border-top: #87987d 1px solid;
padding-left: 12px;
margin-bottom: 5px;
padding-bottom: 12px;
border-left: #87987d 1px solid;
padding-top: 12px;
border-bottom: #87987d 1px solid;
background-color:#d5ddcc;
}

.TextBlue {
font-size: 14px;
color: #004F6C;
font-family: Arial,Helvetica, sans-serif;
line-height:16px;
}

/*- Footer --------------------------- */
#footer {
padding-right: 0px;
padding-left: 0px;
float: left;
width: 760px;
padding-top: 4px;
text-align: center;
border-top: #D6D6D6 solid 1px;
background-color:#FFFFFF;
bottom:0;
position:absolute;
left: 0;
}
#footer li {
display:inline; /* gets the list items showing horizontally */
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
color:#808285;
list-style-type:none; /* removes the bullets */
padding:0 3px 0 9px; /* some space between each item */
margin:-4px !important; /* removes the space left by the bullet point */
margin:0px; /* don't need to remove the space for IE */
border-right: 1px solid #aaa; /* a little bit of shadow on the bar */
}

#footer li.first {
border-left:0; /* no bar required before first item */
}

#footer li.last {
border-right:0; /* no bar required after last item */
}
#footer li.none {
border-right:0; /* no bar required after last item */
border-left:0; /* no bar required before first item */
}
#footer li a {
text-decoration:none; /* removes the underline from links */
color: #666666;
}
#footer li a:hover {
text-decoration:underline; /* adds the underline back on mouseover */
}

#footer p{
margin-top:5px;
font-family: Arial, Helvetica,sans-serif;
font-size:10px;
color:#000000;
}
/*- End footer --------------------------- */

div.row {
clear: both;
padding-top: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

div.row span.label {
float: left;
width: 64px;
text-align: right;
}

div.row span.formw {
float: left;
margin-left:5px;
width: 320px;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
input, textarea, select{
border: #999999 1px solid ;
margin-top:1px;
}

HTML

The Leasing Experts

  • Why Should I Lease Instead Of Buying?
  • If you borrow money to buy and own equipment, you are using up available credit, which, if used for other purposes, has the ability to earn a return much higher than the cost of the lease payments.

     

  • Who Can Lease?
  • Any company, association, non-profit organization, or individual that is using the equipment for a business or commercial use.

     

  • What Can I Lease?
  • You can use this program to purchase any new or used equipment that makes sense for your business as long as it is not going to be resold and it is not disposable and/or consumable. Typical types of equipment include: • Restaurant Equipment • Computer Equipment & Software • Copiers • Office Furniture • Material Handling Equipment • anufacturing and Construction Equipment • Printing Equipment • Commercial Vehicles • Telecommunications Equipment • Medical Equipment

     

  • What Are Your Lease Rates?
  • Rates are based on equipment type and the credit rating of the individual business customer. The best way to find out what the rates are going to be for a desired piece of equipment is to contact one of our account managers and submit a quote for the equipment you wish to lease.

     

  • What Are The Up-front Costs For A Lease?
  • Usually, just the first and last monthly lease payment. Unlike a down payment for a purchase, these payments are smaller and are applied to your total lease payments. In addition, a nominal documentation and filing fee is required for processing the lease documents and filing UCC-1 financing statements required in your state. We do not charge an application fee.

     

  • Can I Cancel The Lease?
  • The lease is noncancelable. However, you may arrange for prepayment of the lease or upgrade to a more sophisticated piece of equipment.

     

  • Can I Work With Multiple Vendors And Still Have One Lease?
  • Yes. We can work with as many vendors as you need to get the equipment you want.

     

  • What Is The Turn Around Time To Receive Payment?
  • It usually takes three to five business days from the time we have the signed lease documents in our office.

     

  • What About Sales Tax?
  • Sales tax is added to your monthly lease payment each month and charged separately.

     

  • What Is The Typical Process For Commercial Equipment Leasing?
  • You fill out a simple, one-page credit application. In certain instances, other financial information may be required such as tax returns or financial statements. The supplied credit information is reviewed and upon approval, the lease documents are prepared and sent to you for signing. A purchase order is then issued to your equipment vendor. Upon delivery of the equipment and acceptance by you, the equipment is paid for and the lease commences.

     

  • What About Insurance?
  • For your protection, it is required that the equipment be insured. You simply instruct your own insurance agent to send a certificate of insurance to us at no additional cost to you. In some cases we may be able to provide you with insurance at reasonable premiums.