1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Height Issue

Discussion in 'CSS' started by darren132, Jan 22, 2008.

  1. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #21
    I have found a solution, but it uses a ton of javascript, too BIG to post here. :eek: Basically you have to use a 122 KB prototype.js file (http://www.prototypejs.org/). You then have to apply some CSS techniques plus your own piece of customized javascript.

    I didn't really want to use so much javascript, but I guess I don't have a choice. It increases the scripts loading time BIG time. :(
    SEMrush
     
    darren132, Jan 25, 2008 IP
    SEMrush
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #22
    Is there still a usable site (albeit one that doesn't look the way you want) for those without Javascript?
     
    Stomme poes, Jan 27, 2008 IP
  3. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #23
    Nope. That can't be achieved without using javascript for the layout that I need otherwise, I would do my site without javascript. Most people have javascript enabled in their browser anyways.

    For those who want to see the final layout, here it is: CLICK HERE

    Resize your browser to see the effect and how it changes to the browsers height and width.
     
    darren132, Jan 27, 2008 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #24
    Wait.. why did you need to resort to JS again? What was wrong with inimino's example?
     
    soulscratch, Jan 27, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,157
    Likes Received:
    1,708
    Best Answers:
    239
    Trophy Points:
    515
    #25
    That's my thinking - his works pretty good. There are the issues in IE with it... but, those aren't too hard to overcome:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
    
    <meta 
    	http-equiv="Content-Type"
    	content="text/html; charset=iso-8859-1" 
    />
    
    <title>
    	Fixed header &amp; footer, variable height content
    </title>
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    
    html, body {
    	height:100%;
    	overflow:hidden; /* prevent IE double scrollbars */
    }
    
    h1 {
    	position:absolute;
    	width:100%;
    	height:128px;
    	text-align:center;
    	line-height:128px;
    	background:#DDF;
    }
    
    #content {
    	position:absolute;
    	top:128px;
    	bottom:64px;
    	width:100%;
    	overflow:auto;
    	background:#FED;
    }
    
    * html #content {
    	/*
    		we'll set 320px as the fallback - it might look silly, but
    		if the expression fails at least the user will be able to access
    		the content
    	*/
    	height:320px; 
    	/*
    		Since IE6/earlier ignores 'bottom' when 'top' is set, we'll use
    		an expression to set the content height.
    	*/
    	height:expression(
    		(document.body.clientHeight-192)+"px"
    	);
    }
    
    p {
    	padding:0.5em;
    }
    
    #footer {
    	position:absolute;
    	bottom:0;
    	width:100%;
    	height:64px;
    	text-align:center;
    	line-height:64px;
    	background:#DFD;
    }
    </style>
    
    </head><body>
    
    	<h1>Test Header</h1>
    	
    	<div id='content'>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    		<p>Test Content</p>
    		<p>More Test Content</p>
    		<p>Even More Test Content</p>
    	</div>
    	
    	<div id='footer'>
    		Test Footer
    	</div>
    
    </body></html>
    Code (markup):
    overflow:hidden on HTML,BODY gets rid of the double scrollbar problem in IE6/7 when not in quirks mode, and an expression addresses the fact that IE ignores 'bottom' when 'top' is set. Gets you CSS only for good browsers, and a tiny bit of .js assist for IE6/earlier. Best of both worlds.

    That does do what we're talking about here, right?
     
    deathshadow, Jan 27, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #26
    "Most people have Javascript enables anyway."

    Here's your site via corporate firewall (or school or library or text-browser/screenreader/etc or old browser or paranoid people such as myself with NoScript) (you can still choose not to change anything, but I do think you should just know... plus you've got a charset issue):

    (for some reason DP changes my beautiful gifs into bloated dithered ugly jpg's but you can still kinda see it)
     

    Attached Files:

    Stomme poes, Jan 28, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #27
    Stomme poes, Jan 28, 2008 IP
  8. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #28
    Wow, one line of javascript, not bad. I'm not very knowledgeable in javascript so that's why I couldn't figure it out on my own. I'm going to see if I can work with that though in adding the sidebar and the top bars. The blue & red bar are collapsible so that's going to be a challenge to even figure out if it's possible with minimal amount of javascript.


    I think I have an easy solution to fix that. I'll just detect if the user has javascript enabled and if not, I'll enable the main scrollbars on the side of the browser.

    EDIT: The language that is shown in the example is not what I speak or write so yeah, there's a charset issue, but the script will be in english. It's just thrown in to make the content div bigger to show the scrollbar.
     
    darren132, Jan 28, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #29
    Just so you know, even English can get those damn ugly question marks without a charset meta tag and server http header. Usually it's apostrophes, though I think I've seen them with / too.

    For English, no problem to set to iso-8859-1. UTF-8 is okay too, also Western Latin plus Greek and Cyrillic : )
     
    Stomme poes, Jan 29, 2008 IP
  10. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #30
    I was working with your code and expressions() shouldn't be used as they were invented by IE and basically other browsers don't use them. I'm going to have to stick with javascript in the header to be compatible with most browsers.


    Ya, I have the meta tag in my document already:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    I can't wait for IE8 though as they're suppose to be making it so that there will be a new mode that will abide by the w3c standards. They have already passed the acid2 test (http://blogs.msdn.com/ie/archive/2007/12/19/internet-explorer-8-and-acid2-a-milestone.aspx) and are hoping to release the beta in the first half of this year.
     
    darren132, Jan 29, 2008 IP
  11. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #31
    You really should stick with DeathShadows code. It is a much cleaner, faster loading, and easier to maintain solution.

    All other browsers ignore the Javascript expression in the CSS, so you don't have to worry about it messing up your layout in other browsers.
     
    ChaosFoo, Jan 29, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #32
    I agree. The javascript in the CSS is there because IE6 is retarded and sometimes needs a caregiver to wipe its butt. So, give it one. What you're on the right track about would be for instance the IE-only CSS properties such as Filter.

    Your CSS will not validate with the Javascript, but I've been using deathshadow's examples for all my flex-width sites since IE6 is dumb enough to not recognise min and max width. Just like "behavior" and the Holly hack aren't accepted by validators, it's considered a necessary evil (and not quite viewed the same as overall "hacks" by the community, but as an acceptable means of getting a non-compliant browser working for your client(s)).

    As Foo said, the CSS javascript is completely ignored by other browsers cause they know better : ) I've been testing my sites in all browsers plus JAWS and Lynx and no problems! Ignored just like <!--comments-->
     
    Stomme poes, Jan 29, 2008 IP
  13. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #33
    I'm working with another programmer to try and come to a pure css solution, but he's having trouble with the content area at the moment because of the side bar. Using the expression in CSS works perfectly in IE as I found out yesterday. One problem that I'm experiencing though is that if I have a width of 100% for my footer or content area and I add a border all the way around, the right border is missing (It seems to go off the page). Do you know how I fix that? It happens in both IE and FF.
     
    darren132, Jan 29, 2008 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,157
    Likes Received:
    1,708
    Best Answers:
    239
    Trophy Points:
    515
    #34
    That is WHY I use it - we are only targeting IE6 and earlier WITH THAT CODE. The CSS that's there works in EVERY OTHER BROWSER WITHOUT THAT. It's WHY it's behind the * html hack. If you are REALLY that worried about it, you could put that in another stylesheet and hide it behind a conditional comment - I don't like to go that route personally because that's more code in every html page on the site, when CSS is cached across pages. (every tiny bit of bandwidth saved helps)

    MY EXAMPLE ALREADY WAS... Delete everything in the * html #content declaration - and TEST IT in Opera, FF, Safari and IE7 - GUESS WHAT? The page works exactly as advertised in all of those. The expression is there JUST for IE6/earlier.
     
    deathshadow, Jan 30, 2008 IP
  15. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #35
    Thanks for explaining. I've been modifying your layout and I got everything to work perfectly, but I think I ran into a "BUG" with javascript/css. Here's my javascript code:

    <script type="text/javascript">
    	//<![CDATA[
    	try {
    		fit();
    	}
    	catch(error) {
    		/* document.write("Sorry, an error has occurred!"); */
    	}
    	function fit() {
    		if(document.body.clientWidth || document.body.clientHeight) {
    			var wrapper = document.getElementById('wrapper');
    			var sidebar = document.getElementById('sidebar');
    			var content = document.getElementById('content');
    			var footer = document.getElementById('footer');
    
    			var cw = document.body.clientWidth;
    			var ch = document.body.clientHeight;
    
    			wrapper.style.width = cw - 2 + "px";
    			content.style.width = cw - sidebar.offsetWidth - 3 + "px";
    			content.style.top = ch - (50 + 50 + 50 + 9) + "px";
    			content.style.left = sidebar.offsetWidth + 1 + "px";
    			footer.style.width = cw - 2 + "px";
    		}
    	}
    	function resize() {
    		window.onresize = fit;
    		fit();
    	}
    	//]]>
    	</script>
    Code (markup):
    For some reason the line --> content.style.top = ch - (50 + 50 + 50 + 9) + "px"; <-- doesn't want to work correctly. Here's what it looks like in the layout: CLICK HERE. It works if I specify the correct pixels amount in the stylesheet and remove this line from the javascript, but I want it to be dynamic so that It can determine the top height itself. Why doesn't this work?

    Here's the CSS code:

    #sidebar {
    	position: absolute;
    	float: left;
    	top: 159px;
    	bottom: 53px;
    	width: 200px;
    	border: 1px solid black;
    	background: red;
    }
    
    #content {
    	position: absolute;
    	top: 159px;
    	bottom: 53px;
    	overflow: auto;
    	border: 1px solid black;
    	background: #FED;
    }
    
    * html #content {
    	height: 400px; /* This is the fallback if the expression fails. */
    	height: expression((document.body.clientHeight - 192) + "px"); /* Since IE6/earlier ignores 'bottom' when 'top' is set, we use an expression to set the content height. */
    }
    Code (markup):
     
    darren132, Jan 30, 2008 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,157
    Likes Received:
    1,708
    Best Answers:
    239
    Trophy Points:
    515
    #36
    I have NO CLUE what you have that giant javascript for - whatever it's for - it's likely completely unneccessary, bloated and a waste of time. It should NOT be needed and frankly, looks like gibberish (and this is from someone who originally embraced DHTML with 30 years of coding under his belt)

    Do you have a link to the FULL code of what you are trying to do? You seem to be REALLY overthinking the solution here.... When it comes to showing/hiding them, it should be a simple matter of a class swap... no, that javascript isn't doing that either... What the???

    I have NO CLUE what you are trying to accomplish with that .js - at least, not that isn't already accomplished by the CSS. (well, resize maybe, but then you just make sure to trip haslayout and you're fine)
     
    deathshadow, Jan 31, 2008 IP
  17. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #37
    All that piece of javascript does is resize everything according to the browser viewport. I didn't know how else to do it. I was able to fix the issue by removing the "ch" (clientHeight). You can download the file here: CLICK HERE. Is there a better way to doing this?
     
    darren132, Jan 31, 2008 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #38
    Trying to set height and width by hand is working really hard to do what pages will usually do by default. Usually, if you don't set widths on stuff, everything will try to expand to fill the viewport (block elements anyway).
     
    Stomme poes, Jan 31, 2008 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,157
    Likes Received:
    1,708
    Best Answers:
    239
    Trophy Points:
    515
    #39
    I still can't quite figure out what it is you are even TRYING to do with that layout - but then the lack of content on those bars, much less identification of what should scroll and what shouldn't...

    I THINK you are messing it up by having the header's NOT be fixed like they should be - you've got all these DIV that if you are going to use a shrinking header/footer, need to be PART of that top shrinking header.

    In general though, I think you are going overly complex on what should be a simple standard layout. There's a REASON you don't see websites doing this stuff.
     
    deathshadow, Feb 1, 2008 IP
  20. darren132

    darren132 Peon

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #40
    Ya that's been the big issue with the content area and unfortunately the only solution that I could find to solve that was to use javascript.


    The bars are not suppose to scroll. I provided an image back in this forum of what content will be going inside (Click image for bigger view):

    [​IMG]

    The header, content, and footer DON'T collapse (they're always shown and the footer needs to remain at the bottom of the viewport). It's just the 2 bars below the header and the sidebar beside the content area that collapse. The 2 bars below the header are not collapsable at the same time.
     
    darren132, Feb 1, 2008 IP