[css-d] Weird Firefox/mozilla refreshing and jumping issue

[Vicki Stebbins]

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/

Re: [css-d] Main text drops

[Mauricio Samy Silva]

Hi John,
The 600px width for #subPage #innerRight  is greater than the available 
space for tha main column and this causes the 'drop' in IE and the right 
'overflow' in FFox.
Set 530px for that width and you get the effect you are expecting, both in 
FFox and IE.

Please have a closest look and check the width sum:  left + margins + right 
= 760px.

Regards
Mauricio Samy Silva



At: http://mypracticesite.com all the sub pages have the text area dropped
below the sidebar in IE 6&7. I have tried floats, vertical-aligns ( which IE
doesn¹t support) and more... And can¹t get anything to work. Can some one
help? Thank you.

The main text drops below the sidebar in IE 6 & 7.

Thanks in advance.

John Shepard
__
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-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] Main text drops

[John M Shepard]

At: http://mypracticesite.com all the sub pages have the text area dropped
below the sidebar in IE 6&7. I have tried floats, vertical-aligns ( which IE
doesn¹t support) and more... And can¹t get anything to work. Can some one
help? Thank you.

The main text drops below the sidebar in IE 6 & 7.

Thanks in advance.

John Shepard
__
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] IE Navigation problem

[Vicki Stebbins]

At 05:26 PM 7/04/2007, Bruno Fassino wrote:
>Vicki Stebbins wrote:
>
>[...]
> > All seemed to work fine until IE6.0.
> >
> > On mouseover the main image disappears and the hover image
> > takes yonks to appear if at all. I'm on a modem and figured
> > it could be a preload/cache thing.
>[...]
> > The page is at http://www.seco.com.au/index.php (validates)
> > CSS at http://www.seco.com.au/styles/navigation.css (opacity doesn't
> > validate, but will work that out later if needed)
> >
>
>IE6 has the tendence to reload/recheck with the server  the background
>images on anchors, even if they have already been loaded/preloaded. The
>problem is especially visible if IE6 cache settings are: "check for newer
>versions of stored pages | every visit to the page", that fortunately is not
>the default.
>There are some techniques to avoid, or at least reduce the problem. The most
>effective ones require changing some settings on the web server. Here are
>some relevant links [1], [2], [3] (there are sure many others...)
>
>Hth,
>Bruno
>
>
>[1] http://www.mister-pixel.com/
>[2] http://brunildo.org/test/IEAbackima.html
>[3] http://www.fivesevensix.com/studies/ie6flicker

HI Bruno,

Thanks, I had IE set to check for newer versions... gee whiz sometimes with 
all the settings of the different browsers you can just come unstuck.

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/

Re: [css-d] IE Navigation problem

[Vicki Stebbins]

At 05:25 PM 7/04/2007, Gunlaug Sørtun wrote:
>Vicki Stebbins wrote:
>
>>After my Safari woes I changed the top level  to image mouseovers
>>to ensure they stay within the boundaries...
>
>>All seemed to work fine until IE6.0.
>
>>http://www.seco.com.au/index.php
>
>A better image-swap method...
>
>...when modified to go directly on those anchors.
>
>
>Still a weak spot in IE/win...
>
>...caused by the fact that you're using text - non-breaking spaces - in
>those anchors.
>
>Of course, those non-breaking spaces create much worse access problems...
>
>...in case that's an issue.
>
>
>To solve both those last problems, the following CSS
>corrections/additions will get the basics in place...
>
>#nav .level1 li a, #nav .level1 li a:hover {
>width: 9000px;
>margin-left: -8850px;
>background-position: 100% 0 /* correct this when sprites are added */;
>overflow: hidden;
>}
>#nav .level2 li a {
>width: 150px;
>overflow: visible;
>margin-left: 0;
>}
>
>...and the HTML should be written more like this...
>
>
>
>Why Travel with us
>
>
>
>
>Outback Experience
>
>
>
>
> etc.
>
>
>regards
> Georg
>--
>http://www.gunlaug.no
Hi Georg,

Thank you so much for this, I need to sit down and quietly go through it 
and work out just what I'm doing.

Kind 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/

Re: [css-d] stylizing an OPTION element

[Christian Johansen]

I have found when floating selects, it's better to set width on the option
element than the select element. If you float a select and sets its width in
Firefox, skipping to a part of the list by pressing a letter doesn't work
like it should. With width on the option instead, this problem goes away.

On 4/7/07, Jukka K. Korpela <[EMAIL PROTECTED]> wrote:
>
> On Sat, 7 Apr 2007, Mauricio Samy Silva wrote:
>
> > It's well know that some styles applied to an OPTION element inside a
> > SELECT in most cases is honored by Firefox but doesn't by IE.
>
> Yes, and this varies by browser version as well.
>
> > For example:  if we set width:120px for the select and width:200px for
> > the OPTION, IE ignore the 200px and goes with 120px for the OPTION.
>
> Since the option elements are inside a select element, what should really
> happen? By CSS specifications, the contents of select overflows, and
> overflow is visible by default; the select box width should not change. We
> can speculate about possible browser style sheet that make the observed
> behavior nominally acceptable, but the bottom line is that you cannot
> expect anything consistent here.
>
> > Are there a workaround in order to force IE behaves like FFox?
>
> Hardly. But if you want 120px width for a select menu, why don't you set
> that width, instead of trying to override the select width in inner
> elements (which really _shouldn't_ work, by CSS specs).
>
> --
> Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
>
> __
> 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/
>



-- 
MVH
Christian
__
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] stylizing an OPTION element

[Jukka K. Korpela]

On Sat, 7 Apr 2007, Mauricio Samy Silva wrote:

> It's well know that some styles applied to an OPTION element inside a 
> SELECT in most cases is honored by Firefox but doesn't by IE.

Yes, and this varies by browser version as well.

> For example:  if we set width:120px for the select and width:200px for 
> the OPTION, IE ignore the 200px and goes with 120px for the OPTION.

Since the option elements are inside a select element, what should really 
happen? By CSS specifications, the contents of select overflows, and 
overflow is visible by default; the select box width should not change. We 
can speculate about possible browser style sheet that make the observed 
behavior nominally acceptable, but the bottom line is that you cannot 
expect anything consistent here.

> Are there a workaround in order to force IE behaves like FFox?

Hardly. But if you want 120px width for a select menu, why don't you set 
that width, instead of trying to override the select width in inner 
elements (which really _shouldn't_ work, by CSS specs).

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
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] stylizing an OPTION element

[Mauricio Samy Silva]

Hi all,
It's well know that some styles applied to an OPTION element inside a SELECT in 
most cases is honored by Firefox but doesn't by IE.
For example:  if we set width:120px for the select and width:200px for the 
OPTION, IE ignore the 200px and goes with 120px for the OPTION.
Are there a workaround in order to force IE behaves like FFox?
Thanks
Mauricio
 
__
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] css in HTML email

[David Dorward]

On 06/04/07, Ross Hulford <[EMAIL PROTECTED]> wrote:
> Quick question...

Its a FAQ: http://css-discuss.incutio.com/?page=StyleInEmail

-- 
David Dorward 
__
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] IE Navigation problem

[Gunlaug Sørtun]

Vicki Stebbins wrote:

> After my Safari woes I changed the top level  to image mouseovers
> to ensure they stay within the boundaries...

> All seemed to work fine until IE6.0.

> http://www.seco.com.au/index.php

A better image-swap method...

...when modified to go directly on those anchors.


Still a weak spot in IE/win...

...caused by the fact that you're using text - non-breaking spaces - in
those anchors.

Of course, those non-breaking spaces create much worse access problems...

...in case that's an issue.


To solve both those last problems, the following CSS
corrections/additions will get the basics in place...

#nav .level1 li a, #nav .level1 li a:hover {
width: 9000px;
margin-left: -8850px;
background-position: 100% 0 /* correct this when sprites are added */;
overflow: hidden;
}
#nav .level2 li a {
width: 150px;
overflow: visible;
margin-left: 0;
}

...and the HTML should be written more like this...



Why Travel with us




Outback Experience




 etc.


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] IE Navigation problem

[Bruno Fassino]

Vicki Stebbins wrote:

[...]
> All seemed to work fine until IE6.0.
>
> On mouseover the main image disappears and the hover image
> takes yonks to appear if at all. I'm on a modem and figured
> it could be a preload/cache thing.
[...]
> The page is at http://www.seco.com.au/index.php (validates)
> CSS at http://www.seco.com.au/styles/navigation.css (opacity doesn't
> validate, but will work that out later if needed)
>

IE6 has the tendence to reload/recheck with the server  the background
images on anchors, even if they have already been loaded/preloaded. The
problem is especially visible if IE6 cache settings are: "check for newer
versions of stored pages | every visit to the page", that fortunately is not
the default.
There are some techniques to avoid, or at least reduce the problem. The most
effective ones require changing some settings on the web server. Here are
some relevant links [1], [2], [3] (there are sure many others...)

Hth,
Bruno


[1] http://www.mister-pixel.com/
[2] http://brunildo.org/test/IEAbackima.html
[3] http://www.fivesevensix.com/studies/ie6flicker

__
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] Lots of left-floating divs

[Bruno Fassino]

Alexander Munro wrote:

[...]
> Now, the total width of the left-floating descendants of #menu_0 is
> greater than the width of #menu (that is 586px), so not all the
> descendants fit within those 586px.
>
> In Firefox, Konqueror, Opera and IE the descendants that don't fit in
> 586px are wrapped and placed in another line.
>
> What I need is all the descendants to be placed in one line and when
> there are descendants that don't fit in the available 586px, I want
> them to be in the same, one line anyway, just not visible.
>
> I have made a simple workaround - added "width: 1px;" to the .menu
> class. Unfortunatelly that did the trick only for Firefox, Konqueror
> and Opera. In IE all the descendants are placed in one line as well
> but instead of hiding the descendats that don't fit in 586px IE shows
> them all, those that do not fit in 586px are displayed outside #menu
> and #container, extending width of the page (a horizontal scrollbar
> appears).

> I hope I have explained my problem clearly. If you have additional
> questions, I'll be happy to provide more information, just please help
> me solve this issue.

In the posted markup you have no element with id=menu while you used #menu
in the css, I guess id=left should be id=menu?

Anyway, I think you are seeing the IE6 problem where relatively positioned
elements (yours .menu classed divs, where you added width:1px) are not
cropped by parents with overflow:hidden. If so, try adding position:relative
to the parent.

Hth,
Bruno

__
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/