Re: [WSG] Page shift in IE6
Hi Georg,
Yep, that did it. It looks like it was the % padding causing the problem.
Huge thanks for the time and effort you spent helping me out on this one!
Cheers
John
On Thu, 22 Nov 2007 15:56:44 +1000, Gunlaug Sørtun [EMAIL PROTECTED]
wrote:
John Faulds wrote:
I appreciate all your efforst so far Georg, but could I impose a little
bit more and ask you to put a version of the page you've made online so
I can compare because I'm still getting a noticeable shift at my end?
Sure...
http://www.gunlaug.no/tos/alien/jf-1/test_07_1121.html
IE/win styles in the page head.
The last pixel-shift is due to the...
#wrap {
padding: 0 2%;
}
IE6 calculates that percentage-padding wrong on first load and shift
#wrap 1px to one side and #content 1px to the other.
Once a link-hovering inside that construction causes IE6 to recalculate
and re-render, the mistake is corrected - causing the visible shift.
My solution is to give IE6 something it can not miscalculate - pixels...
* html #wrap {
padding: 0 20px;
}
regards
Georg
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Page shift in IE6
John Faulds wrote:
I had that there because the top link in the sidebar seems to get
partially obscured by the transparent PNG of the ball. I'm sure it
was working at some point, but doesn't seem to be now. :/
You can keep the...
#sidebar {
position: relative;
z-index: 200;
}
..._if_ it solves the obscuring-problem. It doesn't at my end.
However, then you must also stabilize #sidebar's relation to #content,
and fix a few IE/win bugs while you're at it, by adding...
* html body #content {
overflow: visible;
zoom:1;
position: relative;
}
I won't start listing all potential IE/win bugs involved, but they are
the reason I never go anywhere near any of the latest holy grail
solutions.
I've tried moving the font-size to the wrapper and using the revised
expression for px/em-based min/max-width from your example but it
doesn't stop the page shift and also the max-width doesn't get
applied either.
The pixel-based min/max version is a much easier solution then, but
yours needs adjustments. The 4% missing with a fluid state of 96% width,
is not identical to the 18px you have between attack and max-width
values, and same goes for the 'min-width' part. It is percentage of the
body-width you're dealing with, and that naturally varies with window-width.
Calculate new values or tune them by testing, until there's no jumping
at either end and no appearing horizontal scrollbar when in the fluid
state. Will work well enough for most, I think.
I see maybe a 1px horizontal jump when hovering any link now - in my
corrected copy and your present page, and that's hardly enough to hunt
and kill IE/win bugs for.
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] Page shift in IE6
The pixel-based min/max version is a much easier solution then, but yours needs adjustments. The 4% missing with a fluid state of 96% width, is not identical to the 18px you have between attack and max-width values, and same goes for the 'min-width' part. It is percentage of the body-width you're dealing with, and that naturally varies with window-width. I'm sorry, I don't understand what you mean by 'attack'. Calculate new values or tune them by testing, until there's no jumping at either end and no appearing horizontal scrollbar when in the fluid state. Will work well enough for most, I think. I see maybe a 1px horizontal jump when hovering any link now - in my corrected copy and your present page, and that's hardly enough to hunt and kill IE/win bugs for. Could you show me what you've got in your corrected copy because I'm unsure which values I'm supposed to be tuning? Cheers John -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Page shift in IE6
I appreciate all your efforst so far Georg, but could I impose a little
bit more and ask you to put a version of the page you've made online so I
can compare because I'm still getting a noticeable shift at my end?
On Thu, 22 Nov 2007 11:33:06 +1000, Gunlaug Sørtun [EMAIL PROTECTED]
wrote:
John Faulds wrote:
Could you show me what you've got in your corrected copy because I'm
unsure which values I'm supposed to be tuning?
Ok, here's a smooth-working version...
* html #wrap {
width: 95%;
width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth
: document.body.clientWidth) 1200 ?
1140px : (((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth
: document.body.clientWidth) 860 ? 820px
: 95%));
}
...ready for copy and paste into the IE.css, if all other parameters
in your page are as before.
In the above ' 1200' is the attack, the value used in the greater
than argument for when the 1140px - the max-width - should be used
as 'width'.
Likewise, the ' 860' is the attack, the value used in the smaller
than argument for when the 820px - the min-width - should be used
as 'width'.
In between those two attack points is the fluid state where the
'width' = 95%, which is the value I chose to avoid a flickering
horizontal scrollbar in that particular layout.
So, as you can see: there are 5 values that must fit the specific
layout. One can either calculate them, or one can simply test and adjust
- tune - until it all works smoothly and looks right - like I just did
on a copy of your page.
regards
Georg
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Page shift in IE6
John Faulds wrote:
I appreciate all your efforst so far Georg, but could I impose a little
bit more and ask you to put a version of the page you've made online so
I can compare because I'm still getting a noticeable shift at my end?
Sure...
http://www.gunlaug.no/tos/alien/jf-1/test_07_1121.html
IE/win styles in the page head.
The last pixel-shift is due to the...
#wrap {
padding: 0 2%;
}
IE6 calculates that percentage-padding wrong on first load and shift
#wrap 1px to one side and #content 1px to the other.
Once a link-hovering inside that construction causes IE6 to recalculate
and re-render, the mistake is corrected - causing the visible shift.
My solution is to give IE6 something it can not miscalculate - pixels...
* html #wrap {
padding: 0 20px;
}
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Page shift in IE6
Hi I've got a page shift happening when you hover over certain elements in the right column on this page: http://www.gbjt.org.au/competitions/enrolment/ It happens when you hover over the links in the top box and over any of the form inputs, but not on the links in the two smaller boxes. I know that these sorts of shifts are usually due to hasLayout issues, and I've been adding height and zoom to various elements but I can't seem to find how to solve it. :/ It's also related to the max-width expression I'm using on the wrapper because if I take it out it disappears. Can anyone see what I'm missing? Cheers John -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Page shift in IE6
John Faulds wrote: I've got a page shift happening when you hover over certain elements in the right column on this page: http://www.gbjt.org.au/competitions/enrolment/ Can you provide a link directly to your IE stylesheet? It's a bit difficult to track down from the outside. Looks like you're using auto as fall-back in your expression. That'll trigger 'Layout' on and off, with the quite normal result that it messes with some of your positioning. Can't suggest proper fix without seeing all your IE styles. However, adding 'hasLayout' triggers all over the place rarely fixes anything since we're dealing with a bug that has as many negative sides as it has positive. 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] Page shift in IE6
Hi Georg, It's at: http://www.gbjt.org.au/css/IE.css On Wed, 21 Nov 2007 12:08:11 +1000, Gunlaug Sørtun [EMAIL PROTECTED] wrote: John Faulds wrote: I've got a page shift happening when you hover over certain elements in the right column on this page: http://www.gbjt.org.au/competitions/enrolment/ Can you provide a link directly to your IE stylesheet? It's a bit difficult to track down from the outside. Looks like you're using auto as fall-back in your expression. That'll trigger 'Layout' on and off, with the quite normal result that it messes with some of your positioning. Can't suggest proper fix without seeing all your IE styles. However, adding 'hasLayout' triggers all over the place rarely fixes anything since we're dealing with a bug that has as many negative sides as it has positive. regards Georg -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Page shift in IE6
Dont know if this will help or not BUT I had some similar problems previously and wrote about some of the solutions http://germworks.net/blog/2007/08/28/how-to-fix-content-jumping-in-ie/ On Nov 21, 2007 9:31 AM, John Faulds [EMAIL PROTECTED] wrote: Hi I've got a page shift happening when you hover over certain elements in the right column on this page: http://www.gbjt.org.au/competitions/enrolment/ It happens when you hover over the links in the top box and over any of the form inputs, but not on the links in the two smaller boxes. I know that these sorts of shifts are usually due to hasLayout issues, and I've been adding height and zoom to various elements but I can't seem to find how to solve it. :/ It's also related to the max-width expression I'm using on the wrapper because if I take it out it disappears. Can anyone see what I'm missing? Cheers John -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- JP2 Designs http://www.jp2designs.com http://www.germworks.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Page shift in IE6
John Faulds wrote:
http://www.gbjt.org.au/competitions/enrolment/
http://www.gbjt.org.au/css/IE.css
1: the large shifting is easiest solved by deleting all R:P styles on
sidebar...
#sidebar {
position: relative; -- delete
z-index: 200; -- delete
}
...which leaves a very small shift that I'll track down later.
2: the IE-expression isn't used right on that page, since '80em' doesn't
correspond to _one_ specific pixel-width. In IE/win it corresponds to 5
different pixel-widths - one for each font-resizing step, which means
your expression have to ask IE6 which font-resizing step it's on.
No use doing that with an expression when font-size is declared on body.
The solution is to move _your_ font-size onto #wrap, and ask IE6 what
each user has chosen. IE6 has the answer styled in points on its
body-element - as long as you don't overwrite it.
A couple of working solutions can be found here...
http://www.gunlaug.no/contents/wd_additions_14.html
...almost half way down the page under the headline:
px/em-based min/max-width expression...
The main column in that page has max-width in 'em', so you can see how
that works in IE6. I've just complicated it a bit by reducing the effect
of small font-resize settings in all versions of IE/win.
I'll see if I can find the last couple of pixels shift in your layout
... once I have had some sleep :-)
For now I'll just mention that IE/win doesn't handle negative backside
margins on right-floats very well - unlike on left-floats. Don't know if
that matters in your case though.
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] Page shift in IE6
1: the large shifting is easiest solved by deleting all R:P styles on
sidebar...
#sidebar {
position: relative; -- delete
z-index: 200; -- delete
}
I had that there because the top link in the sidebar seems to get
partially obscured by the transparent PNG of the ball. I'm sure it was
working at some point, but doesn't seem to be now. :/
I've tried moving the font-size to the wrapper and using the revised
expression for px/em-based min/max-width from your example but it doesn't
stop the page shift and also the max-width doesn't get applied either.
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
