Re: [css-d] Centered text positioned incorrectly in IE7
To give you some ideas about how you can mix your various wishes together in a mostly cross-browser reliable way, check the following slightly reworked copy of your page... http://www.gunlaug.no/tos/alien/ch/test_09_0506.html ...and its stylesheet... http://www.gunlaug.no/tos/alien/ch/test_09_0506_files/style000.css It can be made to work much better than that, but the 'em'-sizing you're using creates problems. To make it work properly you'll have to restyle the layout so the 'em'-sizing is set on body or a page-wrapper, and containers further in get sized in percentages of that outer element. regards Georg -- http://www.gunlaug.no Hello - I tried what you suggested, sizing an outer wrapper in ems and then putting everything inside that into percentages, but I was having a hard time getting things to work any better than the example you gave. After tweaking it just a bit, though, I really think that it looks just fine the way it is. http://www.selfsoothingsoftware.com/ So, unless you or anyone else can point out any other problems with it, I'm inclined to just leave it the way it is. Thanks so much for your help! Chris __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centered text positioned incorrectly in IE7
Hmm, alright. Can you or anyone else on the list suggest a better way of making this work? I'm not sure where to begin... Thanks! Chris On Mon, May 4, 2009 at 7:47 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Chris Hanks wrote: http://www.selfsoothingsoftware.com The second, and more pressing problem, is that my main content (the text column and floated boxes) appears completely out of whack in IE. The boxes are approximately in the right place, but IE7 is trying to center the paragraphs of the text column midway between the floated boxes and the opposite edge of the screen, and I'm not sure how to make it stop. Without looking at it in depth: min-width/max-width acts as 'hasLayout'[1] triggers in IE7, which causes the effect you're describing. In my (very personal) terminology you get a hard margin on a block formatted element, which means the margins on paragraphs won't flow behind the floats but instead line up against them, and the paragraphs become isolated square blocks. No other way to fix that IE7 'hasLayout' bug but to delete the min-width/max-width 'hasLayout' triggers, and find another way to add the space at both sides. If you want/need to support IE6 you'll have to create such an alternative solution anyway. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centered text positioned incorrectly in IE7
Chris Hanks wrote: Hmm, alright. Can you or anyone else on the list suggest a better way of making this work? I'm not sure where to begin... For cross-browser appearance in all somewhat standard-aware browsers - including IE6/7 in Strict mode, the following approach will work. - Add left and right padding on #elastic-container, and modify its min/max-width to include these side-paddings. - Pull those .left and .right boxes into #elastic-container's side-paddings, so they appear where they are now. - Remove side-margins and max-width from .tutorial p, so those paragraphs are held in place by the side-paddings on #elastic-container and the inner side-margins on those .left and .right boxes. In addition: you should mark up in accordance with the chosen doctype, or else you'll have a hard time making sense of what the markup validator tells you... http://validator.w3.org/check?uri=http://www.selfsoothingsoftware.com/ Some of those errors are more serious, while others are caused by doctype vs. markup confusion. In short: your document is invalid tag soup ATM, and should be fixed at markup level before you start correcting it at CSS/appearance level. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centered text positioned incorrectly in IE7
For cross-browser appearance in all somewhat standard-aware browsers - including IE6/7 in Strict mode, the following approach will work. - Add left and right padding on #elastic-container, and modify its min/max-width to include these side-paddings. - Pull those .left and .right boxes into #elastic-container's side-paddings, so they appear where they are now. - Remove side-margins and max-width from .tutorial p, so those paragraphs are held in place by the side-paddings on #elastic-container and the inner side-margins on those .left and .right boxes. In addition: you should mark up in accordance with the chosen doctype, or else you'll have a hard time making sense of what the markup validator tells you... http://validator.w3.org/check?uri=http://www.selfsoothingsoftware.com/ Some of those errors are more serious, while others are caused by doctype vs. markup confusion. In short: your document is invalid tag soup ATM, and should be fixed at markup level before you start correcting it at CSS/appearance level. regards Georg -- http://www.gunlaug.no Hello - Alright, I took care of the markup problems, so everything validates. It's been put up in its updated form: http://www.selfsoothingsoftware.com I also set up the CSS like you suggested - the thing I don't like about the padding is that when the browser window is small, the text column shrinks to be so narrow that it's awkward to read, with a lot of whitespace to either side. I was trying to keep the main text column at a consistent width, and deal with an expanding/shrinking window size by moving the supplemental boxes in and out of the main column. Is there a way to do that? I'm also not sure how you meant I should move the right and left boxes into the padding on either side. I tried setting their positions to relative and then displacing them with left: and right:, but that just leaves big holes where they used to be. Thanks again! Chris __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centered text positioned incorrectly in IE7
Chris Hanks wrote: Alright, I took care of the markup problems, so everything validates. It's been put up in its updated form: http://www.selfsoothingsoftware.com Good. Makes it much easier to work with. I was trying to keep the main text column at a consistent width, and deal with an expanding/shrinking window size by moving the supplemental boxes in and out of the main column. Is there a way to do that? Yes. See below. I'm also not sure how you meant I should move the right and left boxes into the padding on either side. I meant: with negative margins on those floats. I tried setting their positions to relative and then displacing them with left: and right:, but that just leaves big holes where they used to be. Relative positioning doesn't move elements, only offset them visually. This means they still take up space in their original position, which creates those gaps you observed. To give you some ideas about how you can mix your various wishes together in a mostly cross-browser reliable way, check the following slightly reworked copy of your page... http://www.gunlaug.no/tos/alien/ch/test_09_0506.html ...and its stylesheet... http://www.gunlaug.no/tos/alien/ch/test_09_0506_files/style000.css It can be made to work much better than that, but the 'em'-sizing you're using creates problems. To make it work properly you'll have to restyle the layout so the 'em'-sizing is set on body or a page-wrapper, and containers further in get sized in percentages of that outer element. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Centered text positioned incorrectly in IE7
Hello - Before I begin, you can see what I'm talking about at http://www.selfsoothingsoftware.com I have a whole lot of text, with smaller supplemental text sections wrapped in divs and floated to the left and right (though some stay in the center). Ideally, they float out to either side of the big block of text, and if the browser window shrinks they sink into the text column, displacing it as necessary. I did this simply by giving the text column a max-width and auto margins (keeping it nice and centered, and slender enough to be easily readable). Then, I set a container with a min- and max-width, and gave the floated boxes margins so that they'd never get too close to the edge of the screen. Things are looking exactly as they should in Firefox and Opera - everything is fairly presentable (I think) in a whole spectrum of screen resolutions (1024x768 and above). Also, up at the very top of the page is a test of the grids layout, which is just the 960 framework modified to use ems (with a font-size of 62.5%) instead of pixels. The problems of course arise when I try to view it in IE6 or IE7 (I'm willing to ignore problems with IE6 nowadays, but I feel that I should support IE7). The first problem is my modified 960 grids - they don't all fit together horizontally as they should - the last one or two columns tend to be knocked down to the next row. I suspect that IE is doing something that it shouldn't be with the em measurements, but I'm not sure what...? The second, and more pressing problem, is that my main content (the text column and floated boxes) appears completely out of whack in IE. The boxes are approximately in the right place, but IE7 is trying to center the paragraphs of the text column midway between the floated boxes and the opposite edge of the screen, and I'm not sure how to make it stop. Any suggestions? I'm interested in how to fix this, but other general design comments are of course welcome. Also, I haven't tried viewing this in any browsers other than Firefox, Opera and IE6/IE7, so if anyone notices any other problems, I'm curious to hear about them. Thank you! Chris __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centered text positioned incorrectly in IE7
Chris Hanks wrote: http://www.selfsoothingsoftware.com The second, and more pressing problem, is that my main content (the text column and floated boxes) appears completely out of whack in IE. The boxes are approximately in the right place, but IE7 is trying to center the paragraphs of the text column midway between the floated boxes and the opposite edge of the screen, and I'm not sure how to make it stop. Without looking at it in depth: min-width/max-width acts as 'hasLayout'[1] triggers in IE7, which causes the effect you're describing. In my (very personal) terminology you get a hard margin on a block formatted element, which means the margins on paragraphs won't flow behind the floats but instead line up against them, and the paragraphs become isolated square blocks. No other way to fix that IE7 'hasLayout' bug but to delete the min-width/max-width 'hasLayout' triggers, and find another way to add the space at both sides. If you want/need to support IE6 you'll have to create such an alternative solution anyway. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
