[css-d] Weird Firefox/mozilla refreshing and jumping issue
Hi Everyone, A fellow who joined the list but hasn't heard back asked if I'd send this on... the page validates if using the address http://bellsouthpwp2.net/m/_/m_rafi/ to validate it. His email is below: == >Hello - > >I'm running into a strange Firefox bug which I can't figure out, and >hoped a CSS guru out there could tell me what's wrong. > >Here are screencaps of the problem. This is running on FF 1.5-2.0 Windows: >http://www.geocities.com/craiggivens01/screen.jpg >http://www.geocities.com/craiggivens01/screen2.jpg > >And here is the XHTML: >http://home.bellsouth.net/p/PWP-dzine > >You can click on "Hide Menubar" to remove the ISP's top bar (extra source >code). > >Click on the left orange blocks which say "Click This Title" to see >the same effect >on the subsequent page. > >That left column div (called "leftColumn-home" and "leftColumn" in the >css) sometimes renders way down below the fold when Firefox loads the >page -- leaving all that white space gap in between. When I hit >refresh on the browser, it sometimes gets cleared up and jumps back up >into place. Other times it reverts back down. This doesn't happen in >IE -- only Firefox and Mozilla. > >I figured this has something to do with the way the float is set for >that div, but who knows what it could be given the crazy markup order >of the page (which was necessary to preserve the design and >acessibility). > >It usually happens on a first load of the page. If not, Hit the back >button and try clicking on the orange blocks once more to get the page >to re-load. > >Any advice you can offer on fixing this or any other helpful tips in >tightening the CSS is much APPRECIATED! > >- Craig == Regards Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Weird Firefox/mozilla refreshing and jumping issue
Hello - I'm running into a strange Firefox bug which I can't figure out, and hoped a CSS guru out there could tell me what's wrong. Here are screencaps of the problem. This is running on FF 1.5-2.0 Windows: http://www.geocities.com/craiggivens01/screen.jpg http://www.geocities.com/craiggivens01/screen2.jpg That left column div (called "leftColumn-home" and "leftColumn" in the css) sometimes renders way down below the fold when Firefox loads the page -- leaving all that white space gap in between. When I hit refresh on the browser, it sometimes gets cleared up and jumps back up into place. Other times it reverts back down. This doesn't happen in IE -- only Firefox and Mozilla. I figured this has something to do with the way the float is set for that div, but who knows what it could be given the crazy markup order of the page (which was necessary to preserve the design). Here are my 2 template pages below. From the index page, click on the left orange blocks which say "Click this Title" to see the same effect on the subsequent page. http://www.geocities.com/craiggivens01/index.html http://www.geocities.com/craiggivens01/page2.html It usually happens on a first load of the page. If not, Hit the back button from page2.html and try clicking on the link once more to get the page to re-load. Any advice you can offer on fixing this or any other helpful tips in tightening the CSS is much APPRECIATED! - Craig __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird Firefox/mozilla refreshing and jumping issue
Craig Givens wrote: > ... > > Here are screencaps of the problem. This is running on FF 1.5-2.0 Windows: > http://www.geocities.com/craiggivens01/screen.jpg > http://www.geocities.com/craiggivens01/screen2.jpg > > That left column div (called "leftColumn-home" and "leftColumn" in the > css) sometimes renders way down below the fold when Firefox loads the > page -- leaving all that white space gap in between. When I hit > refresh on the browser, it sometimes gets cleared up and jumps back up > into place. Other times it reverts back down. This doesn't happen in > IE -- only Firefox and Mozilla. > > I figured this has something to do with the way the float is set for > that div, but who knows what it could be given the crazy markup order > of the page (which was necessary to preserve the design). > > Here are my 2 template pages below. From the index page, click on the > left orange blocks which say "Click this Title" to see the same effect > on the subsequent page. > > http://www.geocities.com/craiggivens01/index.html > http://www.geocities.com/craiggivens01/page2.html > > It usually happens on a first load of the page. If not, Hit the back > button from page2.html and try clicking on the link once more to get > the page to re-load. ... You are declaring display:table on #contents. div#contents contains #topicheader, #rightColumn, #leftColumn. We've seen similar issues related to display:table in Fx [1]. An element coming too late, depending on the connection, will land in a next generated anonymous table-row. The reason you are using display:table is most probably because of the containment of floats in this new block formatting context. I'd try another float containing method. Please report back if it fixes the problem. Ingo [1] http://archivist.incutio.com/viewlist/css-discuss/82716 -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird Firefox/mozilla refreshing and jumping issue
Hi Ingo - Thanks for responding. display:table is the only method that works. Using anything else for #contents will cause the #rightColumn to appear underneath the #contents div or render otherwise incorrectly That #rightColumn is tricky -- it needs to stay within #contents but with a negative margin so that it overlaps and floats on top to the right. We wanted #rightColumn placed where it is in the markup for the screen reading order (Accessibility/) as well as keeping with the vision from the designer. I've been racking my brain for weeks trying to figure this one out, but no luck so far. If you have any other advice or hacks/tricks -- I'm all ears. - Craig On 4/9/07, Ingo Chao <[EMAIL PROTECTED]> wrote: > Craig Givens wrote: > > ... > > > > Here are screencaps of the problem. This is running on FF 1.5-2.0 Windows: > > http://www.geocities.com/craiggivens01/screen.jpg > > http://www.geocities.com/craiggivens01/screen2.jpg > > > > That left column div (called "leftColumn-home" and "leftColumn" in the > > css) sometimes renders way down below the fold when Firefox loads the > > page -- leaving all that white space gap in between. When I hit > > refresh on the browser, it sometimes gets cleared up and jumps back up > > into place. Other times it reverts back down. This doesn't happen in > > IE -- only Firefox and Mozilla. > > > > I figured this has something to do with the way the float is set for > > that div, but who knows what it could be given the crazy markup order > > of the page (which was necessary to preserve the design). > > > > Here are my 2 template pages below. From the index page, click on the > > left orange blocks which say "Click this Title" to see the same effect > > on the subsequent page. > > > > http://www.geocities.com/craiggivens01/index.html > > http://www.geocities.com/craiggivens01/page2.html > > > > It usually happens on a first load of the page. If not, Hit the back > > button from page2.html and try clicking on the link once more to get > > the page to re-load. ... > > > You are declaring display:table on #contents. > > div#contents contains #topicheader, #rightColumn, #leftColumn. > > We've seen similar issues related to display:table in Fx [1]. An element > coming too late, depending on the connection, will land in a next > generated anonymous table-row. > > The reason you are using display:table is most probably because of the > containment of floats in this new block formatting context. > > I'd try another float containing method. Please report back if it fixes > the problem. > > Ingo > > [1] http://archivist.incutio.com/viewlist/css-discuss/82716 > > > -- > http://www.satzansatz.de/css.html > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird Firefox/mozilla refreshing and jumping issue
To keep this thread updated with the results of some off-list
correspondence...
Craig Givens wrote:
> display:table is the only method that works. Using anything else for
> #contents will cause the #rightColumn to appear underneath the
> #contents div or render otherwise incorrectly
Not so.
It's the mix of absolute positioned and floating elements inside
#contents that is causing most problems now.
No absolute positioning should be used there, and the "floats will
contain floats" behavior will solve the rest.
Replace the styles you have - *all of them* - for the two elements in
question, with the following...
#contents {
background:#fff;
float: left;
width: 100%;
}
#leftColumn-home {
margin-left: 5px;
float:left;
display: inline /* fix IE6 bug */
}
...and the containment and alignment problems will be solved across
browser-land.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird Firefox/mozilla refreshing and jumping issue
This is great!.
Thanks for the quick response. I will let you know how it tests out.
On 4/10/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> To keep this thread updated with the results of some off-list
> correspondence...
>
> Craig Givens wrote:
>
> > display:table is the only method that works. Using anything else for
> > #contents will cause the #rightColumn to appear underneath the
> > #contents div or render otherwise incorrectly
>
> Not so.
>
> It's the mix of absolute positioned and floating elements inside
> #contents that is causing most problems now.
> No absolute positioning should be used there, and the "floats will
> contain floats" behavior will solve the rest.
>
> Replace the styles you have - *all of them* - for the two elements in
> question, with the following...
>
> #contents {
> background:#fff;
> float: left;
> width: 100%;
> }
>
> #leftColumn-home {
> margin-left: 5px;
> float:left;
> display: inline /* fix IE6 bug */
> }
>
> ...and the containment and alignment problems will be solved across
> browser-land.
>
> regards
> Georg
> --
> http://www.gunlaug.no
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird Firefox/mozilla refreshing and jumping issue
Gunlaug - you're the greatest, man! This worked out beautifully.
Just sending out a massive THANK YOU to you and everyone else who
helped me along the way. You're a life saver!
On 4/10/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> To keep this thread updated with the results of some off-list
> correspondence...
>
> Craig Givens wrote:
>
> > display:table is the only method that works. Using anything else for
> > #contents will cause the #rightColumn to appear underneath the
> > #contents div or render otherwise incorrectly
>
> Not so.
>
> It's the mix of absolute positioned and floating elements inside
> #contents that is causing most problems now.
> No absolute positioning should be used there, and the "floats will
> contain floats" behavior will solve the rest.
>
> Replace the styles you have - *all of them* - for the two elements in
> question, with the following...
>
> #contents {
> background:#fff;
> float: left;
> width: 100%;
> }
>
> #leftColumn-home {
> margin-left: 5px;
> float:left;
> display: inline /* fix IE6 bug */
> }
>
> ...and the containment and alignment problems will be solved across
> browser-land.
>
> regards
> Georg
> --
> http://www.gunlaug.no
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
