vchris Posted March 6, 2006 Share Posted March 6, 2006 I want my page to be 100% height. Basically no matter how much content there is on the page I want it to always reach the bottom of the page.In my css file I got height: 100%, that works with IE but I don't think it works with the other browsers. Is there a way to this could work with all browsers? Link to comment Share on other sites More sharing options...
aspnetguy Posted March 6, 2006 Share Posted March 6, 2006 this is from one of the sites I am designing. you may have ot play with the percentages to get it to do exactly what you want. html, body { margin: 0px; height: 100%; background: #000; color: #b8b8b8; font-family: verdana, sans-serif; font-size: 7pt; } .wrapper { height: 100%; -height: 100%; width: 439px; margin: auto; border-left: 3px solid #313131; border-right: 3px solid #313131; } .menu { float: left; width: 120px; height: 78.4%; /*FF*/ -height: 78.6%; /*IE*/ border-right: 3px solid #313131; padding: 5px; padding-top: 0px; margin: 0px; } .menu a { display: block; color: #BE6B0F; } .menu a:hover { color: #EE7C1D; } .banner { border-bottom: 3px solid #313131; border-top: 3px solid #313131; padding: 0px; margin: 0px; } .content { float: left; width: 296px; padding: 5px; padding-top: 0px; } HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <title>=CAFL= Bravery Valor Honor!</title> <link rel="stylesheet" type="text/css" href="cafl.css"/></head><body> <div class="wrapper"> <img src="images/caflbanner.gif" alt="" class="banner"/><br/> <div class="menu"> <!-- #include file="menu.inc" --> </div> <div class="content"> <div style="font-size:8pt;font-weight:bold;text-align:center;padding-top:5px"> Welcome to =CAFL=! </div><br/>content </div> </div></body></html> Link to comment Share on other sites More sharing options...
vchris Posted March 6, 2006 Author Share Posted March 6, 2006 what is this for: "-height: 100%;" Link to comment Share on other sites More sharing options...
aspnetguy Posted March 6, 2006 Share Posted March 6, 2006 what is this for: "-height: 100%;"<{POST_SNAPBACK}> That line is read only by IE and ignored by all other browsers. This lets me set IE specific attributes. The '-' is one of serveral none IE CSS hacks.so the value above that line is what all browsers read then IE get s new value on the next line since IE is the one always out of whack. Link to comment Share on other sites More sharing options...
Jonas Posted March 6, 2006 Share Posted March 6, 2006 That line is read only by IE and ignored by all other browsers. This lets me set IE specific attributes. The '-' is one of serveral none IE CSS hacks.so the value above that line is what all browsers read then IE get s new value on the next line since IE is the one always out of whack.<{POST_SNAPBACK}> But... the value (100%) is the same for both height and -height. Why do you need it then, if not to pass another value to IE? Link to comment Share on other sites More sharing options...
aspnetguy Posted March 6, 2006 Share Posted March 6, 2006 But... the value (100%) is the same for both height and -height. Why do you need it then, if not to pass another value to IE?<{POST_SNAPBACK}> oh...hehe....I just start out my stylesheets like that...I did play with the values and found in that class they didn't need to be different....in that case that line can be removed. I used that method several times in other classes.Thanks for pointing that out. Link to comment Share on other sites More sharing options...
sbrownii Posted March 7, 2006 Share Posted March 7, 2006 No offense intended in anyway, but this is an example of the result of too many articles about how to use hacks, instead of truly cross-browser css. Link to comment Share on other sites More sharing options...
Aphotic Posted March 7, 2006 Share Posted March 7, 2006 I read an article on Project VII on how to do this, with little or no hacks. If you want a really good and reliable code, check out their site. http://www.projectseven.com/ Link to comment Share on other sites More sharing options...
vchris Posted March 7, 2006 Author Share Posted March 7, 2006 I read an article on Project VII on how to do this, with little or no hacks. If you want a really good and reliable code, check out their site. http://www.projectseven.com/<{POST_SNAPBACK}> Thanks for the link Aphotic. This site is cool! Link to comment Share on other sites More sharing options...
aspnetguy Posted March 7, 2006 Share Posted March 7, 2006 No offense intended in anyway, but this is an example of the result of too many articles about how to use hacks, instead of truly cross-browser css.<{POST_SNAPBACK}> ???? I used one hack!?! Can you show me how I could have done it differently with 'cross-browser-css'???I know no other way Link to comment Share on other sites More sharing options...
sbrownii Posted March 7, 2006 Share Posted March 7, 2006 The point is you used a hack that didn't even have effect.Like I said, no offense intended. When I first learned Javascript, I learned how to detect the browser and then use separate code for each browser. I used that for years, until I realized that in the case of modern browsers that support javascript, I could usually use techniques that worked equally well in all browsers, instead of writing separate code for each.I have come across many sites that still use the old ways and for no good reason - and half the time they forget to mantain one of the sets of code, so it doesn't work right in all browsers anyway! And the hardly ever define the script tags according to w3c standardsSince I've been looking at this forum, I've noticed many many people do hacks first. It leads to messy code (sometimes not so messy...) that often has no effect.I've seen lots of people having problems getting layouts to work in both browsers, and after looking at their code, was amazed how much code and how many hacks they used to achieve simple layouts.My point was that one of the places the hack was used had no effect... Just making an observation.BTW... I'm not saying never to use hacks... Link to comment Share on other sites More sharing options...
aspnetguy Posted March 7, 2006 Share Posted March 7, 2006 no offense was taken. It was an oversight that as you mentioned had no effect.I played with the differing values for about 30 and when I realized that in that case 100% worked the same for both I forgot to delete the hack :)I agree with you 100% in hte JS thing. It is better to detect objects or functionality then to rely on browser detection.But in the end sometime hacks and unique code is necessary thanks to lovely gift for MS called IE. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now