Re: [WSG] Fluid layout
Ok. I added a min-width to the #content which seems to stop the page breaking up under 1000px. I also used the _javascript_ fix for IE but... now then it seemed that IE dropped apart at widths OVER 1200px! So.. I added 'position:relative' to the #content - seems to always fix most IE probs! - but no joy. THEN tried 'position:ABSOLUTE'... bingo! Why on earth does this work?? Also, there is still a flaw bottom left where some image dropping out of the 'box'... why is that?Thanks in advance!Adam
Re: [WSG] Fluid layout
Adam Morris wrote: Ok. I added a min-width to the #content which seems to stop the page breaking up under 1000px. I also used the javascript fix for IE but... now then it seemed that IE dropped apart at widths OVER 1200px! So.. I added 'position:relative' to the #content - seems to always fix most IE probs! - but no joy. THEN tried 'position:ABSOLUTE'... bingo! Why on earth does this work?? Probably because 'position: absolute' adds 'Layout' to that container[1]. It's an IE-bug that is often used to fix things in that browser, although that bug most often creates more problems than it solves. You may try one of the other 'hasLayout' triggers/solutions mentioned in that 'Layout'[1] article. I prefer the proprietary 'zoom: 1;' myself since it isn't applied by good browsers, and will work even in IE7. General rule of thumb is to not use 'position: absolute' on large parts of any complex layout, since absolute positioned elements are taken out of the flow and won't interact properly with other elements in same layout. May make it harder to create coherent layouts. Also, there is still a flaw bottom left where some image dropping out of the 'box'... why is that? In IE6? Probably a result of the same 'Layout' bug. Read up on it. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html#prop -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid layout
Adam Morris wrote: I've just made the background images 3000px wide to cover the gaps that open up and, I think, I've narrowed the container - although I'm not sure now!.. It also now seems not to break in IE at widths over 1200px.. Am I right? My Virtual PC browser window doesn't allow me to stretch the site much at all! http://www.megustalatelevision.com/uwish/index1.html Looks like you are pretty close to a stable solution. Main part seems to render well to around 3000 browser-width, which should be plenty. Of course there's a huge white space at the left side in the main column at that width (and those text-lines ends up a bit too wide for my reading-style :-) ). IE6 does show some background-flaws below the main column on windows wider than 1600px, but seems to be fine on narrower widths. The min-width javascript doesn't have the correct values for your layout, so it is jumping a bit at around 1020 window-width. Martin Heiden wrote earlier: Probably because 'position: absolute' adds 'Layout' to that GS container[1]. It's an IE-bug that is often used to fix things in that browser, although that bug most often creates more problems than it solves. Are you sure? He wrote that he tried position: relative as well and that it didn't work for him. This should have added Layout as well. I didn't take a closer look to the site, but I bet that (as you mentioned) position: absolute took the container out of the flow and solved the problem. And of course created some new ones... No, I'm not entirely sure, since I didn't download and put the page in question through rigorous tests. I based my probably on experience with IE/win and its bugs. The 'position: relative' solution doesn't automatically add Layout in IE/win. It does affect layering, which is often needed when some element becomes invisible or renders incomplete in IE. One often has to use one of the real 'hasLayout' triggers in combination with 'position: relative' if a badly rendered element crosses its parent-container's edges. Such a scenario doesn't apply in this case, I think. regards Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid layout
Really? I thought I'd done everything the project 7 site told me.. ie. change the two things: the div and the size. What have I missed, Gunlaug?On 25/02/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote: The min-width _javascript_ doesn't have the correct values for yourlayout, so it is jumping a bit at around 1020 window-width.
Re: [WSG] Fluid layout
Adam Morris wrote: Really? I thought I'd done everything the project 7 site told me.. ie. change the two things: the div and the size. What have I missed, Gunlaug? On 25/02/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote: The min-width javascript doesn't have the correct values for your layout, so it is jumping a bit at around 1020 window-width. I'm not too familiar with that script since I use 'expressions' instead, but it looks like some margins and/or paddings in your layout are not part of the fixed width that IE lands on as min-width. Maybe someone else can fill in the missing pieces :-) Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid layout
Title: Re: [WSG] Fluid layout On 2/24/06 2:18 PM, Adam Morris [EMAIL PROTECTED] wrote: it's not quite there yet. Or try a look at 800 wide... Sorry, no time to peek at it. Just an FYI... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com
Re: [WSG] Fluid layout
Adam Morris wrote: http://www.megustalatelevision.com/uwish Observation: Fine, 840 - 3800. ...looks like any other fixed-width pages around. http://www.megustalatelevision.com/uwish/index1.html Observation: Main column drops below 1000px. OK (more or less), 1024 - 1600. Background-problems (breaking up), 1933 - 3800. Suggestion: Float 'column' at a fixed width (px), and leave 'contenttext' in the flow with fixed (px) margins and with 'width: auto'. Make it stable from 750 to 1600 (or wider). Personal preference: I don't think text-lines should be wider than 600 - 800px on any monitor, as long lines are generally harder to follow and read than somewhat width-limited ones. Max-width might work for you. regards Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid layout
On 06/02/24 16:04 Gunlaug Sørtun apparently typed: Personal preference: I don't think text-lines should be wider than 600 - 800px on any monitor, as long lines are generally harder to follow and read than somewhat width-limited ones. Max-width might work for you. Speaking of sizing things in px, particularly line lengths, when discussing fluid layouts, makes no sense to me. I find an 800px line length perfectly fine, and a 500px line length rather short, when I'm using a 28px default. Line lengths are better set relative to text size: http://mrmazda.no-ip.com/auth/fflinelength.html http://mrmazda.no-ip.com/SS/fflinelength.jpg -- Love your neighbor as yourself. Mark 12:31 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid layout
Felix Miata wrote: Speaking of sizing things in px, particularly line lengths, when discussing fluid layouts, makes no sense to me. I find an 800px line length perfectly fine, and a 500px line length rather short, when I'm using a 28px default. Line lengths are better set relative to text size: And I prefer to use /eye-movement/ when measuring what I see as a suitable line-length - regardless of font-size and the number of letters on each line. To be precise: I hardly move my eyes sideways at all when I read text on web pages - using the same reading-technique as when I read most printed material, and I read web pages on a 1280 x 1024 screen with 72px/inch. Viewing-distance is approximately 1.3 meter, and I set my browser(s) to 'min font size = 14px' in order to average out various font-families and font-sizes defined in web pages to an acceptable size. IE/win is set at 'ignore font size / medium' when it's occasionally used on the web. Doesn't happen too often. If web pages scale text-lines too wide for my liking - as some do when they set line-lengths relative to text size, then I either shrink the browser-window and/or use 'fit to window width' - in Opera. That's _my_ preference as both web user and web developer. Everyone else may of course have their own preferences. That's what makes the web so user-friendly, in that we all may have it our own way if we only know how :-) Now, as _you_ know; I test my own creations to the extremes, since I like to know what they may come out as - even if it doesn't make any sense to me. I still don't care much about how visitors like it or not - I just try to accommodate them the best I know how to. The fact that I sometimes express what my own preferences are, is within the scope of most discussion lists. We may of course discuss those here if you like, as some may find such a discussion useful in case they haven't made up their own mind about these matters already. regards Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
