[css-d] Background color for 3 column layout
Hi all, I have a three-column layout, all three of which have a white background. The page background is black and I need the div containing the three columns to expand with its white background down the page. I need the longest of the three columns (2 or 3) to determine how high the containing div is. I also have footer that clears the three columns fine. How can I do this? Thanks! -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com portfolio: http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ css-discuss [css-d@lists.css-discuss.org] 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] Background color for 3 column layout
I have a three-column layout, all three of which have a white background. The page background is black and I need the div containing the three columns to expand with its white background down the page. I need the longest of the three columns (2 or 3) to determine how high the containing div is. I also have footer that clears the three columns fine. How can I do this? Thanks! By using the technique discussed here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks Good luck. __ css-discuss [css-d@lists.css-discuss.org] 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] Background color for 3 column layout
On Thu, Mar 8, 2012 at 11:57 AM, J.C. Berry jcharlesbe...@gmail.com wrote: I need the longest of the three columns (2 or 3) to determine how high the containing div is. J.C. Berry, M.A. --- There are a number of ways to do that. One is a CSS Table [looks like a table but its not]. Please see: http://ccstudi.com/gs.html Best, ~d -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] 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/
[css-d] background color changes with comment on blog
I can't track this down! My blog is here: http://evamoon.net/blog/ It's fine except that when someone leaves a comment on a post, the background of the whole post area goes white. I can't figure out where this is coming from! Here's an example: http://evamoon.net/blog/2011/09/04/clamhenge/ Thank you! Eva __ css-discuss [css-d@lists.css-discuss.org] 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] background color changes with comment on blog
I tracked it down to a plug in. Thanks anyway! Eva On Dec 8, 2011, at 12:23 PM, Eva Moon wrote: I can't track this down! My blog is here: http://evamoon.net/blog/ It's fine except that when someone leaves a comment on a post, the background of the whole post area goes white. I can't figure out where this is coming from! Here's an example: http://evamoon.net/blog/2011/09/04/clamhenge/ Thank you! Eva __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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/
[css-d] Background color won't over-ride
CSS-d,
I am trying to use Firefox's userContent.css to over ride some CSS on a
particular page.
Here is the original CSS:
input.superbigbutton {
background-color: pink;
height: 14em !important;
width: 100% !important;
}
Here is what I want to over write it with:
input.superbigbutton {
color: green;
border: green 1px solid;
background-color: #63D46D !important;
height: 2em !important;
width: 33% !important;
}
Here's the problem: everything works *except* background-color, and border.
For the background color, instead of turning a light shade of green, it
turns off the background color completely. In other words, the original
pink color is not overidden, it's apparently just broken or removed.
In the case of border, it does not apply. Doesn't matter if I use
!important or not.
All the other style changes (color, height, width) work, so I know I'm
acting on the right element.
Is there some other aspect to this that I need to consider?
Any advice would be much appreciated.
--
Dave M G
__
css-discuss [css-d@lists.css-discuss.org]
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] Background color won't over-ride
On Mar 28, 2011, at 6:04 PM, Dave M G wrote:
input.superbigbutton {
color: green;
border: green 1px solid;
background-color: #63D46D !important;
height: 2em !important;
width: 33% !important;
}
Here's the problem: everything works *except* background-color, and border.
For the background color, instead of turning a light shade of green, it
turns off the background color completely. In other words, the original
pink color is not overidden, it's apparently just broken or removed.
In the case of border, it does not apply. Doesn't matter if I use
!important or not.
All the other style changes (color, height, width) work, so I know I'm
acting on the right element.
Is there some other aspect to this that I need to consider?
Any advice would be much appreciated.
Is that a form control: button or input type=button or similar ?
In that case you need to add -moz-appearance: none !important; in your user
stylesheet.
(trying to remember what Bz told me about those)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
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] Background color won't over-ride [SOLVED]
Philippe, Thank you for responding. -moz-appearance: none !important; Yep, that did the trick. It seems like an odd, tricky sort of thing, but it's not as if it's the first or last bizarre quirky exception on the internet... Thank you for providing the answer. -- Dave M G __ css-discuss [css-d@lists.css-discuss.org] 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] background color of a with class
Off course- it should be a:active!
what a silly mistake to make.
However,
both
#block-uc_catalog-0 a:active {
and
#block-uc_catalog-0 li a:active
won't show the background whilst #block-uc_catalog-0 a:hover {
works.
On 15-7-2010 15:15, Climis, Tim wrote:
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of Tim Arnold
Sent: Thursday, July 15, 2010 8:51 AM
To: Thijs Hakkenberg
Cc:css-d@lists.css-discuss.org
Subject: Re: [css-d] background color of a with class
On Jul 15, 2010, at 7:37 AM, Thijs Hakkenberg
th...@hakkenberg.com wrote:
Dear List,
I made an menu based on ul's and li's
(http://winkel.varkensinnood.nl)
with an a:hover turning the a element white.
However, when clicked thea element turns intoa
class=active.
I want to change the background color and should work with the
following
css:
#block-uc_catalog-0 a .active {
background: #fff;
}
(it's embedded in a DIV).
but this doesn't work. However,
#block-uc_catalog-0 a:hover {
background: #fff;
}
works.
What am I missing?
__
css-discuss [cs...@lists.css-discuss.org]
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/
If you copy/pasted into you message, the problem is that there is a
space between a and .active. It should be a.active not a .active
- Tim
Or, it could be that you mean a:active -- not sure, since we don't hvace code
to know if you have an active class.
--- Different Tim
__
css-discuss [cs...@lists.css-discuss.org]
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/
__
css-discuss [cs...@lists.css-discuss.org]
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] background color of a with class
a:active will only be styled for a brief second when you click a link and
must be listed AFTER a:hover in order to work. It seemed from your original
post that you were looking for styling that would persist for a menu item
that you had clicked on and now represented the current section. In that
case, you will have to, in fact, add a class.
On Wed, Jul 21, 2010 at 11:03 AM, Thijs Hakkenberg th...@hakkenberg.comwrote:
Off course- it should be a:active!
what a silly mistake to make.
However,
both
#block-uc_catalog-0 a:active {
and
#block-uc_catalog-0 li a:active
won't show the background whilst #block-uc_catalog-0 a:hover {
works.
On 15-7-2010 15:15, Climis, Tim wrote:
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of Tim Arnold
Sent: Thursday, July 15, 2010 8:51 AM
To: Thijs Hakkenberg
Cc:css-d@lists.css-discuss.org
Subject: Re: [css-d] background color of a with class
On Jul 15, 2010, at 7:37 AM, Thijs Hakkenberg
th...@hakkenberg.com wrote:
Dear List,
I made an menu based on ul's and li's
(http://winkel.varkensinnood.nl)
with an a:hover turning the a element white.
However, when clicked thea element turns intoa
class=active.
I want to change the background color and should work with the
following
css:
#block-uc_catalog-0 a .active {
background: #fff;
}
(it's embedded in a DIV).
but this doesn't work. However,
#block-uc_catalog-0 a:hover {
background: #fff;
}
works.
What am I missing?
__
css-discuss [cs...@lists.css-discuss.org]
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/
If you copy/pasted into you message, the problem is that there is a
space between a and .active. It should be a.active not a .active
- Tim
Or, it could be that you mean a:active -- not sure, since we don't hvace
code to know if you have an active class.
--- Different Tim
__
css-discuss [cs...@lists.css-discuss.org]
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/
__
css-discuss [cs...@lists.css-discuss.org]
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/
--
-
tim.arn...@gmail.com
__
css-discuss [cs...@lists.css-discuss.org]
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] background color of a with class
True, I was double mistaken.
The class is .active: http://winkel.varkensinnood.nl/catalog/2
so it should be .active after all.
However, both
#block-uc_catalog-0 a .active {
background-color:#69F;
}
as
#block-uc_catalog-0 li a .active {
background-color:#69F;
}
won't work...
On 21-7-2010 17:18, Tim Arnold wrote:
a:active will only be styled for a brief second when you click a link and
must be listed AFTER a:hover in order to work. It seemed from your original
post that you were looking for styling that would persist for a menu item
that you had clicked on and now represented the current section. In that
case, you will have to, in fact, add a class.
On Wed, Jul 21, 2010 at 11:03 AM, Thijs Hakkenbergth...@hakkenberg.comwrote:
Off course- it should be a:active!
what a silly mistake to make.
However,
both
#block-uc_catalog-0 a:active {
and
#block-uc_catalog-0 li a:active
won't show the background whilst #block-uc_catalog-0 a:hover {
works.
On 15-7-2010 15:15, Climis, Tim wrote:
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of Tim Arnold
Sent: Thursday, July 15, 2010 8:51 AM
To: Thijs Hakkenberg
Cc:css-d@lists.css-discuss.org
Subject: Re: [css-d] background color of a with class
On Jul 15, 2010, at 7:37 AM, Thijs Hakkenberg
th...@hakkenberg.com wrote:
Dear List,
I made an menu based on ul's and li's
(http://winkel.varkensinnood.nl)
with an a:hover turning the a element white.
However, when clicked thea element turns intoa
class=active.
I want to change the background color and should work with the
following
css:
#block-uc_catalog-0 a .active {
background: #fff;
}
(it's embedded in a DIV).
but this doesn't work. However,
#block-uc_catalog-0 a:hover {
background: #fff;
}
works.
What am I missing?
__
css-discuss [cs...@lists.css-discuss.org]
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/
If you copy/pasted into you message, the problem is that there is a
space between a and .active. It should be a.active not a .active
- Tim
Or, it could be that you mean a:active -- not sure, since we don't hvace
code to know if you have an active class.
--- Different Tim
__
css-discuss [cs...@lists.css-discuss.org]
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/
__
css-discuss [cs...@lists.css-discuss.org]
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/
__
css-discuss [cs...@lists.css-discuss.org]
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] background color of a with class
On Wed, Jul 21, 2010 at 11:29 AM, Thijs Hakkenberg th...@hakkenberg.comwrote:
True, I was double mistaken.
The class is .active: http://winkel.varkensinnood.nl/catalog/2
so it should be .active after all.
However, both
#block-uc_catalog-0 a .active {
background-color:#69F;
}
as
#block-uc_catalog-0 li a .active {
background-color:#69F;
}
won't work...
Back to my original reply. You have a space between the a and .active
that you need to get rid of. a.active good, a .active bad.
-
tim.arn...@gmail.com
__
css-discuss [cs...@lists.css-discuss.org]
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] background color of a with class
#block-uc_catalog-0 a.active {
background-color:#69F;
}
won't change a thing.
#block-uc_catalog-0 li a.active {
background-color:#69F;
}
did the trick!
Thanks everyone.
On 21-7-2010 17:32, Tim Arnold wrote:
On Wed, Jul 21, 2010 at 11:29 AM, Thijs Hakkenbergth...@hakkenberg.comwrote:
True, I was double mistaken.
The class is .active: http://winkel.varkensinnood.nl/catalog/2
so it should be .active after all.
However, both
#block-uc_catalog-0 a .active {
background-color:#69F;
}
as
#block-uc_catalog-0 li a .active {
background-color:#69F;
}
won't work...
Back to my original reply. You have a space between the a and .active
that you need to get rid of. a.active good, a .active bad.
-
tim.arn...@gmail.com
__
css-discuss [cs...@lists.css-discuss.org]
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/
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] background color of a with class
Dear List,
I made an menu based on ul's and li's (http://winkel.varkensinnood.nl)
with an a:hover turning the a element white.
However, when clicked the a element turns into a class=active.
I want to change the background color and should work with the following
css:
#block-uc_catalog-0 a .active {
background: #fff;
}
(it's embedded in a DIV).
but this doesn't work. However,
#block-uc_catalog-0 a:hover {
background: #fff;
}
works.
What am I missing?
__
css-discuss [cs...@lists.css-discuss.org]
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] background color of a with class
On Jul 15, 2010, at 7:37 AM, Thijs Hakkenberg th...@hakkenberg.com wrote:
Dear List,
I made an menu based on ul's and li's (http://winkel.varkensinnood.nl)
with an a:hover turning the a element white.
However, when clicked the a element turns into a class=active.
I want to change the background color and should work with the following
css:
#block-uc_catalog-0 a .active {
background: #fff;
}
(it's embedded in a DIV).
but this doesn't work. However,
#block-uc_catalog-0 a:hover {
background: #fff;
}
works.
What am I missing?
__
css-discuss [cs...@lists.css-discuss.org]
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/
If you copy/pasted into you message, the problem is that there is a
space between a and .active. It should be a.active not a
.active
- Tim
(Please forgive any typos caused by huge fingers on a teeny phone keybard.)
__
css-discuss [cs...@lists.css-discuss.org]
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] background color of a with class
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of Tim Arnold
Sent: Thursday, July 15, 2010 8:51 AM
To: Thijs Hakkenberg
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] background color of a with class
On Jul 15, 2010, at 7:37 AM, Thijs Hakkenberg
th...@hakkenberg.com wrote:
Dear List,
I made an menu based on ul's and li's
(http://winkel.varkensinnood.nl)
with an a:hover turning the a element white.
However, when clicked the a element turns into a
class=active.
I want to change the background color and should work with the
following
css:
#block-uc_catalog-0 a .active {
background: #fff;
}
(it's embedded in a DIV).
but this doesn't work. However,
#block-uc_catalog-0 a:hover {
background: #fff;
}
works.
What am I missing?
__
css-discuss [cs...@lists.css-discuss.org]
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/
If you copy/pasted into you message, the problem is that there is a
space between a and .active. It should be a.active not a .active
- Tim
Or, it could be that you mean a:active -- not sure, since we don't hvace code
to know if you have an active class.
--- Different Tim
__
css-discuss [cs...@lists.css-discuss.org]
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] background-color not working in IE7
A strange thanks for your reply David. You have indirectly fixed my problem. In the process of stripping everything out to enable you to take a look, I realised that I had not applied a width to the div which was producing my IE7 background problem. Of course, give it a width and IE7 background displays perfectly. Thanks. John. Not exactly up for looking for a needle in a haystack myself, but you'll make it easier by pointing to what you think may be the relevant stylesheet and the relevant lines. Thanks. Best, ~d _ http://clk.atdmt.com/UKM/go/19780/direct/01/ We want to hear all your funny, exciting and crazy Hotmail stories. Tell us now __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] background-color not working in IE7
Got a strange one here my friends. Go to the following page to view my problem. http://www.mrskibbles.co.uk/virtuemart/sweet-categories/chews/black-jacks-chews/ My problem is with the order table that sits half way down the page in the main donut, where the user adds a sweet to their shopping cart. Everything works great in all five main browsers except for the background-color not working correctly when I test in IE7. In all the other browsers (including IE8) the rows alternate with white-pink-white-pink, but when in IE7, earlier in the table the background-color remains white on all rows. Can you please take a look in the diferent browsers and highlight any comments you may have as to why it is not working in IE7. P.S. Don't worry about IE6 or earlier, right from the start of the project IE6 compatibility was not considered. Thanks, John. _ http://clk.atdmt.com/UKM/go/19780/direct/01/ We want to hear all your funny, exciting and crazy Hotmail stories. Tell us now __ css-discuss [cs...@lists.css-discuss.org] 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] background-color not working in IE7
John Franks wrote: Got a strange one here my friends. Go to the following page to view my problem. http://www.mrskibbles.co.uk/virtuemart/sweet-categories/chews/black-jacks-chews/ Thanks, John. Not exactly up for looking for a needle in a haystack myself, but you'll make it easier by pointing to what you think may be the relevant stylesheet and the relevant lines. Thanks. Best, ~d http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] Background color
List, What is the reasons for using: background: #fff; instead of: background-color: #fff; I've seen this lately, and wonder why the preference for the first one. I've only used 'background' as shorthand for something like: background: #fff url(images/image.png) left top no-repeat; Which is better or more correct? -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Tom Livingston wrote:
List,
What is the reasons for using:
background: #fff;
instead of:
background-color: #fff;
I've seen this lately, and wonder why the preference for the first
one. I've only used 'background' as shorthand for something like:
background: #fff url(images/image.png) left top no-repeat;
Which is better or more correct?
Background is for HTML markup and is reserved for images,
background-color is for CSS.
HTML:
html
body background=your_image.jpg
h1Hello world!/h1
/body
/html
To control background color in HTML use bgcolor:
html
body bgcolor=#fff
h1Hello world!/h1
/body
/html
See http://www.w3schools.com/tags/tag_body.asp for a summary of HTML
attributes for the body tag.
CSS:
body {
background-color:#fff;
}
Bill B
__
css-discuss [cs...@lists.css-discuss.org]
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] Background color
On Tue, Feb 23, 2010 at 10:18 AM, Bill Braun bbr...@hlthsys.com wrote:
Tom Livingston wrote:
List,
What is the reasons for using:
background: #fff;
instead of:
background-color: #fff;
I've seen this lately, and wonder why the preference for the first
one. I've only used 'background' as shorthand for something like:
background: #fff url(images/image.png) left top no-repeat;
Which is better or more correct?
Background is for HTML markup and is reserved for images,
background-color is for CSS.
So in an article I was reading, this code example was shown when
discussing a stylesheet:
body {
color:#000;
background:#fff;
}
By your assessment, this is wrong. I find it hard to believe the
author would not use correct syntax as he is fairly well known in the
front-end/CSS world. Alas, he is human, but you know what I mean...
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
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] Background color
No, using... background: #fff; ...instead of... background-color: #fff; ...is fine. You would just be using the shorthand method. The advantage in this case would just be less typing. __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
On Tue, Feb 23, 2010 at 10:38 AM, David Laakso da...@chelseacreekstudio.com wrote: In CSS this background: #fff; is more lean and mean than this background-color: #fff; Both are valid CSS. ~d Thanks David. That says it all. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Tom Livingston wrote:
On Tue, Feb 23, 2010 at 10:18 AM, Bill Braun bbr...@hlthsys.com wrote:
Tom Livingston wrote:
List,
What is the reasons for using:
background: #fff;
instead of:
background-color: #fff;
I've seen this lately, and wonder why the preference for the first
one. I've only used 'background' as shorthand for something like:
background: #fff url(images/image.png) left top no-repeat;
Which is better or more correct?
Background is for HTML markup and is reserved for images,
background-color is for CSS.
So in an article I was reading, this code example was shown when
discussing a stylesheet:
body {
color:#000;
background:#fff;
}
By your assessment, this is wrong. I find it hard to believe the
author would not use correct syntax as he is fairly well known in the
front-end/CSS world. Alas, he is human, but you know what I mean...
No, it is OK. In CSS you can use background and list a number of
property values consecutively. See:
http://www.w3schools.com/css/pr_background.asp
Or you can break out background into separate properties:
background-color,
background-image,
background-position,
background-repeat
Bill B
__
css-discuss [cs...@lists.css-discuss.org]
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] Background color
On Tue, Feb 23, 2010 at 9:01 AM, Tom Livingston tom...@gmail.com wrote: List, What is the reasons for using: background: #fff; instead of: background-color: #fff; I've seen this lately, and wonder why the preference for the first one. I've only used 'background' as shorthand for something like: background: #fff url(images/image.png) left top no-repeat; Which is better or more correct? Neither is more correct and better depends on the situation. background is just one of the many shorthand properties you can use like margin, padding or border. It can save you a lot of text by not having to specify each specific element of background and instead groups them up in one nice rule. It really depends on your coding style and if you're looking to minimalize the size of your CSS. Really, though, both are fine to use. -- Jason Arnold http://www.jasonarnold.net __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Thank you everyone. I was aware of background shorthand, but was not aware I could use it for just ONE property. Looks like I am gonna save me some bytes! :-) -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Tom Livingston wrote: On Tue, Feb 23, 2010 at 10:38 AM, David Laakso da...@chelseacreekstudio.com wrote: In CSS this background: #fff; is more lean and mean than this background-color: #fff; Both are valid CSS. ~d Thanks David. That says it all. I see I misunderstood the initial question. David is quite right, and is the better answer. Bill B __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
--- On Tue, 2/23/10, Jason Arnold jaon.arn...@gmail.com wrote: What is the reasons for using: background: #fff; instead of: background-color: #fff; I'm surprised no-one's pointed out the obvious: that using background will override all other background-* properties (to their default values), in addition to setting background-color. Using background-color will just set that property and inherit the others. Depending on your existing CSS, this could be significant. - Bobby __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Tom Livingston wrote: On Tue, Feb 23, 2010 at 10:38 AM, David Laakso da...@chelseacreekstudio.com wrote: In CSS this background: #fff; is more lean and mean than this background-color: #fff; Both are valid CSS. ~d Thanks David. That says it all. I see I misunderstood the initial question. David is quite right, and is the better answer. Bill B __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Tom Livingston wrote: List, What is the reasons for using: background: #fff; instead of: background-color: #fff; I've seen this lately, and wonder why the preference for the first one. I've only used 'background' as shorthand for something like: background: #fff url(images/image.png) left top no-repeat; Which is better or more correct? In CSS this background: #fff; is more lean and mean than this background-color: #fff; Both are valid CSS. ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Bobby Jack wrote: I'm surprised no-one's pointed out the obvious: that using background will override all other background-* properties (to their default values), in addition to setting background-color. It's very obvious if you look at CSS specifications, but they aren't everyone's breakfast. I, too, was surprised at the discussion, as the relevant point was frequently missed and incorrect statements were made (e.g. about conciseness being the only issue). When using the background shorthand, you unavoidably set all background properties, and this is usually a good thing. It avoids rare but nasty situations where your color suggestion is applied and so is your background color suggestion, but some other style sheet throws in some background image... the shorthand avoids this by setting background-image: none by default. Using background-color will just set that property and inherit the others. No, it won't inherit anything. It has nothing to do with inheritance. Inheritance is the most widely misunderstood, and perhaps the most unfortunate of all CSS concepts. When you set background-color: #fff, you do not affect other background properties in any way. Whether they are inherited or not depends on other factors. The main factor is that according to CSS specifications, none of the background properties is inherited in the normal sense (inherited in the absence of any CSS rule that assigns a value to the property), though in principle they can be inherited if the explicit value inherit is used (as for any property). -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
Dear Jukka --
When you say :
When you set background-color: #fff, you do not affect other background
properties in any way. Whether they are inherited or not depends on other
factors. The main factor is that according to CSS specifications, none of
the background properties is inherited in the normal sense (inherited in the
absence of any CSS rule that assigns a value to the property), though in
principle they can be inherited if the explicit value inherit is used (as
for any property).
I am confused. If you take the example below, which may
be seen online at
http://web-consultants.org.uk/sites/development/test-inheritance.html
both the first outer div and the first inner (nested) div
shew the same background colour. Now there is, in the code,
no explicit use of inherit to cause the inner div to inherit
the background colour of the outer, so why is this apparent
inheritance taking place ? Or is it simply that the
default background colour is transparent, and therefore
no inheritance is taking place but rather the colour is
simply shewing through ?
Philip Taylor
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
titleInheritance ?/title
style type=text/css
DIV {border: 1px solid transparent}
/style
/head
body
div style=width: 300px; height: 200px; background-color: blue;
z-index: 1
div style=width: 200px; height: 100px; z-index: 2; margin: 15%
/div
/div
divspannbsp;/span/div
div style=width: 300px; height: 200px; background-color: blue;
z-index: 1
div style=width: 200px; height: 100px; background-color: yellow;
z-index: 2; margin: 15%
/div
/div
/body
/html
__
css-discuss [cs...@lists.css-discuss.org]
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] Background color
At 8:10 PM + 2/23/10, Philip TAYLOR wrote:
I am confused. If you take the example below, which may
be seen online at
http://web-consultants.org.uk/sites/development/test-inheritance.html
both the first outer div and the first inner (nested) div
shew the same background colour.
[...] is it simply that the
default background colour is transparent, and therefore
no inheritance is taking place but rather the colour is
simply shewing through ?
Yes, it's that. The easiest test to see if a background is being
inherited by a child element is something like this:
div#outer {background: silver url(image.png) 0 0 no-repeat; padding: 1em;}
div#inner {padding: 1em;}
If you see two instances of the background image, then the background
is being inherited. You won't, at least not in any browser I've seen
in the past 15 years. (Okay, there's one obscure case in IE/Win
where you can cause the forced inheritance of backgrounds, but that
was either a bug or a hack-- opinions vary.)
You can simulate the effect of an inherited background like so, at
least in recent browsers:
div#outer {background: silver url(image.png) 0 0 no-repeat; padding: 1em;}
div#inner {background: inherit; padding: 1em;}
That's why background properties aren't inherited, of course.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
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] Background color
Eric A. Meyer wrote: Yes, it's that.[plus full explanation] Many thanks, Eric : much appreciated. ** Phil. __ css-discuss [cs...@lists.css-discuss.org] 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] Background color
default background colour is transparent, and therefore
no inheritance is taking place but rather the colour is
simply shewing through ?
Yes, it's that. The easiest test to see if a background is being
inherited by a child element is something like this:
div#outer {background: silver url(image.png) 0 0 no-repeat; padding: 1em;}
div#inner {padding: 1em;}
If you see two instances of the background image, then the background
is being inherited. You won't, at least not in any browser I've seen
in the past 15 years. (Okay, there's one obscure case in IE/Win
where you can cause the forced inheritance of backgrounds, but that
was either a bug or a hack-- opinions vary.)
You can simulate the effect of an inherited background like so, at
least in recent browsers:
div#outer {background: silver url(image.png) 0 0 no-repeat; padding: 1em;}
div#inner {background: inherit; padding: 1em;}
That's why background properties aren't inherited, of course.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
Oh boy. Mr. Meyer. I feel like I got sent to the principal's office...
Thanks much for the explanation!
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] Background Color
Hi;
I have a css menu with the following code:
#menu a {
color: #fff;
background: #00;
text-decoration: none;
}
Now, I've put an image in the background of this menu. I would like to get
rid of the background color completely; however, if I simply delete the
appropriate line, it defaults to white. Is there a way to set the alpha to
0? Some other solution?
TIA,
Victor
__
css-discuss [cs...@lists.css-discuss.org]
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] Background Color
On Fri, Nov 13, 2009 at 4:33 AM, Victor Subervi victorsube...@gmail.com wrote:
Hi;
I have a css menu with the following code:
#menu a {
color: #fff;
background: #00;
text-decoration: none;
}
Now, I've put an image in the background of this menu. I would like to get
rid of the background color completely; however, if I simply delete the
appropriate line, it defaults to white. Is there a way to set the alpha to
0? Some other solution?
TIA,
Victor
Do you have an example page?
I would recommend taking a look at the parent elements and making sure
their backgrounds aren't set, either.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
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] Background Color
On Fri, Nov 13, 2009 at 7:19 AM, Jack Timmons jorac...@gmail.com wrote:
On Fri, Nov 13, 2009 at 4:33 AM, Victor Subervi victorsube...@gmail.com
wrote:
Hi;
I have a css menu with the following code:
#menu a {
color: #fff;
background: #00;
text-decoration: none;
}
Now, I've put an image in the background of this menu. I would like to
get
rid of the background color completely; however, if I simply delete the
appropriate line, it defaults to white. Is there a way to set the alpha
to
0? Some other solution?
TIA,
Victor
Do you have an example page?
http://angrynates.com/nrelectric.com/index.py
I would recommend taking a look at the parent elements and making sure
their backgrounds aren't set, either.
Couldn't see any.
TIA,
V
__
css-discuss [cs...@lists.css-discuss.org]
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] Background Color
I would recommend taking a look at the parent elements and making sure
their backgrounds aren't set, either.
Couldn't see any.
It's in the header of the html.
#menu {
width: 12em;
background: #eee;
}
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
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] Background Color
That color code threw me! Thanks,
V
On Fri, Nov 13, 2009 at 8:41 AM, Climis, Tim tcli...@indiana.edu wrote:
I would recommend taking a look at the parent elements and making sure
their backgrounds aren't set, either.
Couldn't see any.
It's in the header of the html.
#menu {
width: 12em;
background: #eee;
}
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] Background-color Modifying Element Sizes?
Hi all, new to the list. I recently started a complete redesign of my Web site, and because cross-browser support for CSS3 is finally on the rise, decided to throw in some goodies in the form of rounded corners and RGBA backgrounds. But while working on my navigation list I discovered something strange. I am styling hyperlinks that have no background color or border until being in a hover state. I have extra padding in the non-hover state to compensate for the width and height added by the border so that the sizes match and it just appears as though the links are being selected, without moving. And yet when I hover over them, they are shifting to the left because the hover state is somehow bigger than the non-hover state. I have tried to correct this both by tweaking the left margin and the padding, and although I can get it to look right in certain text sizes, when I zoom in or out, the shifts become parent again (everything's in ems so the shifts are exaggerated relative to the text size). I have come up with a solution but it involves applying an invisible background color and border using RGBA. While it works nicely, it won't work for the majority of browsers so I can't really rely on it. I have created a test page demonstrating the two methods: http://www.nospoon.tv/test/bgcolor.html. I have tried this in Firefox 3.5.3 and Chrome 3.0.195.27 on Windows XP and the result is the same. Oddly enough, IE7 renders them exactly the opposite. So, barring that, how do I get the first example to render the same as the second in 2.1 without using the same code? Thanks! __ css-discuss [cs...@lists.css-discuss.org] 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] Background-color Modifying Element Sizes?
Hugh Guiney wrote: http://www.nospoon.tv/test/bgcolor.html. I have tried this in Firefox 3.5.3 and Chrome 3.0.195.27 on Windows XP and the result is the same. Oddly enough, IE7 renders them exactly the opposite. So, barring that, how do I get the first example to render the same as the second in 2.1 without using the same code? You can try using two decimals for those em values, but because browsers have different tip-over points/values when calculating ems into pixels for rendering on screens you'll have a hard time finding values they'll all agree on at different font sizes. The safest is to stick to your first example only, but declare the paddings and border-width in px on both states. All browsers will agree on that, no matter which other border styles they pick up or not. regards Georg __ css-discuss [cs...@lists.css-discuss.org] 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] Background-color Modifying Element Sizes?
Thanks Georg. I actually tried throwing in extra decimal places but as mentioned I couldn't even get the *same* browser to agree on how to render it at different font sizes. And I would rather avoid ruling in pixels for anything (aside from raster images) because I am going for resolution-independence here, and although I know most browsers these days zoom everything by default, I wouldn't want the layout to break for someone with a large font size and an older browser, or with text-only zoom on. __ css-discuss [cs...@lists.css-discuss.org] 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] Background-color Modifying Element Sizes?
And I would rather avoid ruling in pixels for anything (aside from raster images) because I am going for resolution-independence here, and although I know most browsers these days zoom everything by default, I wouldn't want the layout to break for someone with a large font size and an older browser, or with text-only zoom on. If you don't define things in whole numbers of pixels, then you'll have to deal with rounding errors when dealing with fractional pixels, in which case you will never get the shifting to go away completely. Just a thought though, have you tried making the border 0? It should still have the rounded corners, and then you'll have the padding be the same all the time, and no border + padding rounding. ---Tim __ css-discuss [cs...@lists.css-discuss.org] 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] Background-color Modifying Element Sizes?
On Thursday, October 22, 2009 6:17:15 am Hugh Guiney wrote: Hi all, new to the list. I recently started a complete redesign of my Web site, and because cross-browser support for CSS3 is finally on the rise, decided to throw in some goodies in the form of rounded corners and RGBA backgrounds. But while working on my navigation list I discovered something strange. I am styling hyperlinks that have no background color or border until being in a hover state. I have extra padding in the non-hover state to compensate for the width and height added by the border so that the sizes match and it just appears as though the links are being selected, without moving. And yet when I hover over them, they are shifting to the left because the hover state is somehow bigger than the non-hover state. I have tried to correct this both by tweaking the left margin and the padding, and although I can get it to look right in certain text sizes, when I zoom in or out, the shifts become parent again (everything's in ems so the shifts are exaggerated relative to the text size). I have come up with a solution but it involves applying an invisible background color and border using RGBA. While it works nicely, it won't work for the majority of browsers so I can't really rely on it. I have created a test page demonstrating the two methods: http://www.nospoon.tv/test/bgcolor.html. I have tried this in Firefox 3.5.3 and Chrome 3.0.195.27 on Windows XP and the result is the same. Oddly enough, IE7 renders them exactly the opposite. So, barring that, how do I get the first example to render the same as the second in 2.1 without using the same code? It looks like a rounding error. Since with font-size: 1.4em, you're setting the font size to 22.4px, it runs into trouble occasionally. And I can never get it to shift more than 1px, no matter how much I zoom. I didn't test it throughly, but resetting the font-size to 1.375em (22px off of a 16px default), appeared to make the shifting go away. ---Tim __ css-discuss [cs...@lists.css-discuss.org] 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] Background-color Modifying Element Sizes?
Philippe Wittenbergh wrote: On Oct 22, 2009, at 8:33 PM, G. Sørtun wrote: Hugh Guiney wrote: http://www.nospoon.tv/test/bgcolor.html. I have tried this in Firefox 3.5.3 and Chrome 3.0.195.27 on Windows XP and the result is the same. Oddly enough, IE7 renders them exactly the opposite. So, barring that, how do I get the first example to render the same as the second in 2.1 without using the same code? The safest is to stick to your first example only, but declare the paddings and border-width in px on both states. All browsers will agree on that, no matter which other border styles they pick up or not. That is the easiest most cross browser friendly solution. Instead of rgba(0,0,0,0) in example 2, you could also use the 'transparent' keyword. That would cover IE8 and 7 (iirc, I think IE 6 doesn't support 'transparent' for borders) Philippe --- Should you use Philippe's suggestion, and want to use this with IE6, know that you can give IE6 a transparent border too: http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/ Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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] Background-color Modifying Element Sizes?
On Oct 22, 2009, at 7:17 PM, Hugh Guiney wrote: http://www.nospoon.tv/test/bgcolor.html. An additional note: if the intent is to have the border the same color as the background, in order to use the 'border-radius' property, then there is absolutely no need for the border. 'border-radius' is absolutely _not_ dependent on the existence of a border on the element. The property is somewhat misnamed. There has been some discussion on the www-style mailing list recently to rename the property to 'corner-radius' (that would make lots of sense). I don't think we'll see a change though, esp as the ccs3 borders backgrounds module has entered the state of 'last call' just this week. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] 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] Background-color Modifying Element Sizes?
Since I only want one color behind the text, I tried Philippe's method of just dropping the border declarations altogether and it worked without a hitch in Firefox, Chrome, and IE. I didn't realize that border-radius didn't pertain solely to borders. (It really *should* be renamed...) I did go back and test it with both border-width:0 and border-color:transparent as well to see if they would yield the same results, and they did. This enables one to use different color borders without the shift. Thank you all for the helpful suggestions! -Hugh __ css-discuss [cs...@lists.css-discuss.org] 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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
Hello, What's this about? Hex code for transparency? I like the sound of this but it's the first I have heard I notice you have put 'rgba' is that for alpha? Can I have opaque colours too? On 26/07/2009, at 9:52 AM, Philippe Wittenbergh wrote: On Jul 26, 2009, at 3:09 AM, Sandy wrote: I didn't realize that there is a colour code for transparent! Do you happen to know the hex? http://www.w3.org/TR/css3-color/#transparent It cannot be translated to hex (hex cannot express transparency). As the spec mentions, it is functionally equivalent to (and has a computed value of) rgba(0,0,0,0). Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] 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/ __ css-discuss [cs...@lists.css-discuss.org] 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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
On Jul 26, 2009, at 4:12 PM, Chris Blake wrote:
What's this about? Hex code for transparency? I like the sound of this
but it's the first I have heard
I notice you have put 'rgba' is that for alpha? Can I have opaque
colours too?
of course:
p {background: rgba(0,0,0,.8); color: rgba(255,255,255,1);}
0 is fully transparent, 1 is fully opaque. the 'a' in rgba means alpha-
channel (transparency)
http://www.w3.org/TR/css3-color/#rgba-color
doesn't work in IE 6, 7 8, though.
PS - bottom posting, please
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
On Jul 26, 2009, at 6:13 PM, lodewijk andré de la porte wrote:
What's this about? Hex code for transparency? I like the sound of
this
but it's the first I have heard
I notice you have put 'rgba' is that for alpha? Can I have opaque
colours too?
of course:
p {background: rgba(0,0,0,.8); color: rgba(255,255,255,1);}
0 is fully transparent, 1 is fully opaque. the 'a' in rgba means
alpha-
channel (transparency)
http://www.w3.org/TR/css3-color/#rgba-color
doesn't work in IE 6, 7 8, though.
Doesn't the keyword transparent ring any bells? just saying
background:
transparent; should work in any browser.
IE 6 (and to a lesser extend IE 7) has (very) limited support for that
keyword anyway.
p {border: medium solid transparent;} gives interesting effects in
those browsers (should work in IE 7, but I saw it doing something
stupid recently; don't remember the exact context though.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
http://www.uoguelph.ca/mcb/test/index.shtml http://www.uoguelph.ca/mcb/test/css/mcb2009.css http://www.uoguelph.ca/mcb/test/css/ie6-hacks.css http://www.uoguelph.ca/mcb/test/css/ie7-hacks.css One problem remains, as far as I can see - that's the white border on the #globalnav. I think that is due to the border: transparent ... on the 'a' selector. IE 6 does not understand this. I suggest using the color code instead. David, thank you for checking back in. I was sort of getting set to stop worrying about this thing in ie6 - it pretty much is there in that browser, and, well, you know - but if I can fix that issue that would be great. I didn't realize that there is a colour code for transparent! Do you happen to know the hex? P.S. Your #footer is 100% wide plus 20px of padding, throwing a horizontal scrollbar. I don't think you need that width, unless older IE needs 'hasLayout' ack. It was a vestigial width, like an appendix, left over from earlier messing around with the look. I took it out. I appreciate you finding that. Thanks for your help, and for being another set of eyes on this, Sandy __ css-discuss [cs...@lists.css-discuss.org] 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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
On Jul 26, 2009, at 3:09 AM, Sandy wrote: I didn't realize that there is a colour code for transparent! Do you happen to know the hex? http://www.w3.org/TR/css3-color/#transparent It cannot be translated to hex (hex cannot express transparency). As the spec mentions, it is functionally equivalent to (and has a computed value of) rgba(0,0,0,0). Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] 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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
Sandy wrote:
Sandy wrote:
[...]
http://www.uoguelph.ca/mcb/test/contact.shtml
and there are a couple of divs with a transparent background
.headerleft
#globalnav
the search should be transparent, too.
instead that whole area is showing up with a white background in AOL
9.1, ie6 and ie7. ie8 is ok.
the styles are here
http://www.uoguelph.ca/mcb/test/css/mcb2009.css
That comes from this rule @ line 271 -
.container {
background-color : #fff;
padding : 0;
width : 860px;
}
Other browsers respect the 'background-color:inherit;' @ line 109 as the
selector is more specific. IE 5 - 7 do not apply 'inherit'.
David - thanks so much for taking the time to help me sort this out.
Now - your advice did get that white background out of the top of the
page, but it made the white background in the content area disappear, too.
This is really mysterious to me - the .container div starts below the
navigation, and was somehow covering the navigation ... take a look
here, where I have made it yellow with a red outline
http://www.uoguelph.ca/mcb/test/test.shtml
I tried giving the container its white background back and a margin-top
of 300px, and then the whole top nav moved down that much, as if the
container started at the top of the page, instead of after the navigation.
I am flummoxed. I really appreciate your help!
I figured it out!
thanks for getting me on the right track.
Sandy
__
css-discuss [cs...@lists.css-discuss.org]
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
Sandy wrote re: http://www.uoguelph.ca/mcb/test/contact.shtml instead that whole area is showing up with a white background in AOL 9.1, ie6 and ie7. ie8 is ok. the styles are here http://www.uoguelph.ca/mcb/test/css/mcb2009.css [...] Now - your advice did get that white background out of the top of the page, but it made the white background in the content area disappear, too. This is really mysterious to me - the .container div starts below the navigation, and was somehow covering the navigation ... take a look here, where I have made it yellow with a red outline http://www.uoguelph.ca/mcb/test/test.shtml I tried giving the container its white background back and a margin-top of 300px, and then the whole top nav moved down that much, as if the container started at the top of the page, instead of after the navigation. Sorry about the delayed reply, Sandy. It looks like you have solved the stated problem, and the test.shtml page seems to have vanished. One problem remains, as far as I can see - that's the white border on the #globalnav. I think that is due to the border: transparent ... on the 'a' selector. IE 6 does not understand this. I suggest using the color code instead. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
hey all, I hope someone can help me out with this. I am starting on a site (it's still very rough) http://www.uoguelph.ca/mcb/test/contact.shtml and there are a couple of divs with a transparent background .headerleft #globalnav the search should be transparent, too. instead that whole area is showing up with a white background in AOL 9.1, ie6 and ie7. ie8 is ok. the styles are here http://www.uoguelph.ca/mcb/test/css/mcb2009.css I tried making the background a tiled transparent gif in IE6, but it didn't help http://www.uoguelph.ca/mcb/test/css/ie6-hacks.css any other thoughts? thanks in advance for your help. Sandy __ css-discuss [cs...@lists.css-discuss.org] 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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
Sandy wrote:
[...]
http://www.uoguelph.ca/mcb/test/contact.shtml
and there are a couple of divs with a transparent background
.headerleft
#globalnav
the search should be transparent, too.
instead that whole area is showing up with a white background in AOL
9.1, ie6 and ie7. ie8 is ok.
the styles are here
http://www.uoguelph.ca/mcb/test/css/mcb2009.css
That comes from this rule @ line 271 -
.container {
background-color : #fff;
padding : 0;
width : 860px;
}
Other browsers respect the 'background-color:inherit;' @ line 109 as the
selector is more specific. IE 5 - 7 do not apply 'inherit'.
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
Sandy wrote:
[...]
http://www.uoguelph.ca/mcb/test/contact.shtml
and there are a couple of divs with a transparent background
.headerleft
#globalnav
the search should be transparent, too.
instead that whole area is showing up with a white background in AOL
9.1, ie6 and ie7. ie8 is ok.
the styles are here
http://www.uoguelph.ca/mcb/test/css/mcb2009.css
That comes from this rule @ line 271 -
.container {
background-color : #fff;
padding : 0;
width : 860px;
}
Other browsers respect the 'background-color:inherit;' @ line 109 as the
selector is more specific. IE 5 - 7 do not apply 'inherit'.
David - thanks so much for taking the time to help me sort this out.
Now - your advice did get that white background out of the top of the
page, but it made the white background in the content area disappear, too.
This is really mysterious to me - the .container div starts below the
navigation, and was somehow covering the navigation ... take a look
here, where I have made it yellow with a red outline
http://www.uoguelph.ca/mcb/test/test.shtml
I tried giving the container its white background back and a margin-top
of 300px, and then the whole top nav moved down that much, as if the
container started at the top of the page, instead of after the navigation.
I am flummoxed. I really appreciate your help!
Sandy
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] background-color: transparent;
What does the background-color: transparent; actually do? __ 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] background-color: transparent;
Andy Borka wrote: What does the background-color: transparent; actually do? Turns off background color on an element to make the underlying colors shine through. http://www.w3.org/TR/CSS21/colors.html#background-properties 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] Background color and Font size
Hayden's Harness Attachment wrote: David At http://www.choroideremia.org/new/crf_header.php can you tell me why the Orange background is not filling the background for Choroideremia Research Foundation Inc. in the h1 header and not obstructing the curve graphic? And why 26 point font in Firefox looks smaller than 26point font in IE7? Angus MacKinnon Angus, old stick, I think you meant to send this to the CSS-D list rather than me. Since I am blind in one eye, and can't see out the other, I have no clue about colors so you're on your own as far as whatever color orange is. In order to resolve the background filling in the curve graphic; and, organizing the other information on the page, required a complete makeover. The CSS /and/ markup are entirely different than what you presented. Because of all the changes the best bet -- to avoid error -- is replace your file with mine. http://www.chelseacreekstudio.com/ca/cssd/angus.html It has been quick checked in IE/6. IE/7, and compliant browsers. Yours, Helen PS I pass on the why the fonts look smaller in FF-- let's hope someone else on the list relies regarding that... (yet another reason to post to, and reply to, the list) -- 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/
[css-d] Background Color doesn't show up
Once again, I apologize for these extremely simplistic questions. Here is my page: http://home.comcast.net/~prairiedream/beginning/masthead.html http://home.comcast.net/~prairiedream/beginning/masthead.css How do I get the background color to show up in Sidebar A One? Why doesn't the content div show up at the proper width? Do I need a container div around these two elements? Thank you! Carol __ 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] Background Color doesn't show up
How do I get the background color to show up in Sidebar A One? Your id is set incorrectly, in the css it is sidebar_a and in the html it is set as sidedbar_a (theres an extra d before bar) Why doesn't the content div show up at the proper width? What is the proper width? __ 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] Background Color doesn't show up
Why doesn't the content div show up at the proper width?
What is the proper width?
The width of masthead.gif is supposed to be 760px, though it shows up I
think as 750 px, I don't know why.
So the total width of sidebar_a and content should be 760px.
The content is not wrapped by anything except the body so it is currently
using the full width.
You need to set it to
760 // total width
-(180+10+10) // left nav plus padding
-(10+10) // content padding
_
= 540px
#content { width: 540px; }
__
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/
[css-d] Background color on menu
I'm trying to build a vertical menu for a church site simply using
borders, changing background and font colors.
This is only my second CSS site.
my CSS for the menu (so far) is this:
/*Menu Navigation*/
ul#menu {
list-style-type: none;
padding-left: 0;
margin-left:0;
}
*html ul.menu a {
height: 1px;
}
#menu li {
display: inline;
}
#menu a {
display: block;
border-top: 1px solid #000;
padding: .25em;
margin-right: 1em;
background-color: #67A15C;
text-decoration: none;
color: #fff;
}
#menu a:hoover {
background-color: #F4D455;
color: #000;
}
My question. Upon hoover I don't see any change in background or font
color. Why?
Phoebe
__
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] Background color on menu
Phoebe Taylor wrote: my CSS for the menu (so far) is this: My question. Upon hoover I don't see any change in background or font color. Why? Phoebe Could it be because you misspelled hover in the selector? -- 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] Background color on menu
You wrote:
#menu a:hoover {
background-color: #F4D455;
color: #000;
}
Shouldn't it be hover, and not hoover?
Kind regards,
Christian
*Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza
Phoebe Taylor schrieb:
I'm trying to build a vertical menu for a church site simply using
borders, changing background and font colors.
This is only my second CSS site.
my CSS for the menu (so far) is this:
/*Menu Navigation*/
ul#menu {
list-style-type: none;
padding-left: 0;
margin-left:0;
}
*html ul.menu a {
height: 1px;
}
#menu li {
display: inline;
}
#menu a {
display: block;
border-top: 1px solid #000;
padding: .25em;
margin-right: 1em;
background-color: #67A15C;
text-decoration: none;
color: #fff;
}
#menu a:hoover {
background-color: #F4D455;
color: #000;
}
My question. Upon hoover I don't see any change in background or font
color. Why?
Phoebe
__
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/
__
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] Background color on menu
bleh yes. sorry. On Wed, Mar 26, 2008 at 3:41 PM, David Laakso [EMAIL PROTECTED] wrote: Phoebe Taylor wrote: my CSS for the menu (so far) is this: My question. Upon hoover I don't see any change in background or font color. Why? Phoebe Could it be because you misspelled hover in the selector? -- 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] Background color on menu
Cause you're trying to vacuum (Hoover) instead of hover. Correct your spelling
and you should be ok. Btw Dyson's are far superior!
jason ogle | designer | myspace.com
310.969.7124 | myspace.com/ogletine
Dont' print this email or I'll dispatch Treebeard on you.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Phoebe Taylor
Sent: Wednesday, March 26, 2008 1:34 PM
To: css mailing list
Subject: [css-d] Background color on menu
I'm trying to build a vertical menu for a church site simply using
borders, changing background and font colors.
This is only my second CSS site.
my CSS for the menu (so far) is this:
/*Menu Navigation*/
ul#menu {
list-style-type: none;
padding-left: 0;
margin-left:0;
}
*html ul.menu a {
height: 1px;
}
#menu li {
display: inline;
}
#menu a {
display: block;
border-top: 1px solid #000;
padding: .25em;
margin-right: 1em;
background-color: #67A15C;
text-decoration: none;
color: #fff;
}
#menu a:hoover {
background-color: #F4D455;
color: #000;
}
My question. Upon hoover I don't see any change in background or font
color. Why?
Phoebe
__
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] Background color on menu
Phoebe Taylor wrote: bleh.. yes.. My question. Upon hoover I don't see any change in background or font color. Why? Phoebe Could it be because you misspelled hover in the selector? Think of the w3c validation services as your best friends. css http://jigsaw.w3.org/css-validator/ markup http://validator.w3.org/ -- 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] Background color on menu
On Wed, Mar 26, 2008 at 3:34 PM, Phoebe Taylor [EMAIL PROTECTED]
wrote:
I'm trying to build a vertical menu for a church site simply using
borders, changing background and font colors.
This is only my second CSS site.
my CSS for the menu (so far) is this:
/*Menu Navigation*/
ul#menu {
list-style-type: none;
padding-left: 0;
margin-left:0;
}
*html ul.menu a {
height: 1px;
}
#menu li {
display: inline;
}
#menu a {
display: block;
border-top: 1px solid #000;
padding: .25em;
margin-right: 1em;
background-color: #67A15C;
text-decoration: none;
color: #fff;
}
#menu a:hoover {
background-color: #F4D455;
color: #000;
}
My question. Upon hoover I don't see any change in background or font
color. Why?
Phoebe
First, correct a:hoover to a:hover.
Unless my quick glance missed something, that's it.
-Jack
__
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] Background color on menu
To thank all the responders, both here and private, I now have a new signature. Phoebe -- Words I have learned to spell from CSS-Discussion list members - scissors, tortoise, hover (not hoover). __ 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] Background color
Hayden's Harness Attachment wrote: I had the following doing what what I wanted. Now the background in the curve is not a dark blue (#191970) I wish to have. I would like to keep the white and change the grey background choroideremia Research Foundation Inc. br / (CRF) sits on to a dark blue (#191970). Can some one see the problem? HTML http://www.choroideremia.org/new/crf_header.php I cannot see the problem you describe. On IE 7, the only grey background is for the stripe containing the text Reverse screen colors. Can you please specify which background for which curve has a wrong color on which browser(s)? I do see a different problem, though: when I use different window widths, different parts of the text Choroideremia Research Foundation Inc. (CRF) appear against a white background, becoming invisible since the text is white. Moreover, there is no spacing between that text and the right edge of the canvas; I wonder if this is intentional. Jukka K. Korpela (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/
[css-d] Background color
Can someone see why IE7 and Firefox 2.x running on Vista Home Premium puts a Plump 4 background color for Choroideremia Research Foundation Inc. br / (CRF) and Decrease Font Size By 10% in a midnight blue background color? I should have a midnight blue background a white curve and then a midnight blue background. HTML http://www.choroideremia.org/new/crf_header.php CSS http://www.choroideremia.org/new/crf_css1.css Image http://www.choroideremia.org/images/curve.gif Angus MacKinnon Infoforce Services http:ééwww.infoforce-services.com It is impossible to rightly govern the world without God and the Bible. George Washington __ 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/
[css-d] Background color
I had the following doing what what I wanted. Now the background in the curve is not a dark blue (#191970) I wish to have. I would like to keep the white and change the grey background choroideremia Research Foundation Inc. br / (CRF) sits on to a dark blue (#191970). Can some one see the problem? HTML http://www.choroideremia.org/new/crf_header.php CSS http://www.choroideremia.org/new/crf_css1.css Angus MacKinnon Infoforce Services http:ééwww.infoforce-services.com It is impossible to rightly govern the world without God and the Bible. George Washington __ 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/
[css-d] Background-color not showing extra padding/margin
http://server.npserver1.com/~netper/ph/ * This page looks the way I want it to in IE7. * In IE6 there seems to be an extra padding/margin on the right hand side. * In Firefox Safari, the background-color in the #main div isn't showing. The extra padding problem may be there, but I can't tell without the background-color. I'm too close to it now and it's driving me bonkers. Can anyone shed some light for me? Thank you so much. Joanne __ 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/
[css-d] Background color not showing
http://www.melbournecostumehire.com.au/test/ In IE6 7, the background of this navigation is black. In Firefox Safari, only the hyperlinks are black background and when they finish, the background color of the rest of the #navigation div is showing as white. How do I fix this? Joanne __ 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] Background color not showing
Joanne wrote:
http://www.melbournecostumehire.com.au/test/
In IE6 7, the background of this navigation is black. In Firefox
Safari, only the hyperlinks are black background and when they
finish, the background color of the rest of the #navigation div is
showing as white.
IE/win is saved by its 'hasLayout'[1] bug which makes the container
auto-expand, while other browsers need to be told to expand the
container to include its floating children.
Adding...
#navigation {display: table;}
...will solve that by establishing a new block formatting context[2],
which enforces expansion without interfering with the dropdowns.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
--
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/
[css-d] background-color of an absolutely positioned block element
Thanks to Philippe Wittenbergh's help, I now realize that - with the exception
of the root element - the background-color of any block element will normally
apply only to its content-area, and that area, of course, is defined by either
its actual content, or a specified width.
However, in Eric Meyer's Cascading Style Sheets: The Definitive Guide, 2nd
edition, Eric seems to indicate that in the case of absolutely positioned block
elements, the width is in many cases determined by the offsets used --- eg,
{position: absolute; top: 25%; right: 25%; bottom: 0; left: 0;} defines the
block's dimensions relative to its containing block. The accompanying
illustrations seem to imply that a background-color has been applied to that
IMPLIED width -- and not solely to the area behind the content that is entered
into the block element. Here's an example:
First, the style:
#masthead h1 {position: absolute; top: 1 em; left: 1 em; right: 25%; bottom:
10px; margin: 0; padding: 0; background: silver;}
Then an accompanying illustration, in which he has entered text into his
masthead. The masthead's background-color, however, extends far to the right of
the space occupied by the text, and below it, as well -- in effect filling up
the width that was only implied by the offsets used to absolutely position the
block element.
When I try to duplicate this, however, I end up with a block element that,
while positioned right: 25%, is completely limited to its text content -- there
seems to be no acknowledgement of the width implied by the offsets.
Can anyone point out what I'm not seeing, here?
Thanks, in advance!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
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] Background color on form w/ fieldset
Ingo Chao wrote:
Unicorn Design wrote:
http://www.excellenterprisesllc.com/contact.php
The problem is demoized here [1].
I think a fix could be to pull the legend with a negative margin, apply
position:relative to fix the clipping, and to apply position:relative to
the fieldset in order to fix the positioning of the legend itself. Sigh.
In your Conditional Comment:
#email fieldset { position:relative; }
#email legend { position:relative; margin-top: -1em; }
And remove the first br before the legend.
Ingo
[1]
http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/
Hi Denise,
Yes, a good fix (hear, hear, Ingo). - In practice it turns out to be a
margin-top of -1.55em in this case. And the legend is even maintaining
it's position in IE at different resolutions: pff! ;-)
Addendum: also a bit extra margin-bottom for the #email legend appears
to be needed for IE, to compensate the upwards shifting.
So besides the #email fieldset { P:R; } our never satisfied glutton
wants to eat in the Cond.Comm.:
#email legend {
position:relative;
margin-top: -1.55em;
margin-bottom: 10px;
}
Tested in IE6 under WinXP: testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-legend-in-form.htm
Greetings,
francky
btw:
Filling the empty label/label with a
labelnbsp;/label
is pushing the Submit Button under the text area in not-IE.
__
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] Background color on form w/ fieldset
I am finishing up a site and having a small problem with how IE is
displaying the contact form.
The fields for the form are within one fieldset. I've applied a background
color to the fieldset.
The problem occurs with the legend, as IE displays the background color
outside the bounds of the fieldset upward to the height of the legend. As
usual, Firefox displays the background as planned.
The page can be viewed at http://www.excellenterprises.com/contact.php.
Can someone suggest a method to correct this in IE?
Basic HTML:
div id=email
form ...
fieldsetlegendHave a Question?/legend
divlabelFull Name:/labelinput type=text name=visitor size=35
//divbr /
... additional fields ...
/fieldset
/form
/div
Relevant CSS:
#email {width:600px; margin:40px auto;}
#email fieldset {
background-color:#cfcfcf;
border:1px solid #2D333A;
}
#email legend {
color:#529E00;
font-weight:bold;
font-size:1.2em;
padding:.2em;
margin-left:20px;
}
Many thanks,
Denise
__
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] Background color on form w/ fieldset
Unicorn Design wrote:
I am finishing up a site and having a small problem with how IE is
displaying the contact form. The fields for the form are within one
fieldset. I've applied a background color to the fieldset.
The problem occurs with the legend, as IE displays the background color
outside the bounds of the fieldset upward to the height of the legend. As
usual, Firefox displays the background as planned.
Apologies ... I provided the wrong URL.
Corrected: http://www.excellenterprisesllc.com/contact.php
The problem is demoized here [1].
I think a fix could be to pull the legend with a negative margin, apply
position:relative to fix the clipping, and to apply position:relative to
the fieldset in order to fix the positioning of the legend itself. Sigh.
In your Conditional Comment:
#email fieldset { position:relative; }
#email legend { position:relative; margin-top: -1em; }
And remove the first br before the legend.
Ingo
[1]
http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/
--
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] Background color not showing up in IE6?
Matthew Bernhardt wrote: Hello, I've been trying to figure out why the content block in the following site doesn't always get the background color in IE 6. Any help would be much appreciated. This page works correctly in all the browsers I've checked: http://benedikt.knowlton.ohio-state.edu/default.asp?content=1 However,this page shows a white background in IE6 http://benedikt.knowlton.ohio-state.edu/default.asp?content=2 If you poke around the site, only pages in the first menu group get the background color (yellow). Pages from the other five menu groups - in IE 6 only - get white, while IE 7, FF, Opera, Safari, etc get the color. See The multiple #id.class bug in http://css-discuss.incutio.com/?page=InternetExplorerWinBugs Ingo -- 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/
[css-d] Background color not showing up in IE6?
Hello, I've been trying to figure out why the content block in the following site doesn't always get the background color in IE 6. Any help would be much appreciated. This page works correctly in all the browsers I've checked: http://benedikt.knowlton.ohio-state.edu/default.asp?content=1 However,this page shows a white background in IE6 http://benedikt.knowlton.ohio-state.edu/default.asp?content=2 If you poke around the site, only pages in the first menu group get the background color (yellow). Pages from the other five menu groups - in IE 6 only - get white, while IE 7, FF, Opera, Safari, etc get the color. I know I'm missing something simple, but I can't figure out what it is... Thanks, Matt [EMAIL PROTECTED] __ 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] background color issues
problem child - www.magnoliapr.com (/magpr.css) IE 6+ gets the bg color happening in the wrap div, but to my surprise FF, NN and Opera does not. Also, you can see in IE that there is a slight space added after the banner/logo area. The home page is validating XHTML and CSS (save for bgcolor warnings) What am I missing? Thanks, Ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background color issues
the good browsers have no idea that you want #wrap to contain the
floats inside, so they give #wrap a 0 height. you have already
triggered haslayout in ie6, which is why it's expanding to contain the
floats and the background is showing up.
i'd suggest sticking in the easy clearing method to get the other
browsers to contain the float:
#wrap:after {
clear: both;
content: .;
display: block;
height: 0;
visibility: hidden;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] background color issues
Actually - CSS validation states in such warning that I have no background-color assigned for my div#wrap, but if you scroll down to (or otherwise read) the css, I do...?... WTF?!? Thanks, Ron Quoting RKN Studio [EMAIL PROTECTED]: problem child - www.magnoliapr.com (/magpr.css) IE 6+ gets the bg color happening in the wrap div, but to my surprise FF, NN and Opera does not. Also, you can see in IE that there is a slight space added after the banner/logo area. The home page is validating XHTML and CSS (save for bgcolor warnings) What am I missing? Thanks, Ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 IE7b2 testing hub -- 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] background color issues
On 9/8/06, RKN Studio [EMAIL PROTECTED] wrote: Thanks cj - this seems to work. Can I assume then that I 'always' use such clear practices after using floats? I didn't know to do this. Thanks, Ron this method is the one i most prefer to both contain floats and to clear them as well. if you'd like to see some of the other options members of css-d know of, you can visit the wiki at http://css-discuss.incutio.com/?page=ClearingSpace i personally don't like adding br/ or hr/ (or anything else for that matter) to clear. option 2 is right up my ally. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background color issues
RKN Studio wrote:
Actually - CSS validation states in such warning that I have no
background-color assigned for my div#wrap, but if you scroll down to
(or otherwise read) the css, I do...?... WTF?!?
Thanks,
Ron
Quoting RKN Studio [EMAIL PROTECTED]:
problem child - www.magnoliapr.com (/magpr.css
Hi Ron,
The css-validator has no html-sniffer or html-interpreter, so it cannot
know more as mentioned in the stylesheet... ;-)
The div#wrap is only once in the css, how should the ccs-validator know
that an other div (and: which one) is inside the div#wrap?
And for instance:
div#block {background-color: #a4957a;} is followed by:
#block p {color: #ff;}
Say there is also a li inside the #block, then the color of the li
is not covered. And maybe the color af a li in general was just the
color of the background of the #block...
Conclusion: in general, the css is giving the styles (and some of the
cascade), but the real cascade is only in the html.
So the css-validator is right to give a warning, if a color/bg-color is
not in pair in the same element.
Apart from that, this warning is not 100% safe: bg-color black and
color: #010101 (1 degree of the 255 in the brightness scale = visible
also as black, unless you are an eagle in his better years) don't give a
warning, but are a validated good pair. - Validator is blind for the
degree of contrast (and also for different colors with the same
intensity, which can be completely unseen by colorblind people)!
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] background-color and color / IE solution
On Fri, 4 Aug 2006 11:07:18 -0500, Rayne Bair wrote: hi, I'm Rayne and I've just joined the list. [...] Welcome, Rayne. Re: http://testing.wifetalks.com/ You said: I'm getting warning that no color is specified on elements where I've defined a background-color. It's just a warning, but should I explicitly define all my color elements to inherit to comply with the validation? Background properties don't normally inherit. Default is transparent. Because of this, backgrounds on containers may clash with your color, hence the warning. The validator does not check multiple rules to find out, so it warns you to check it yourself. In your case, you have no background color at all in most places. If I were to set my browser to default to, say, white text on a black background as my preference for unstyled pages, then I'd get black text on a black background on most of your page. :) Adding a background-color to BODY should fix it. [...] the majority of my browser visitors are using IE5.5 and IE6. So I'd like my site to look good in both. This brings me to (of course) a very annoying issue. Personal styling preference has me using :before and that won't work in IE. Should I create a separate style- sheet that tweaks those faults for IE and call it using an import after my link command? Will that override the linked styles? Well, you seem to have found the solution in the time I took before visiting your page. I think your solution works well, although a base font size of 80% times a content size of 0.85em makes for very tiny text - smaller than six points print equivalent on my 15 1440 x 1050 laptop. Also, if you really are using UTF-8 encoding, there's no need for all those Unicode entities. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background-color and color / IE solution
hi, I'm Rayne and I've just joined the list. I'm working on a redesign of my new site and I've got several questions. 1) I'm checking that my CSS validates and I've fixed the errors (didn't realize that background properties had to be in a certain order). But I'm getting warning that no color is specified on elements where I've defined a background-color. It's just a warning, but should I explicitly define all my color elements to inherit to comply with the validation? 2) I'm designing my site in Firefox when on Windows and Firefox/Safari when on my Mac. But I just recently checked my site stats (have never been concerned with it before) and apparently the majority of my browser visitors are using IE5.5 and IE6. So I'd like my site to look good in both. This brings me to (of course) a very annoying issue. Personal styling preference has me using :before and that won't work in IE. Should I create a separate style-sheet that tweaks those faults for IE and call it using an import after my link command? Will that override the linked styles? BTW: the test location is: http://testing.wifetalks.com -- Rayne Bair [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background-color/color; IE styling
1) I'm checking that my CSS validates and I've fixed the errors (didn't realize that background properties had to be in a certain order). But I'm getting warning that no color is specified on elements where I've defined a background-color. It's just a warning, but should I explicitly define all my color elements to inherit to comply with the validation? - Still need advice on this one. 2) I'm designing my site in Firefox when on Windows and Firefox/Safari when on my Mac. But I just recently checked my site stats (have never been concerned with it before) and apparently the majority of my browser visitors are using IE5.5 and IE6. So I'd like my site to look good in both. This brings me to (of course) a very annoying issue. Personal styling preference has me using :before and that won't work in IE. Should I create a separate style-sheet that tweaks those faults for IE and call it using an import after my link command? Will that override the linked styles? - After doing a little more research I've figured out the answer to my own question...I separate the styles for FF and IE and am using a conditional comment to activate the IE styles. As far as I can tell it's working. -- Rayne Bair [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background color not working in div
I would appreciate it if someone would take the time to check out my page and tell me why the background color is not working in the div called main_content. I know the positioning is slightly off in Netscape and way off in IE and I don't know why. It looks fine locally on my computer. I will deal with that later. What I want the div to have is a light gray background and black text. Right now I have the text a light color so I can see it. http://www.roughandreadydesigns.com/test/index.shtml css file: http://www.roughandreadydesigns.com/test/main_setup.css Many thanks to anyone who can help me. marlene __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background color not working in div
Because your div with the background-color defined is called main_content, and it is empty (div/div), and the div with all the text in it is called main_content_text and it has no background. Perhaps you meant the /div for the main_content div to be at the bottom of the main_content_text div, thereby enclosing the former? -Original Message- From: Marlene T. Yogerst Subject: [css-d] background color not working in div I would appreciate it if someone would take the time to check out my page and tell me why the background color is not working in the div called main_content. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background color not working in div
I would appreciate it if someone would take the time to check out my page and tell me why the background color is not working in the div called main_content. I know the positioning is slightly off in Netscape and way off in IE and I don't know why. It looks fine locally on my computer. I will deal with that later. What I want the div to have is a light gray background and black text. Right now I have the text a light color so I can see it. http://www.roughandreadydesigns.com/test/index.shtml css file: http://www.roughandreadydesigns.com/test/main_setup.css Many thanks to anyone who can help me. marlene Marlene, The background is applied to main-content the problem is that main-content doesn't contain anything nor does it have a height. Since it contains nothing, it collapses and takes up ~zero space. Nick -- Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Background color looks right in IE, nothing else.
Morning!
Okay so the site looks right in IE and I know that IE makes some guesses
as to what you want to see so...how do I make [LINK:
http://pj-chron.com/redesign/] http://pj-chron.com/redesign/ look right in
Netscape, Firefox ect. In other words, how it does in IE.
The code is compliant :
[LINK:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpj-chron.com%2Fredesign%2Fcssfile.cssusermedium=all]
http://jigsaw.w3.org/css-validator/v...usermedium=all
Here is the relevant css code:#container{
width: 760px;
height: auto;
margin:0 auto;
padding:10px 10px 0 10px;
background: #ff url(images/contbg.png) no-repeat;
border: none;
color:#222;
}
Thanks for the help
~Mindy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Background color looks right in IE, nothing else.
mindy wrote:
http://pj-chron.com/redesign/
Here is the relevant css code:#container{
width: 760px;
}
The above width keeps IE/win happy, as it acts as a 'hasLayout'[1] trigger.
Other browsers need a proper 'Block formatting contexts'[2], so adding...
#container {overflow: hidden;}
...will work in most.
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#q15
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] background color with div
Marty Martin wrote:
I have a graphic (inside a div) that is 100px high and is positioned
absolute at left:0; top:0;. I am wanting to put a div beside the div
with graphic with a background color to stretch to the far right of
the screen so it appears to be one long banner no matter the size of
the browser for the user.
Here's what I have but it isn't working--
div#header {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
div id=header
div style=float: left;img src=images/headers/winter_header.gif
width=560 height=150 //div
div style=background-color: #009ACF; height: 101px; width:
100%;nbsp;/div
/div
How can I get that second div to stretch all the way across the screen?
Marty,
I know you said you figured it out, but I wanted to suggest this
alternate markup because of its greater simplicity:
div id=header
img src=images/headers/winter_header.gif width=560 height=150 //div
With this CSS:
#header {
float: left; /* Just to contain the floated image. You can replace with
your preferred float containment method if you like. */
height: 150px;
background-color: #009ACF;
}
#header img {
float: left;
width: 560px;
}
This should produce the same thing but is much simpler markup and CSS.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background color problems in IE and other issues
I seem to not to get the top navigation to come up with the background properties e.g. color set in CSS for this site http://www.chineseculturalcentre.org.uk/joomla/ have had a look at this bug and put in the fix http://www.positioniseverything.net/explorer/ie-listbug.html still not working also having real problems with the footer background colour (in IE and mozilla suite, not firefox 1.5) on this site http://filmworkshop.com/joomla/index.php? option=com_contenttask=viewid=37Itemid=60 There also seems to be a bug with the padding on the sidebar li items as the appear to have a strange 10px padding error occuring in IE on a PC (but not all versions I think), this happens in both sites My other problems are the sidebar length doesnt seem to clear the floats properly and is causing problems with IE on mac rendering the page or lists as horizontal menus on this page http:// www.chineseculturalcentre.org.uk/joomla/ I posted a message 2 days ago about the dropdown menu not working in IE PC for http://filmworkshop.com/joomla/index.php? option=com_contenttask=viewid=37Itemid=60 I am still stuck as to whether this is still having problems with .htc mime type or if there is a greater problem with the CSS mainnav bar, had a go at quick suggested, not sure if I did right If anyone can help with any of these issues I would be eternally grateful __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
