Re: [WSG] centring and viewport size
Gunlaug Sørtun wrote: Designer wrote: Aw, flip! I look forward to seeing what you come up with! :-) These two: #3: mode-independent conditional IE-expression for container sized in 'em'... http://www.gunlaug.no/tos/alien/test_07_3814.html #4: mode-independent conditional IE-expression for container sized in 'px'... http://www.gunlaug.no/tos/alien/test_07_3816.html Should cover most needs for such constructions. I have not corrected for the effect of border-width on box-model in quirks mode. Something left for you :-) Both seem otherwise to work quite smooth in IE/win - a trick to the last one, so you can pick and choose. Georg That's brilliant Georg! (As usual) All those absolutely positioned workarounds are now in the bin! And no single -cell tables either. I consider this a real step forward . . . -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
Nick Fitzsimons wrote: Use an IE conditional comment [1] to feed the expression to IE, and all shall be well - or, at least, validate :-) Cheers, Nick. Hi Nick, Georg, Done that - works fine. See http://www.rhh.myzen.co.uk/gam/sandbox/index_cc.html to see the action. It all validates. I've used standard code to include display : table and display : table cell for compliant browsers, and the conditional comment for IE. Works in FF, Opera 9, IE6 and IE7. The window being too small to display the top of the page is not a problem using this approach, as there isn't any absolute positioning.. Mmmm. Can't help feeling there's a snag here, and that some browsers will just fall apart . . .it's too simple to be true! :-) -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
Designer wrote: http://www.rhh.myzen.co.uk/gam/sandbox/index_cc.html to see the action. It all validates. I've used standard code to include display : table and display : table cell for compliant browsers, and the conditional comment for IE. Works in FF, Opera 9, IE6 and IE7. Safari is doing fine too - as expected. The window being too small to display the top of the page is not a problem using this approach, as there isn't any absolute positioning.. Excellent. Can probably improve the expression by making it stop at zero if 'clientHeight/2-100' becomes less than zero. IE will behave almost like a decent browser then. Mmmm. Can't help feeling there's a snag here, and that some browsers will just fall apart . . .it's too simple to be true! :-) The 'CSS table' part _is_ simple, and decent browsers are doing their job - period. What did you expect, and what more can you ask for? That IE doesn't understand all that much CSS and needs workarounds, is also as expected. Sure, we should be able to ask for more after all this time, but... better luck with IE8 - IE12 or whatever :-) regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
Gunlaug Sørtun wrote: Designer wrote: http://www.rhh.myzen.co.uk/gam/sandbox/index_cc.html The window being too small to display the top of the page is not a problem using this approach, as there isn't any absolute positioning.. Yes, it is. Check again. You get a negative margin-top half the height of the container at short windows, so the top of the container goes above window and out of reach in IE. I've played with it some more and written a conditional expression that solves that by not allowing negative margin-values... http://www.gunlaug.no/tos/alien/test_07_3812.html ...and using my approach regarding where we put font-size, we can also extract the necessary information from IE's to make it work flawless for an em-sized container - just resize font and IE will recalculate. The expression I use above will only work in IE6 and 7 - standard mode. I prefer to keep IE6 in quirks mode and also assist IE5+/win a bit, so I'll write a mode-independent expression later. Simplicity is always best ;-) regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
Gunlaug Sørtun wrote: Gunlaug Sørtun wrote: Designer wrote: http://www.rhh.myzen.co.uk/gam/sandbox/index_cc.html The window being too small to display the top of the page is not a problem using this approach, as there isn't any absolute positioning.. Yes, it is. Check again. You get a negative margin-top half the height of the container at short windows, so the top of the container goes above window and out of reach in IE. I've played with it some more and written a conditional expression that solves that by not allowing negative margin-values... http://www.gunlaug.no/tos/alien/test_07_3812.html ...and using my approach regarding where we put font-size, we can also extract the necessary information from IE's to make it work flawless for an em-sized container - just resize font and IE will recalculate. The expression I use above will only work in IE6 and 7 - standard mode. I prefer to keep IE6 in quirks mode and also assist IE5+/win a bit, so I'll write a mode-independent expression later. Simplicity is always best ;-) regards Georg Aw, flip! I look forward to seeing what you come up with! :-) -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
Designer wrote: Aw, flip! I look forward to seeing what you come up with! :-) These two: #3: mode-independent conditional IE-expression for container sized in 'em'... http://www.gunlaug.no/tos/alien/test_07_3814.html #4: mode-independent conditional IE-expression for container sized in 'px'... http://www.gunlaug.no/tos/alien/test_07_3816.html Should cover most needs for such constructions. I have not corrected for the effect of border-width on box-model in quirks mode. Something left for you :-) Both seem otherwise to work quite smooth in IE/win - a trick to the last one, so you can pick and choose. Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
David Hucklesby wrote: However, did you look at Georg's solution he sent Saturday? http://www.gunlaug.no/tos/alien/test_07_3810.html For IE, he uses JavaScript (or is it JScript?) in a Microsoft-only expression to position the DIV's top. It seems to solve your problem nicely, even in IE7, while modern browsers are happy with CSS alone. Hi David, Yes, I looked at Georg's approach, and it's very good. However, in this exercise ( a learning one!) I want the CSS to validate - and it won't if you use a MS expression to make IE conform. Whilst this is a learning thing, I do want: a) everything to validate b) it to work in all (OK, most :-) ) browsers. (Not asking much! :-)) Thanks. -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
On 21 Mar 2007, at 10:52:39, Designer wrote: David Hucklesby wrote: http://www.gunlaug.no/tos/alien/test_07_3810.html However, in this exercise ( a learning one!) I want the CSS to validate - and it won't if you use a MS expression to make IE conform. Whilst this is a learning thing, I do want: a) everything to validate b) it to work in all (OK, most :-) ) browsers. (Not asking much! :-)) Use an IE conditional comment [1] to feed the expression to IE, and all shall be well - or, at least, validate :-) Cheers, Nick. [1] http://msdn.microsoft.com/workshop/author/dhtml/overview/ ccomment_ovw.asp -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size
Designer wrote: However, in this exercise ( a learning one!) I want the CSS to validate - and it won't if you use a MS expression to make IE conform. Whilst this is a learning thing, I do want: a) everything to validate b) it to work in all (OK, most :-) ) browsers. (Not asking much! :-)) That's why I asked if you could find (better) ways to make IE behave. My expression does not solve the too short window problem - in fact it makes it worse, IMO. So here's an exercise for you: 1: Turn that expression into a part of a javascript piece. - Validity solved. 2: Make the script check what happens on screen - if the browser understands CSS and adjust the container into vertical position, or not. If _not_ then let the absolute positioning kick in. - Should work in all (or at least in most) browsers, and should not degrade behavior in CSS capable ones. If a script can compare the height of the window with the height of the container, and simply change positioning to 'static' for the container when the window is as short as or shorter than the container, then the entire container will always be reachable on short windows - same as for the CSS capable browsers. You see... I'm not asking much either - only that you don't disturb CSS capable browsers for the sake of fixing the weak one(s) :-) regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
David Hucklesby wrote: Use JavaScript to change the element's top-margin style directly, perhaps? Cordially, David -- How exactly would you do that? (I'm interested, and I'm learning :-) ) -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote: Thanks to those who responded on this. What I've done is to make a file which uses the javascript to determine the space available in the browser window, [...] You can see all this at: http://www.rhh.myzen.co.uk/gam/sandbox/ David Hucklesby suggested: Use JavaScript to change the element's top-margin style directly, perhaps? On Tue, 20 Mar 2007 18:56:06 +, Designer then asked: How exactly would you do that? (I'm interested, and I'm learning :-) ) Well, as you figured the amount of space needed to push the DIV down in order to center it, I was thinking of something like: contentDiv.style.marginTop = calculatedGap + 'px'; However, did you look at Georg's solution he sent Saturday? http://www.gunlaug.no/tos/alien/test_07_3810.html For IE, he uses JavaScript (or is it JScript?) in a Microsoft-only expression to position the DIV's top. It seems to solve your problem nicely, even in IE7, while modern browsers are happy with CSS alone. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote: Thanks to those who responded on this. What I've done is to make a file which uses the javascript to determine the space available in the browser window, [...] You can see all this at: http://www.rhh.myzen.co.uk/gam/sandbox/ David Hucklesby suggested: Use JavaScript to change the element's top-margin style directly, perhaps? On Tue, 20 Mar 2007 18:56:06 +, Designer then asked: How exactly would you do that? (I'm interested, and I'm learning :-) ) Well, as you figured the amount of space needed to push the DIV down in order to center it, I was thinking of something like: contentDiv.style.marginTop = calculatedGap + 'px'; However, did you look at Georg's solution he sent Saturday? http://www.gunlaug.no/tos/alien/test_07_3810.html For IE, he uses JavaScript (or is it JScript?) in a Microsoft-only expression to position the DIV's top. It seems to solve your problem nicely, even in IE7, while modern browsers are happy with CSS alone. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
Thanks to those who responded on this. What I've done is to make a file
which uses the javascript to determine the space available in the
browser window, viz:
script type=text/javascript
var height = 0;
if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
height = window.innerHeight;
}
else if( document.documentElement (
document.documentElement.clientWidth ||
document.documentElement.clientHeight ) )
{
//IE 6+ in 'standards compliant mode'
height = document.documentElement.clientHeight;
}
else if( document.body ( document.body.clientWidth ||
document.body.clientHeight ) )
{
//IE 4 compatible
height = document.body.clientHeight;
}
if (height0)
{
window.location.href = index.php?height=+ height;
} else
exit();
/script
Of course, since the php is server-side, I then have to send the height
variable to the php via another page load (window.location.href).
This page then takes the height, knocks off the div height and divides
by 2 to get the correct margin-top, which it then writes to the inline
CSS in two sections:
?php
IF ($_GET['height']100)
{
$space=$_GET['height'];
$margin=($space-200)/2;
} ELSE
{
$margin=100;
}
?
?php
echodiv id=\viewport\ style=\margin : .$margin.px auto;\\n;
echo h1The top margin is set to .$margin.!/h1;
echo/div\n ;
?
I have also trapped it, so that anyone without javascript will get a
top-margin of 100px;
You can see all this at: http://www.rhh.myzen.co.uk/gam/sandbox/
It's a bit clumsy, and I don't like reloading a page, so I'm grateful
for any really good /suggestions / improvements!
Thanks.
http://www.rhh.myzen.co.uk/gam/sandbox/i
--
Bob
www.gwelanmor-internet.co.uk
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] centring and viewport size (OT?)
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote: Thanks to those who responded on this. What I've done is to make a file which uses the javascript to determine the space available in the browser window, viz: [...] (code snipped) Of course, since the php is server-side, I then have to send the height variable to the php via another page load (window.location.href). This page then takes the height, knocks off the div height and divides by 2 to get the correct margin-top, which it then writes to the inline CSS in two sections: [...] (more code) You can see all this at: http://www.rhh.myzen.co.uk/gam/sandbox/ It's a bit clumsy, and I don't like reloading a page, so I'm grateful for any really good /suggestions / improvements! Use JavaScript to change the element's top-margin style directly, perhaps? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote: Thanks to those who responded on this. What I've done is to make a file which uses the javascript to determine the space available in the browser window, viz: [...] (code snipped) Of course, since the php is server-side, I then have to send the height variable to the php via another page load (window.location.href). This page then takes the height, knocks off the div height and divides by 2 to get the correct margin-top, which it then writes to the inline CSS in two sections: [...] (more code) You can see all this at: http://www.rhh.myzen.co.uk/gam/sandbox/ It's a bit clumsy, and I don't like reloading a page, so I'm grateful for any really good /suggestions / improvements! Use JavaScript to change the element's top-margin style directly, perhaps? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] centring and viewport size (OT?)
I'm sorry if this is OT [but hey - it's weekend :-) ] but I'm pretty useless at javascript, DOM and all that and I've really struggled finding the info I need. Most of the methods (non-tables) for centering a div vertically (and horizontally) suffer from the same problem: they use the div height to attach a top margin and use percentages. The result is that, when the window size gets to be smaller than the div size, the top of the content can't be seen and it won't scroll. So, it seemed to me, it must be simple to 'get' the viewport size (javascript, DOM?), subtract the div height, then apply a top margin in CSS with php. I'd rather do it all in php to avoid folk without js, but that seems improbable) But I'm in a muddle! I feel sure someone has already done this, so I'm asking if anyone can point me somewhere for the info I need? I can't find it! Thanks. -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
Hi Bob How about adding an 'overflow: scroll' to the containing div, or failing that allocate it a 'min-height'? That might avoid having to use unnecessary javascript. Regards Lee On 17 Mar 2007, at 13:03, Designer wrote: I'm sorry if this is OT [but hey - it's weekend :-) ] but I'm pretty useless at javascript, DOM and all that and I've really struggled finding the info I need. Most of the methods (non-tables) for centering a div vertically (and horizontally) suffer from the same problem: they use the div height to attach a top margin and use percentages. The result is that, when the window size gets to be smaller than the div size, the top of the content can't be seen and it won't scroll. So, it seemed to me, it must be simple to 'get' the viewport size (javascript, DOM?), subtract the div height, then apply a top margin in CSS with php. I'd rather do it all in php to avoid folk without js, but that seems improbable) But I'm in a muddle! I feel sure someone has already done this, so I'm asking if anyone can point me somewhere for the info I need? I can't find it! Thanks. -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
On Sat, 17 Mar 2007 13:03:25 +, Designer wrote: [...] Most of the methods (non-tables) for centering a div vertically (and horizontally) suffer from the same problem: they use the div height to attach a top margin and use percentages. The result is that, when the window size gets to be smaller than the div size, the top of the content can't be seen and it won't scroll. So, it seemed to me, it must be simple to 'get' the viewport size (javascript, DOM?), subtract the div height, then apply a top margin in CSS with php. I'd rather do it all in php to avoid folk without js, but that seems improbable) There are several methods listed on CSS-Discuss[1] (scroll to the bottom). FWIW - Using display: table; and display: table-cell; works well for non-IE browsers[2]. But I never found a pure CSS way that works reliably for IE, so I (gasp) use a single-cell table. You could cheat, and add the table markup to IE with a script. With PHP you would have to sniff for IE, while JavaScript would be a bit more reliable in a way, since IE employs its own methods, avoiding confusion when a browser alters the user-agent string to pretend it is IE. A case for AJAX, perhaps? But - yes - you *do* need client-side scripting to detect the size of the viewport. -- [1] http://css-discuss.incutio.com/?page=CenteringBlockElement [2] http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
On Sat, 17 Mar 2007 13:03:25 +, Designer wrote: [...] Most of the methods (non-tables) for centering a div vertically (and horizontally) suffer from the same problem: they use the div height to attach a top margin and use percentages. The result is that, when the window size gets to be smaller than the div size, the top of the content can't be seen and it won't scroll. So, it seemed to me, it must be simple to 'get' the viewport size (javascript, DOM?), subtract the div height, then apply a top margin in CSS with php. I'd rather do it all in php to avoid folk without js, but that seems improbable) There are several methods listed on CSS-Discuss[1] (scroll to the bottom). FWIW - Using display: table; and display: table-cell; works well for non-IE browsers[2]. But I never found a pure CSS way that works reliably for IE, so I (gasp) use a single-cell table. You could cheat, and add the table markup to IE with a script. With PHP you would have to sniff for IE, while JavaScript would be a bit more reliable in a way, since IE employs its own methods, avoiding confusion when a browser alters the user-agent string to pretend it is IE. A case for AJAX, perhaps? But - yes - you *do* need client-side scripting to detect the size of the viewport. -- [1] http://css-discuss.incutio.com/?page=CenteringBlockElement [2] http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] centring and viewport size (OT?)
Designer wrote: Most of the methods (non-tables) for centering a div vertically (and horizontally) suffer from the same problem: they use the div height to attach a top margin and use percentages. The result is that, when the window size gets to be smaller than the div size, the top of the content can't be seen and it won't scroll. Not a problem... http://www.gunlaug.no/tos/alien/test_07_3810.html ...in decent browsers... So, it seemed to me, it must be simple to 'get' the viewport size (javascript, DOM?), subtract the div height, then apply a top margin in CSS with php. I'd rather do it all in php to avoid folk without js, but that seems improbable) ...but if you can find ways to make IE behave, then nothing would be better than that. Make sure you only target IE though :-) Some info... http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp http://www.howtocreate.co.uk/tutorials/javascript/browserwindow ...and good luck ;-) regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
