 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / October 2007Help -- getting 100% height on borders
Hi all, I have a bug that is driving me absolutely crazy, and I don't know what to do. I want to have a border stretch down along the side of one of my div's that will be as tall as the screen, and taller if the page is taller than the screen. I need it to work in IE6 and Firefox. So I followed the instructions at: http://css-discuss.incutio.com/?page=HundredPercentHeight And it worked perfectly. Great. Then I added a doctype to my page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> And it breaks in IE6 now -- the div goes to 100% of the screen height, not 100% of its enclosing div, or the page height. I think the doctype is better because I was having some other formatting issues with margins and such that this seemed to resolve. But I can't figure out any way to achieve the same functionality anymore! Here is my code... load it up and you will see the bug in IE6 when you scroll down. Thanks, Michael <!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" xml:lang="en" lang="en"> <head> <title>x</title> <style type="text/css"> /**** Basic page layout ****/ html, body { border:0; margin:0; padding:0; height:100%; } /* We must set the p-margin to 0 in order to have our "shell" flush with the top of the screen -- even though we don't explicitly use any <p> tag */ p { margin:0; } body { background: #ffffff; font-family: Arial, Helvetica, sans-serif; text-align: center; } #shell { display:block; position:relative; width:48em; margin: 0 auto 0 auto; text-align: left; min-height:100%; /* make sure it's the whole doc */ background:#eee; } /* IE6 hack -- doesn't support min-height:100%, but setting 100% will make our side borders go all the way down... See: http://css-discuss.incutio.com/?page=HundredPercentHeight */ * html #shell { height:100% } #left-edge { position:absolute; left:-3em; width:3px; background:#ddd; height:100%; } #right-edge { position:absolute; left:51em; /* left and right edges are not exact distance */ width:3px; background:#ddd; height:100%; } #inside { display:block; position:relative; width:46em; padding: 1em; text-align: left; } </style> </head> <body> <!-- contains the entire page --> <div id="shell"> <!-- our page edges --> <div id="left-edge"> </div> <div id="right-edge"> </div> <div id="inside"> <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p> <!-- for testing height --> <p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</ p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</ p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</ p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</ p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</ p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</ p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</ p><p>x</p><p>x</p><p>x</p><p>x</p> </div> </div> </body> </html> Nobody? No advice at all? In article <1193511782.216001.293710@22g2000hsm.googlegroups.com>, > Nobody? No advice at all? About what?  Signaturedorayme > Hi all, > [quoted text clipped - 130 lines] > </body> > </html> (Trying my plea again...) Nobody? No advice at all? >> And it worked perfectly. Great. Then I added a doctype to my page: >> >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE and XHTML 1.0 Strict, good luck! Do you actually have a reason? BTW, URL not posted code.... SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > >> And it worked perfectly. Great. Then I added a doctype to my page: > >> [quoted text clipped - 4 lines] > > BTW, URL not posted code.... Here it is with a few minor corrections and the 4.01 Strict: http://netweaver.com.au/test/crazyhorseStrict.html Signaturedorayme > http://netweaver.com.au/test/crazyhorseStrict.html </ p>? SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > > http://netweaver.com.au/test/crazyhorseStrict.html > > </ p>? Sorry, not getting this? Comes up in all my browsers? Signaturedorayme >>> http://netweaver.com.au/test/crazyhorseStrict.html >>> >> </ p>? > > Sorry, not getting this? Comes up in all my browsers? You have a little paste problem, from your source: <p>x</ p></p> ^^^^^^^^^^^ SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > >>> http://netweaver.com.au/test/crazyhorseStrict.html > >>> [quoted text clipped - 6 lines] > <p>x</ p></p> > ^^^^^^^^^^^ ah... yes... how that happened I have no idea, looks as if one would have to really try to put that in... <g> Hope it is fixed now. Signaturedorayme > In article <cf775$4723e45b$40cba7b1$30...@NAXS.COM>, > [quoted text clipped - 18 lines] > -- > dorayme OK... so, now does anybody have ideas about solving the original problem? Reposting here: I have a bug that is driving me absolutely crazy, and I don't know what to do. I want to have a border stretch down along the side of one of my div's that will be as tall as the screen, and taller if the page is taller than the screen. I need it to work in IE6 and Firefox. So I followed the instructions at: http://css-discuss.incutio.com/?page=HundredPercentHeight And it worked perfectly. Great. Then I added a doctype to my page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> And it breaks in IE6 now -- the div goes to 100% of the screen height, not 100% of its enclosing div, or the page height. I think the doctype is better because I was having some other formatting issues with margins and such that this seemed to resolve. But I can't figure out any way to achieve the same functionality anymore! Load it up and you will see the bug in IE6 when you scroll down: https://s3.amazonaws.com/mjbaldwinjr/test.html In article <1193573542.979179.225930@o3g2000hsb.googlegroups.com>, > Load it up and you will see the bug in IE6 when you > scroll down: > > https://s3.amazonaws.com/mjbaldwinjr/test.html I don't see "the bug" in Win IE. I see things are different to Firefox etc. If you want a layout that appears in Firefox, I am unsure why you are laying out with absolute positioning? This looks like a three col design and there are simpler ways to do this surely? I went to site that you said you followed for some instruction and it had nothing about this complicated absolute positioning you are doing. Use Strict 4.01 doctype, not the one you are using. Put in some colours to the backgrounds so the problem you are seeing is clearer. (The reason I put up a doctype of strict with your code is that I thought JL's suggestion of a strict doctype might help you and you had not put up a url at that stage. When you did, you used a different doctype to the one suggested.) Signaturedorayme > In article > <1193573542.979179.225...@o3g2000hsb.googlegroups.com>, [quoted text clipped - 23 lines] > -- > dorayme Well, in Firefox the gray bars go all the way down to the bottom of the page, the way I want them to (I'm using Firefox 1.5). In IE6 they don't, they only go down 1 screen height, and then the stop abruptly. It doesn't matter if it's Strict or Transitional, the same thing happens. And this is exactly what the webpage I'm referring to talks about, that's what it's explaining how to do... If it's not absolute positioning, how else to do it then? It's not really a multi-"column" layout, I just want two bars that go down the full height of the page on both sides, however long the page may be. Right now I'm filling them with gray, although in production they will be a repeating graphic. In article <1193612454.066196.225730@o80g2000hse.googlegroups.com>, > > Use Strict 4.01 doctype, not the one you are using. Put in some > > colours to the backgrounds so the problem you are seeing is [quoted text clipped - 22 lines] > Right now I'm filling them with gray, although in production they will > be a repeating graphic. Please make a url that will fit and clearly exhibit the page on an 800px wide screen. I see now what you are saying, I had to see at fullscreen on a big screen on IE. How about at least some real looking content that displays like you want on Firefox say. And I or others will have a go at showing alternative mark up without the problems for IE. Your positioning mark up is obscure in that it is hard to see why it is reasonable to have it. Thank you. Signaturedorayme >> >https://s3.amazonaws.com/mjbaldwinjr/test.html > [quoted text clipped - 3 lines] > > If it's not absolute positioning, how else to do it then? Abandon #left-edge and #right-edge - you don't need them. Look at the problem differently and the solution will be clear. > Right now I'm filling them with gray, although in production they will > be a repeating graphic. If those borders should be a repeating graphic instead, make them background images for the #inside parent containers. You'll need a nested div for #shell, between it and #inside. #shell { background: #fff url(bg.png) repeat-y; color: #000; margin: auto; } #shell2 { /* might want a better name for this */ background-image: url(bg.png); background-position: right top; background-repeat: repeat-y; } #inside { margin: 0 25px; /* at least as much margin as the img width */ padding: 1em; background: #eee; color: #000; } <div id="shell"> <div id="shell2"> <div id="inside"> </div> </div> </div> SignatureBerg > >> >https://s3.amazonaws.com/mjbaldwinjr/test.html > [quoted text clipped - 41 lines] > -- > Berg Thanks for the response, but this still doesn't work -- the images will tile all the way down to the bottom of the page if the page content is taller than the screen, so it fixes that problem, BUT if the page content is shorter than the screen, then the image won't tile down to the bottom. You might wonder why I don't just use a background image for the whole page; it's because the width of the column needs to be dynamic in particular ways. So I still have the question: how to make a tiling image reach 100% of the screen height or page height, whichever is greater? And have it work in IE6 with a strict XHTML doctype? >> If those borders should be a repeating graphic instead, make them >> background images for the #inside parent containers. [quoted text clipped - 4 lines] > the page content is shorter than the screen, then the image won't tile > down to the bottom. You're all ready to completely discount the solution because of this? Or are you not clever enough to figure out how to modify the sample I gave you to fit your overall design? <heavy sigh> Do you think you are the first person to want a page to stretch the length of the browser window? Here's a tip: it's been asked before - *many* times before. Search the newsgroup archives and you'll no doubt find plenty of links. Learn to help yourself, OK? SignatureBerg > >> If those borders should be a repeating graphic instead, make them > >> background images for the #inside parent containers. [quoted text clipped - 16 lines] > -- > Berg Christ, what the hell? If you go back to read my original message, you will see that I did all the research I could, and the point is that I can get it working on every single browser I want by following instructions in newsgroups etc.... EXCEPT FOR IE6 USING A STRICT XHTML DOCTYPE. Maybe my Google skills aren't up to par, but I haven't been able to find a single mention of the problem in this particular situation in this newsgroup or anywhere on the Internet. Like I said, the original advice I'd found works in Firefox, Safari, Ie7 and IE6 quirks mode, but NOT IN IE6 NON-QUIRKS MODE. If I had been able to find something on it, I wouldn't be asking here now would I? I mean, I gave you the URL of the code I have, and you responded with something that fixes half my problem but creates a new one. So if the solution is so obvious, would you mind posting it? This does NOT seem like a trivial or basic question to me. No matter WHAT I do, it breaks in IE6 non-quirks mode. I'm sorry but I'm a bit annoyed that you seem to assume I'm such a newbie that doesn't know how to research anything. >>>> If those borders should be a repeating graphic instead, make them >>>> background images for the #inside parent containers. [quoted text clipped - 39 lines] > I'm sorry but I'm a bit annoyed that you seem to assume I'm such a > newbie that doesn't know how to research anything. Look, if you use XHTML strict and serve it properly, you don't have to worry about IE6! You just get a download prompt. End of story. SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com On Oct 30, 12:38 am, "Jonathan N. Little" <lws4...@centralva.net> wrote: > >>>> If those borders should be a repeating graphic instead, make them > >>>> background images for the #inside parent containers. [quoted text clipped - 49 lines] > ------------------- > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com OK, I give up. This thread now has 22 messages and nobody appears to have the slightest interest in actually understanding my question and trying to answer it -- all you want to do is nitpick details that have nothing to do with the original question, or insinuate I don't know what I'm talking about or not doing my research. Clearly I am using an XHTML strict doctype declaration in my header but an .html extension, and it certainly does open without downloading in IE6. I have used newsgroups hundreds of times before in my life to try asking for advice and I've always had polite, knowledgeable answers. This is the first time a question of mine has ever been treated this way. I don't know what's wrong with you people. > OK, I give up. This thread now has 22 messages and nobody appears to > have the slightest interest in actually understanding my question and > trying to answer it -- all you want to do is nitpick details that have > nothing to do with the original question, or insinuate I don't know > what I'm talking about or not doing my research. No you have been getting answers, jut not the ones you want to hear. > Clearly I am using an XHTML strict doctype declaration in my header > but an .html extension, and it certainly does open without downloading > in IE6. Wrong. File extensions have nothing to do with it. In fact, unlike Windows OS, URLs do *not* have extensions. You could label the page dapage.bogus! The reason your XHTML strict displays at all in IE6 is that it is wrongly being served as "text/html". If it was served properly as application/xhtml+xml you'll get a download box! > I have used newsgroups hundreds of times before in my life to try > asking for advice and I've always had polite, knowledgeable answers. > This is the first time a question of mine has ever been treated this > way. I don't know what's wrong with you people. Who has not been polite? Just because you haven't received the answer that you wish to hear, it is somehow rude? So if you insist on XHTML strict doctype, don't expect IE6 to play nice. Do you have a specific reason for XHTML? SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > OK, I give up. This thread now has 22 messages and nobody appears to > have the slightest interest in actually understanding my question and > trying to answer it Quite a few people have done both. The problem is that you're ruling out answers that don't fit your preconceived notion of what's wrong. > -- all you want to do is nitpick details that have > nothing to do with the original question, or insinuate I don't know > what I'm talking about or not doing my research. What an arrogant statement! If you did know precisely what the answer was, you wouldn't have needed to ask for help. > Clearly I am using an XHTML strict doctype declaration in my header > but an .html extension, and it certainly does open without downloading > in IE6. Filename extensions are irrelevant on the web. If you're delivering your content as text/html, then IE is treating it as HTML - regardless of the doctype that says it's XHTML. Because it's being treated as HTML, it is slightly broken, with /'s where they don't belong, etc. The problems with XHTML have been discussed *to death* here and elsewhere. If you're still insisting on using it, then it's patently obvious that you have not done your research; either that, or you're being too stubborn to take good advice. > I have used newsgroups hundreds of times before in my life to try > asking for advice and I've always had polite, knowledgeable answers. > This is the first time a question of mine has ever been treated this > way. I don't know what's wrong with you people. Grow up. The answers you've received are spot-on - if you can't take good advice without whining about it, that's your own fault. sherm-- SignatureWeb Hosting by West Virginians, for West Virginians: http://wv-www.net Cocoa programming in Perl: http://camelbones.sourceforge.net > Like I said, the original advice I'd found works in Firefox, Safari, > Ie7 and IE6 quirks mode, but NOT IN IE6 NON-QUIRKS MODE. If I had been > able to find something on it, I wouldn't be asking here now would I? Sorry, force of habit. We get a huge amount of drivel in here from people who don't bother doing any research at all. And the subject of 100% height *does* come up here repeatedly. > So if the solution is so obvious, would you mind posting it? This does > NOT seem like a trivial or basic question to me. No matter WHAT I do, > it breaks in IE6 non-quirks mode. Then give up on IE6 and let the better browsers have the bottom footer. It's not worth the aggravation to fight with such a pitiful browser just for eye candy. BTW, I did take an old 100% height sample of my own and looked at applying the bg images. It doesn't work consistently, so you are right about it being harder than it looks, but I don't really have any interest in doing such a design myself so won't spend any more time on it. > I'm sorry but I'm a bit annoyed that you seem to assume I'm such a > newbie that doesn't know how to research anything. Like I said, force of habit. Sorry. SignatureBerg In article <1193523037.544979.237140@22g2000hsm.googlegroups.com>, > > </body> > > </html> > > (Trying my plea again...) > > Nobody? No advice at all? You might have more luck supplying a url rather than such a lot of code. It pisses off people to be told to load up so much. It is generally acceptable (imo) to give a small amount if there is any liklihood that it can be understood there and then as markup without browser loading... If I was feeling generous, I would have to do this: copy and paste all the code into my editor use a GREP pattern to remove all the quotation characters that my newsreader has added at this stage If I was feeling very generous I would load it up to a server for you right now. Like this: http://netweaver.com.au/test/crazyhorse.html and take a peek at: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnetweaver .com.au%2Ftest%2Fcrazyhorse.html but surely you can reduce this number? Signaturedorayme > In article > <1193523037.544979.237...@22g2000hsm.googlegroups.com>, [quoted text clipped - 33 lines] > -- > dorayme Thanks for trying to post it, sorry I'm new to this group and didn't realize URLs were recommended. Here's a link to it in its validated glory: https://s3.amazonaws.com/mjbaldwinjr/test.html So, any ideas on fixing the problem? I am using XHTML strict just on the advice of fellow coders that it's best to use if possible... but if using Transitional or something would help, I could switch... Thanks again Michael In article <1193530978.561126.31790@d55g2000hsg.googlegroups.com>, > > http://netweaver.com.au/test/crazyhorse.html > > [quoted text clipped - 10 lines] > Thanks for trying to post it, sorry I'm new to this group and didn't > realize URLs were recommended. "Trying" suggests it does not show. I don't know why? Anyway, it incorporates the doctype that JL recommends... and shows up in all my browsers. Sure fixes many of the errors so JL advice is certainly first thing you should do. > Here's a link to it in its validated glory: > > https://s3.amazonaws.com/mjbaldwinjr/test.html Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.