Re: [css-d] Relative and absolute positioning affect z-index in IE7
Gunlaug Sørtun wrote:
Tim Dawson wrote:
http://www.holidaymullandiona.co.uk/pages/accn/bb-sw-mullb.php Hover
over 'What to do', the stars show through the drop-down (the stars
are relatively positioned asterisks).
Is there a better way ?
Might help to restyle the star-span...
span.stars {
font-size: 200%;
line-height: .3;
vertical-align: -.35em;
}
...and thereby avoid the R:P that causes stacking-bug problems in IE.
Don't think applying R:P to the menu div will cause any problems either,
if you choose that route. That's often how this stacking-bug problems in
IE are solved.
Thank you, Georg, that's much more elegant in that instance than the
sledge-hammer solution with R:P. However, I may still have to go the R:P way
(as well as changing the span.stars), to avoid the problem on other pages with
an A:P image:
http://www.holidaymullandiona.co.uk/pages/home1.php (hover on Help, on right of
main menu). I have already applied R:P, so there's no longer a problem.
Regards,
Tim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative and absolute positioning affect z-index in IE7
Tim Dawson wrote:
Gunlaug Sørtun wrote:
Tim Dawson wrote:
http://www.holidaymullandiona.co.uk/pages/accn/bb-sw-mullb.php Hover
over 'What to do', the stars show through the drop-down (the stars
are relatively positioned asterisks).
Is there a better way ?
Might help to restyle the star-span...
span.stars {
font-size: 200%;
line-height: .3;
vertical-align: -.35em;
}
...and thereby avoid the R:P that causes stacking-bug problems in IE.
Don't think applying R:P to the menu div will cause any problems either,
if you choose that route. That's often how this stacking-bug problems in
IE are solved.
Thank you, Georg, that's much more elegant in that instance than the
sledge-hammer solution with R:P. However, I may still have to go the R:P way
(as well as changing the span.stars), to avoid the problem on other pages
with
an A:P image:
http://www.holidaymullandiona.co.uk/pages/home1.php (hover on Help, on right
of
main menu). I have already applied R:P, so there's no longer a problem.
Regards,
Tim
One solution is two use one image. Another solution is to apply a
z-index to the #nav div for IE7 .
div#nav {
z-index: 1; /* ADD, layers nav above other positioned elements */
position: relative;
float: left;
width: 770px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
margin: 0;
}
A third option is having the menu come last in the source, just a bit
more tricky though. :-)
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
http://www.wearechange.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] HT Conditional CSS
Luis Speciale wrote: Hi ; Looking for a way to make Opera behave in a certain manner, I googelised this http://conditional-css.com/ Did you know about that ? Cordially Luis With plenty of off line testing, you can make layouts that do not need to be hacked (excluding IE6 somewhat). The CSS bugs that are mostly faced are those with IE7 and their are plenty of ways to code to avoid such bugs. The bugs I observe in Opera (any version from 8.5) are those that can not be hacked around anyway. A good playground for learning CSS bugs is Bruno's tests. http://www.brunildo.org/test/ -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo http://www.wearechange.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative and absolute positioning affect z-index in IE7
Alan Gresley wrote:
Tim Dawson wrote:
Gunlaug Sørtun wrote:
Tim Dawson wrote:
http://www.holidaymullandiona.co.uk/pages/accn/bb-sw-mullb.php Hover
over 'What to do', the stars show through the drop-down (the stars are
relatively positioned asterisks). Is there a better way ?
Might help to restyle the star-span...
span.stars { font-size: 200%; line-height: .3; vertical-align: -.35em; }
...and thereby avoid the R:P that causes stacking-bug problems in IE.
Don't think applying R:P to the menu div will cause any problems either,
if you choose that route. That's often how this stacking-bug problems in
IE are solved.
Thank you, Georg, that's much more elegant in that instance than the
sledge-hammer solution with R:P. However, I may still have to go the R:P
way (as well as changing the span.stars), to avoid the problem on other
pages with an A:P image:
http://www.holidaymullandiona.co.uk/pages/home1.php (hover on Help, on
right of main menu). I have already applied R:P, so there's no longer a
problem.
Thank you, Alan.
One solution is to use one image.
Yes, but it's less flexible.
Another solution is to apply a
z-index to the #nav div for IE7.
div#nav {
z-index: 1; /* ADD, layers nav above other positioned elements */
position: relative;
float: left;
width: 770px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
margin: 0; }
I did try the z-index route, but it didn't seem to make any difference, and I
assumed that IE puts all positioned elements on top. You suggestion (above) has
both, and I think it's the P:R that's doing the trick ?
A third option is having the menu come last in the source, just a bit more
tricky though. :-)
If the menu came last, would it not have to be absolutely positioned anyway ?
Tim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative and absolute positioning affect z-index in IE7
Tim Dawson wrote: I did try the z-index route, but it didn't seem to make any difference, and I assumed that IE puts all positioned elements on top. You suggestion (above) has both, and I think it's the P:R that's doing the trick ? Note: z-index has no effect non non-positioned elements, so you have to declare R:P, A:P or F:P in order to stack anything out of source-order sequence. A 'z-index: (any value);' on its own, does exactly nothing. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
Mike Breiding wrote:
David Laakso wrote:
Mike Breiding - Morgantown WV wrote:
Hi David,
The only thing I see that looks a bit odd is the background color
extends to the border.
Peace, -Mike
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
I guess you mean the background-color of the bird container extends to
the right rail, rather than stopping at the right-side drop line of the
primary content?
Yes, 'zackly!
Replacing the current CSS with this should hold the background width to
75% (same width as the primary content):
Actually, I tried that our already.
The problem then is at 800x600 the blockquote paragraphs are only one
or two words wide making it look like a long list.
Thanks,
-Mike
Yes, I know, it is problematic at 800. Trying to cram 5 pounds of apples
in a 3 pound bag ain't easy...
The blockquote /may/ be a little bit wider at 800 if this is added:
#two blockquote p {
width: 100%; - add
}
Please see this file which has that change added:
http://www.chelseacreekstudio.com/ca/cssd/mike.htm
Other possibilities might include:
1/ reducing the width of the image thus giving the blockquote more width.
2/ and/or cheating and gaining more width for the quote text by deleting
the opening and closing blockquote and setting a narrow margin right and
left for #two p.
Short of these suggestions, I dunno. Perhaps someone else on the list
has a better alternative?
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote:
Replacing the current CSS with this should hold the background width
to 75% (same width as the primary content):
Actually, I tried that our already.
The problem then is at 800x600 the blockquote paragraphs are only one
or two words wide making it look like a long list.
Thanks,
-Mike
I think I will just stick with it as is - full width
Out of curiosity I commented out:
#three img {display: block; width: 225px; height: 454px;}
.both {clear: both;}
It seems to make no difference in FF, IE or Opera at various screen sizes.
Curious about what those rules were for.
Thanks for pluggin' away at this.
-Mike
Yes, I know, it is problematic at 800. Trying to cram 5 pounds of apples
in a 3 pound bag ain't easy...
The blockquote /may/ be a little bit wider at 800 if this is added:
#two blockquote p {
width: 100%; - add
}
Please see this file which has that change added:
http://www.chelseacreekstudio.com/ca/cssd/mike.htm
Other possibilities might include:
1/ reducing the width of the image thus giving the blockquote more width.
2/ and/or cheating and gaining more width for the quote text by deleting
the opening and closing blockquote and setting a narrow margin right and
left for #two p.
Short of these suggestions, I dunno. Perhaps someone else on the list
has a better alternative?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative and absolute positioning affect z-index in IE7
Tim Dawson wrote:
Alan Gresley wrote:
[...]
Another solution is to apply a
z-index to the #nav div for IE7.
div#nav {
z-index: 1; /* ADD, layers nav above other positioned elements */
position: relative;
float: left;
width: 770px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
margin: 0; }
I did try the z-index route, but it didn't seem to make any difference, and I
assumed that IE puts all positioned elements on top. You suggestion (above)
has
both, and I think it's the P:R that's doing the trick ?
As Georg has said both a z-index and R.P, A.P or F.P. is required for IE7 .
A third option is having the menu come last in the source, just a bit more
tricky though. :-)
If the menu came last, would it not have to be absolutely positioned anyway ?
Tim
That is mostly correct and the easiest approach though strange things
can achieved with CSS. It depends on where in the source you want the menu.
BTW, the menu breaks in FF2 , IE7 or Safari upon text resizing. Just
way to many links in the menu to avoid it.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
http://www.wearechange.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
Mike Breiding wrote:
David Laakso wrote:
Replacing the current CSS with this should hold the background
width to 75% (same width as the primary content):
Actually, I tried that our already.
The problem then is at 800x600 the blockquote paragraphs are only
one or two words wide making it look like a long list.
Thanks,
-Mike
I think I will just stick with it as is - full width
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
Whatever does it for you. Incidentally, I assume it is working for you
local, as the above uri is not clearing the floats in IE/6.
Refer back to http://www.chelseacreekstudio.com/ca/cssd/mike.htm if
clarification is needed.
Out of curiosity I commented out:
#three img {display: block; width: 225px; height: 454px;}
.both {clear: both;}
It seems to make no difference in FF, IE or Opera at various screen
sizes.
Curious about what those rules were for.
-Mike
I guess you might call it calling out the calvary to make the image
happen (appear) in IE/6. If turns out those styles are no longer
necessary, by all means delete them...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
Whatever does it for you. Incidentally, I assume it is working for you
local, as the above uri is not clearing the floats in IE/6.
Refer back to http://www.chelseacreekstudio.com/ca/cssd/mike.htm if
clarification is needed.
Out of curiosity I commented out:
#three img {display: block; width: 225px; height: 454px;}
.both {clear: both;}
-Mike
Oh, my. But wait. You may want to put
.both {clear: both;}
back in?
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Border declaration syntax
Kim Brooks Wei wrote:
When I use a compound border declaration
a:hover { border-bottom: 1px dotted #6681aa;
}
can I leave off the color value, or must I include it?
By the syntax, it can be omitted, but this still means setting
border-bottom-color to a specific value, namely the value of the color
property for the element. Ref.:
http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties
If you do not want to set it (but let the property have the value that is
set elsewhere, e.g. in your stylesheet when it sets border colors for links
in general), don't use the border-bottom shorthand. You can set
border-bottom-width and border-bottom-style separately.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote:
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
Whatever does it for you. Incidentally, I assume it is working for you
local, as the above uri is not clearing the floats in IE/6.
Refer back to http://www.chelseacreekstudio.com/ca/cssd/mike.htm if
clarification is needed.
Out of curiosity I commented out:
#three img {display: block; width: 225px; height: 454px;}
.both {clear: both;}
-Mike
Oh, my. But wait. You may want to put
.both {clear: both;}
back in?
-Done.
-Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
Mike Breiding wrote:
David Laakso wrote:
Whatever does it for you. Incidentally, I assume it is working for you
local, as the above uri is not clearing the floats in IE/6.
Refer back to http://www.chelseacreekstudio.com/ca/cssd/mike.htm if
clarification is needed.
Out of curiosity I commented out:
#three img {display: block; width: 225px; height: 454px;}
.both {clear: both;}
-Mike
Oh, my. But wait. You may want to put
.both {clear: both;}
back in?
-Done.
-Mike
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
This is fun, Mike. Now what we'll do to keep the bird cage from being
taller in IE/6 than the silly bird inside it? Or do we care?
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float and blockquote
David Laakso wrote:
Oh, my. But wait. You may want to put
.both {clear: both;}
back in?
-Done.
-Mike
re:
http://epicroadtrips.us/dad/journals/travel/usa/central_states_north_trip_june_2-15_1977/index.php
This is fun, Mike. Now what we'll do to keep the bird cage from being
taller in IE/6 than the silly bird inside it? Or do we care?
Hmmm... looks OK on my end!
-Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
