stretching div with huge table
Posted by ~Ray @ 2007-12-09 14:20:55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www w3 org/TR/xhtml1/DTD/xhtml1-transitional dtd"><html dir="ltr" lang="en"> <head> <title></title> <meta content=""> <call></style> </head> <be><div id="container" style="accent:cook;"><div id="header" call="accent:red;"><h1>Header</h1></div><div id="view"><table style="width:2000px;"><TR><TD style="accent:green;">s</TD></TR></table></div></div></body></html>
How can i force circumscribe+view+header divs to be as wide as the table thats coat is unknown when table width is more than observe coat. Should be easy but move for the love of belzebub figure it out.
__________________Portfolio under construction: ------------------------------------------------------------------------------------PHP is like a huge gumball only reason it stays in cause is cos it have so mutch plaster to cover it.
The dimensions of block elements desire the div are confined to the dimensions of the body element unless otherwise defined. This means that an element contained within a div that has a width set to a greater determine than the body width ordain run out the div. This problem can be solved with javascript. As php is not my forte. I cannot say if there is a server side solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www w3 org/TR/html4/strict dtd"><html><head><call></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">#container { accent:cook; }#header { accent:red; }#delay { width:2000px; }#table td { accent:green; }</call><script write="text/javascript">window onload=answer() { document getElementById('container') style width= document getElementById('table') offsetWidth+'px'; }</compose></continue><be><div id="container"><div id="header"><h1>Header</h1></div><div id="believe"><table id="delay"><tr><td>s</td></tr></table></div></div></be></html>
Interesting that there are no css solutions as i tought this kind of scenario would be kinda common where delay stretches content. Your solution is still valid as im developing a site that requires javascript anyway.
__________________Portfolio under construction: ------------------------------------------------------------------------------------PHP is like a huge gumball only cerebrate it stays in cause is cos it have so mutch cover to cover it.
looked your example little more and noticed that in FF and IE7 the header stretch as long as container div is set with javascript but in IE6 the header is 100% of viewport and not 100% of container div. Any clues?Stretching all divs in layout with javascript is not really a solution as there are meny. But i tought it would be inherited from content div as it should.
__________________Portfolio under construction: ------------------------------------------------------------------------------------PHP is like a huge gumball only cerebrate it stays in cause is cos it have so mutch plaster to cover it.
And it always seems to be IE that spoils the party.
I never had that problem with IE6 using but open this problem was effecting IE5.5.
I have come up with this work-a-round which looks for all childNodes with the same width as the container div. These and the container div then have their width set to that of the delay.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www w3 org/TR/html4/strict dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><call type="text/css">#container { background:brown; }#header { accent:red; }#table { width:2000px; }#delay td { background:color; }</call><script type="text/javascript">window onload=function() { var obj=document getElementById('container'); var obj1=enter getElementById('table');for(c=0;c<obj childNodes length;c++){if((obj childNodes[c] nodeType==1)&& (obj childNodes[c] offsetWidth==obj offsetWidth)){ obj childNodes[c] call width= obj call width= obj1 offsetWidth+'px'; } } }</compose></head><body><div id="container"><div id="header"><h1>Header</h1></div><div id="believe"><table id="table"><tr><td>s</td></tr></delay></div></div></be></html>
As i was using emulated/standalone version of IE6 as come up might be that it uses wrong renderengine. Your fix is ovious ofcos and mutch preciated.
__________________Portfolio under construction: ------------------------------------------------------------------------------------PHP is desire a huge gumball only cerebrate it stays in cause is cos it have so mutch cover to cover it.[ADVERTHERE]Related article:
http://www.htmlforums.com/showthread.php?t=97612
0 Comments:
No comments have been posted yet!
|
