Hey guys,
I'm really sorry to bother you but I can't find this answer anywhere. I've searched around enough to learn that in firefox you have use min-height instead of just height. Which is what I want to do. I want my #wrapper to stretch the full vertical length of any web browser. I've added the min-height and I have achieved nothing so I'm not sure what I am doing wrong.
HTML:
dotSolve Consulting - The Competitive Advantage
You're Just One Piece Away
content..................
CSS:
/* General Stuff =============================================================*/
body {
background: #dedede;
font-family: Georgia, "Times New Roman", Times, serif;
color: #97000;
text-align: center;
margin: 0;
padding: 0;
min-height: 100%;
}
h1, h2, h3 {
background-image: url(hpeople.jpg);
background-repeat: no-repeat;
background-position: right;
font-family: helvetica, sans-serif;
letter-spacing: 0;
border-bottom: 1px solid #dedede;
font-size: 18px;
font-weight: bold;
color: #09108e;
margin: 35px 45px 0px 20px;
}
h4 {
background-image: url(navman.jpg);
background-repeat: no-repeat;
background-position: right;
font-family: helvetica, sans-serif;
letter-spacing: 0;
border-bottom: 1px solid #dedede;
font-size: 18px;
font-weight: bold;
color: #09108e;
margin: 35px 20px 0px 20px;
}
h5{
background-position: right;
font-family: helvetica, sans-serif;
letter-spacing: 0;
border-bottom: 1px solid #dedede;
font-size: 18px;
font-weight: bold;
color: #09108e;
margin: 35px 20px 0px 20px;
}
a:link, a:active, a:visited {
color: #000;
margin: 0 0 0 0;
padding: auto;
text-decoration: none;
}
a:hover {
color: #FF9000;
text-decoration: none;
width: auto;
}
/* Wrapper =====================================================================*/
#wrapper {
background: #ffffff;
margin: 0 auto;
width: 724px;
min-height: 100%;
text-align: left;
}
/* Banner ====================================================================*/
#banner {
background-image: url(dotsolvenew.jpg);
background-repeat: no-repeat;
width: auto;
height: 171px;
margin: 0;
}
/* Links Menu ======================================================================*/
#links-menu ul li{
margin: 3px 30px 0 0;
height: auto;
padding: 5px 0px 0 0;
word-spacing: auto;
text-align: left;
color: #212121;
border-bottom: 1px solid #dedede;
}
/* Navigate Text =========================================================*/
#navigate {
margin: 0px 0 0 10px;
float: left;
position: absolute;
width: auto;
left: auto;
height: 100%;
}
/* Content Area ================================================================*/
#content {
font-family: "Times New Roman", Times, serif;
margin: 20px 0 0 0;
border-left: 1px dotted #dedede;
min-height: 100%;
margin-left: 155px;
padding-left: 5px;
font-size: 16px;
}
#content h1 {
font-family: "Times New Roman", Times, serif;
letter-spacing: 0;
border-bottom: 1px solid #dedede;
font-size: 20px;
font-weight: bold;
color: #47342C;
margin: 0 0 10px 0;
text-decoration: none;
}
#content p {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #000;
margin: 10px;
}
/* Footer ====================================================================*/
#footer a:link, #footer a:active, #footer a:visited {
color: #dedede;
background-color: #fff;
}
#footer a:hover {
color: #dedede;
background-color: #fff;
text-decoration: none;
}
#footer {
width: 100%;
margin: 10px auto 1px auto;
}
.copyright {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
text-align: center;
}
Thanks fellas.
here's the link to the actual page.
hey guys, the link to the page itself is http://www.dotsolveconsulting.com
there you can see my pain. View in firefox, I haven't began dealing with the problem in IE yet.
DO you by chance have a live
I'm not sure what you are seeing, but in FF it is stretching the 100%
Now, the way it looks in IE is a whole other story
:]
:]
Although it shouldn't have
Although it shouldn't have anything to do with what you are working on now it is still good practice to keep your code valid
CHECK CSS
Also, get rid of <div
Also, get rid of
yeah, i validated it. i
yeah, i validated it. i suppose i've changed a few things which probably unvalidated it. thanks for the heads up...
Okay, Maybe you can show a
Okay,
Maybe you can show a screenshot of what you are seeing that isn't what you want?
I am seeing it stretch the whole height of the browser.
okay, it's validated now.
okay, it's validated now. got rid of the div. still nothing.
wow ...i wonder if i should
wow ...i wonder if i should clear the cache. would that fix the problem do you think since it's just on my computer...?
http://www.angelfire.com/fl5/
http://www.angelfire.com/fl5/mythsigs/blank-area-fix.gif theres a screenshot of what i see.
angelfire doesn't allow
angelfire doesn't allow hotlinking to images.
Your new HTML <!DOCTYPE
Your new HTML
dotSolve Consulting - The Competitive Advantage
You're Just One Piece Away
Here at dotSolve Consulting we strive for only the best. dotSolve Consulting, LLC is a Computer Consulting Business. We work at very competitive rates ranging as low as $35.00 an hour. Our company branches out with professional work that includes Computer Networking, Graphic Design, Web Design and Computer Hardware. If you need it done, dotSolve Consulting can do it for you. You have more important things to do than spending all of your precious time focusing on a headache. Let us take the headache for you, let us help. Please, if you have any questions then e-mail me, Adam Simpson at my exclusive e-mail address and you may also contact me personally. The information can be found on the "Contact Us" page. Thank you for your time and don
Deuce wrote:angelfire
angelfire doesn't allow hotlinking to images.
nevermind - if i copy and paste your link it worked.
:]!!! Yes, it did! thanks so
:]!!! Yes, it did! thanks so much! may I ask what you did to solve this problem?
I took off the
I took off the min-height:100% from the #navigate
Also, you have some semantically incorrect code.
Your top banner should be in a h1 tag so that viewers with css turned off can still see some sort of header as to what site they are on.
you also have a single image in a paragraph tag
small things like that.
Remember you should markup your code BEFORE applying any design. Make it viewable in good ole html before you do anything else.
There is still a small gap at the bottom and I am currently looking into that.
Also, check your site on IE, the nav seems to be floating in the middle of the content, or at least it is in IE6
yeah, i've noticed that. i'm
yeah, i've noticed that. i'm not exactly sure on that fix either ... i didn't want to hassle you anymore than i have so i was going to take a shot at fixing that. But as of now, i'm not sure what the deal is?
well, if you have any more
well, if you have any more questions feel to free to ask and hopefully myself or someone of higher skill will be able to assist you.
just thought i'd let you
just thought i'd let you guys know, i've fixed the IE problem. I left out a "position: fixed;" which put my navbar right into place. woohoo!