Re: [css-d] More up-to-data code ?
On Sun, 27 May 2007, [EMAIL PROTECTED] wrote:
I had a display that looked like this:
Máiréad is co-composer of the original score for the dance show Invasion.
-- Choreographed by Stephen C. Scariff and Ronan Morgan.
-- Music by Máiréad Nesbitt and Tibor Kasza.
-- Directed by Robert Alföldi.
Watch this space for tour dates.
The plain text presentation is not sufficient for indicating all aspects
of rendering. Although most features can be inferred from the markup and
CSS code that you specify, it is not clear whether the br is meant to
generate an empty line. (In browser practice, it may or it may not.)
font class=b2brbMáiréad/b is co-composer of the original score for
the dance show bInvasion/b.
br-- nbsp;Choreographed by Stephen C. Scariff and Ronan Morgan.
br-- nbsp;Music by Máiréad Nesbitt and Tibor Kasza.
br-- nbsp;Directed by Robert Alföldi.
brWatch this space for tour dates.
/font
Logically, this might perhaps best be marked up as follows. (Many people
would use p instead of div at least for the first sentence, but that's
debatable logically - a single sentence seldom constitutes a paragraph.
In styling, it would just imply that the element has some default top and
bottom margins that you would remove in CSS, if desired.)
div class=adv
divstrongMáiréad/strong is co-composer of the original score for
the dance show strongInvasion/strong./div
ul
liChoreographed by Stephen C. Scariff and Ronan Morgan./li
liMusic by Máiréad Nesbitt and Tibor Kasza./li
liDirected by Robert Alföldi./li
/ul
divWatch this space for tour dates./div
/div
font.b2{
color:#00;
background:transparent;
font-size:12px;
}
- -
Is there a more suitable method for achieving the same using CSS?
I'm pretty sure that people on this list agree that the font markup is
inferior to using CSS. Using my suggested markup, you would use the CSS
rule
.adv { font-size: 12px;
color: #00;
background: transparent; }
(Of course, there a different views on whether a font size of 12px should
be used, but that's not relevant here. Setting background to transparent
is risky, since due to the effects of other style sheets, the background
that shines through might be different from what you expect. The risk is
small, but it would be safer to set background to a specific color.)
If you want to have an empty line at the start, as the leading br
suggests, then you can add
* { line-height: 1.22; }
.adv { margin-top: 1.22em; }
The value 1.22 is just an example here. Note that setting line-height
explicitly for all elements prevents many bugs from biting you. In
particular, if lists are used, it fixes the IE feature that line-height is
larger for li elements than for normal text. (The feature might be
desirable in some situations, but not in cases like this.)
The most difficult issue is the list formatting, in particular changing
the list marker from the default bullet to the string -- nbsp;. There
is no direct way to do this, and any approaches have drawbacks: using
generated content fails on IE, using background images fails when images
are not shown. Whether you actually want -- and not en dash or em dash
is not relevant to this issue; en dash and em dash can of course be
written in HTML as ndash; and mdash; if desired, and they work well
these days.
Thus, if you really want such rendering, the practical approach is to put
the markers into document content proper, as in your markup. Using list
markup, that would mean
li-- nbsp;list item text/li
and then you would need to use
.adv ul { list-style: none; }
in CSS to suppress the default list marker.
Admittedly, the use of list markup means a little more work than just
using br between items, when you really want to _suppress_ any
browser-generated markers. However, should you design e.g. that the items
be slightly indented on the left, list markup would let you do that
directly.
Other issues in list formatting in this case can be handled easily. You
can make the formatting compact (corresponding to the effects of your
markup) as follows:
.adv ul, adv.li { margin: 0; padding: 0; }
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] splitting a table cell into a label and content.
Hi, I cant think how to do this. I have a 3*3 table and I would like each cell to contain two parts, label and content, each 300px wide. The label part is to be on the left and will contain label text, have a different background color to the content and have a fixed width, say 50px. The label should be full height of the cell. I am trying to achieve a layout so that regardless of the length of text in the label part or the text part, the two parts will always extend to the height of the table cell. I want to do it this way, rather than use a separate td for the label so that I can have independant control over the size of the labels (ie some labels could be wider. I have tried using float left, height 100% for the label part, but if the cell height grows, text gets wrapped under the label part. I would appreciate any suggestions. Thanks Tonypm _ PC Magazines 2007 editors choice for best Web mailaward-winning Windows Live Hotmail. http://imagine-windowslive.com/hotmail/?locale=en-usocid=TXT_TAGHM_migration_HM_mini_pcmag_0507 __ 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] Layout issues
Here is my site http://www.precisemessenger.com/private/help4.html I have a problem with getting text to align where I want it. On the top of the page The links Home, About Us and Contact are not centered inbetween the lines. The select a size form and add to cart are not centered under the price $2.95 Image description is not centered under the square image 1 and the spaces between image description, product photos(click here), available colors and the color squares are to far apart. I have been trying for two days to work these problems out. Any help is greatly appreciated. Thanks, Kevin __ 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] splitting a table cell into a label and content.
On Mon, 28 May 2007, Tony Martin wrote: I have a 3*3 table and I would like each cell to contain two parts, label and content, each 300px wide. That means a total width of 3 times 2 times 300 pixels, i.e. 1800 pixels. Are you sure you want that? The label part is to be on the left and will contain label text, have a different background color to the content and have a fixed width, say 50px. This does not match the preceding statement. The label should be full height of the cell. That's what makes things difficult. How does the table look like as a whole and how are its cell dimensions determined? I want to do it this way, rather than use a separate td for the label so that I can have independant control over the size of the labels (ie some labels could be wider. But previously you mentioned a fixed width - actually, two fixed widths. Anyway, using a table with 3 rows and 6 columns is surely the _easiest_ way, unless you really want to vary the label widths. I have tried using float left, height 100% for the label part, but if the cell height grows, text gets wrapped under the label part. As usual, the URL of your most successful effort so far would help a lot to see the problem in its context. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Adding an emplty LI
Hi all I´ve been doing all I can to try and perfect this navigation but I just
don´t understand it I am sure it is very simple. I have tried to make this as
simple as possible with as little code as possible.
I have a navigation called #topnav which has width auto.
Then I have a #topnav LI which has a width of 87px. The html has 10 LIs which
makes a total width of 870px.
Then I have #topnav A which also has a width of 87px.
These are all contained in an ID called #width which has a width of 880px.
At present this works fine and fit for the information that I have in the
links, however, the rest of the page is wider. I need to increase the
navigation which I can do by increasing the #width pixel size(in this case by
40px). How can I add an LI to cover this space? I have tried to do it but
without luck
Thank you for your help
http://www.geocities.com/bayliss_trevor/tester.htm
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
HTMLHEAD
titlenav/title
STYLE type=text/css
#width {
MARGIN-LEFT: 50px; WIDTH: 880px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
}
#topnav {
BORDER-TOP: blue 4px solid; MARGIN: 9px 0px 0px; width: auto
}
#topnav LI {
DISPLAY: inline; BACKGROUND: black no-repeat left top; FLOAT: left; WIDTH:
87px; HEIGHT: auto
}
#topnav A {
BORDER-RIGHT: blue 1px solid; DISPLAY: block; BACKGROUND: no-repeat left top;
FONT: 11px/20px
tahoma, arial, sans-serif; WIDTH: 87px; COLOR: #fff; TEXT-ALIGN: center
}
/STYLE
/HEAD
BODY
DIV id=width
DIV id=logoIMG height=57 alt= src=images/logo.jpg width=217
UL id=topnav
LIA title= href=Home /A/LI
LIA title= href=About Malls/A /LI
LIA title= href=Malls/A /LI
LIA title= href=Malls UK/A /LI
LIA title= href=Malls USA/A /LI
LIA title= href=Malls France/A /LI
LIA title= href=National/A /LI
LIA title= href=International/A/LI
LIA title= href=Contact Us/A/LI
LIA title= href=FAQs/A/LI
/UL
/DIV/DIV
/BODY/HTML
-
Got a little couch potato?
Check out fun summer activities for kids.
-
Be a better Heartthrob. Get better relationship answers from someone who knows.
Yahoo! Answers - Check it out.
__
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] Estimating x-height
(The discussion started under the heading font-family font sizes, but I now changed the Subject to more specific.) On Fri, 18 May 2007, Bruno Fassino wrote: Putting together the above, if we trust Gecko, the aspect ratio of a font can be obtained simply observing the size of an element dimensioned using 'ex' units. The results are consistent with those I got with my simplistic method that compares the letter x in large font size with a stickyard. See http://www.cs.tut.fi/~jkorpela/x-height.html It seems that different ways lead to the same results, implying that the figures mentioned in CSS specifications are wrong - most notably when they say that Verdana has an aspect ratio of 0.58, but it actually has 0.545. This, as well as methods of finding out the x-height value for specific fonts, is of some importance to authors who wish to use font-size-adjust (which helps on Firefox 2 and does no harm when it doesn't). -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Adding an emplty LI
trevor bayliss wrote:
Hi all I´ve been doing all I can to try and perfect this navigation but I
just don´t understand it I am sure it is very simple. I have tried to make
this as simple as possible with as little code as possible.
I have a navigation called #topnav which has width auto.
Then I have a #topnav LI which has a width of 87px. The html has 10 LIs
which makes a total width of 870px.
Then I have #topnav A which also has a width of 87px.
These are all contained in an ID called #width which has a width of 880px.
At present this works fine and fit for the information that I have in the
links, however, the rest of the page is wider. I need to increase the
navigation which I can do by increasing the #width pixel size(in this case by
40px). How can I add an LI to cover this space? I have tried to do it but
without luck
I am not really sure what you mean by this or what you want the
navigation to look like. You can add as many li's as you like,
however as soon as their combined width exceeds the containers specified
width the links will wrap to a new line. Also because you have defined
the container's width any UA or screen resolution that is less then
880px wide will cause a horizontal scroll bar.
Thank you for your help
http://www.geocities.com/bayliss_trevor/tester.htm
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
HTMLHEAD
titlenav/title
STYLE type=text/css
#width {
MARGIN-LEFT: 50px; WIDTH: 880px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
}
#topnav {
BORDER-TOP: blue 4px solid; MARGIN: 9px 0px 0px; width: auto
}
#topnav LI {
DISPLAY: inline; BACKGROUND: black no-repeat left top; FLOAT: left; WIDTH:
87px; HEIGHT: auto
}
#topnav A {
BORDER-RIGHT: blue 1px solid; DISPLAY: block; BACKGROUND: no-repeat left
top; FONT: 11px/20px
tahoma, arial, sans-serif; WIDTH: 87px; COLOR: #fff; TEXT-ALIGN: center
}
/STYLE
/HEAD
BODY
DIV id=width
DIV id=logoIMG height=57 alt= src=images/logo.jpg width=217
UL id=topnav
LIA title= href=Home /A/LI
LIA title= href=About Malls/A /LI
LIA title= href=Malls/A /LI
LIA title= href=Malls UK/A /LI
LIA title= href=Malls USA/A /LI
LIA title= href=Malls France/A /LI
LIA title= href=National/A /LI
LIA title= href=International/A/LI
LIA title= href=Contact Us/A/LI
LIA title= href=FAQs/A/LI
/UL
/DIV/DIV
/BODY/HTML
I took some liberties with your code, and a stab at what I thought you
were after.
The result can be found here http://www.thetangos.com/testing/trevor.html
Tango
__
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] Adding an emplty LI
Thanks Tango for the reply. I will reduce the width as much as possible point
taken about the size the of the page.
I want to add a new LI but specifiy it´s width all the others are set at the
same width and I want one with a different width. Thanks for any pointers
Tango [EMAIL PROTECTED] wrote:
trevor bayliss wrote:
Hi all I´ve been doing all I can to try and perfect this navigation but I
just don´t understand it I am sure it is very simple. I have tried to make
this as simple as possible with as little code as possible.
I have a navigation called #topnav which has width auto.
Then I have a #topnav LI which has a width of 87px. The html has 10 LIs which
makes a total width of 870px.
Then I have #topnav A which also has a width of 87px.
These are all contained in an ID called #width which has a width of 880px.
At present this works fine and fit for the information that I have in the
links, however, the rest of the page is wider. I need to increase the
navigation which I can do by increasing the #width pixel size(in this case by
40px). How can I add an LI to cover this space? I have tried to do it but
without luck
I am not really sure what you mean by this or what you want the
navigation to look like. You can add as many
's as you like,
however as soon as their combined width exceeds the containers specified
width the links will wrap to a new line. Also because you have defined
the container's width any UA or screen resolution that is less then
880px wide will cause a horizontal scroll bar.
Thank you for your help
http://www.geocities.com/bayliss_trevor/tester.htm
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
#width {
MARGIN-LEFT: 50px; WIDTH: 880px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
}
#topnav {
BORDER-TOP: blue 4px solid; MARGIN: 9px 0px 0px; width: auto
}
#topnav LI {
DISPLAY: inline; BACKGROUND: black no-repeat left top; FLOAT: left; WIDTH:
87px; HEIGHT: auto
}
#topnav A {
BORDER-RIGHT: blue 1px solid; DISPLAY: block; BACKGROUND: no-repeat left
top; FONT: 11px/20px
tahoma, arial, sans-serif; WIDTH: 87px; COLOR: #fff; TEXT-ALIGN: center
}
Home
About Malls
Malls
Malls UK
Malls USA
Malls France
National
International
Contact Us
FAQs
I took some liberties with your code, and a stab at what I thought you
were after.
The result can be found here http://www.thetangos.com/testing/trevor.html
Tango
__
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/
-
Choose the right car based on your needs. Check out Yahoo! Autos new Car
Finder tool.
-
Choose the right car based on your needs. Check out Yahoo! Autos new Car
Finder tool.
__
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] Estimating x-height
Jukka K. Korpela wrote: (The discussion started under the heading font-family font sizes, but I now changed the Subject to more specific.) On Fri, 18 May 2007, Bruno Fassino wrote: Putting together the above, if we trust Gecko, the aspect ratio of a font can be obtained simply observing the size of an element dimensioned using 'ex' units. The results are consistent with those I got with my simplistic method that compares the letter x in large font size with a stickyard. See http://www.cs.tut.fi/~jkorpela/x-height.html It seems that different ways lead to the same results, implying that the figures mentioned in CSS specifications are wrong - most notably when they say that Verdana has an aspect ratio of 0.58, but it actually has 0.545. This, as well as methods of finding out the x-height value for specific fonts, is of some importance to authors who wish to use font-size-adjust (which helps on Firefox 2 and does no harm when it doesn't). I don't think you can rely on the size of elements dimensioned in ex units. Eric says in his book that many user agents get their value for ex by taking the value of em and dividing it in half. This is because most fonts don't have the value of their x-height built-in, and it's difficult to compute, as you discovered. Since lowercase letters are about half as tall as uppercase letters, user agents assume that 1ex is equal to .5em. Also, would monitor resolutions or dot pitch have any impact on your calculations? Since you are taking a ratio, I wouldn't think so, but I wonder... Lori __ 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] Estimating x-height
On Mon, 28 May 2007, Lori Lay wrote: I don't think you can rely on the size of elements dimensioned in ex units. Eric says in his book that many user agents get their value for ex by taking the value of em and dividing it in half. Most browsers do that, and it pretty much defeats the idea of ex, but Firefox 2 has an adequate implementation of ex _and_ it supports font-size-adjust, making the unit and the property practically important to some extent. Using the ex unit, you naturally need to be prepared to having it interpreted as 0.5em. Also, would monitor resolutions or dot pitch have any impact on your calculations? Since you are taking a ratio, I wouldn't think so, but I wonder... They affect the estimates, but not very much when a very large font size is used. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Adding an emplty LI
trevor bayliss wrote: Thanks Tango for the reply. I will reduce the width as much as possible point taken about the size the of the page. I want to add a new LI but specifiy it´s width all the others are set at the same width and I want one with a different width. Thanks for any pointers. Add a li with a unique class or id and style it. Examples below. li class=emptynbsp;/li !-- empty list item to which style rules could be applied -- Example at http://www.thetangos.com/testing/trevor.html Tango __ 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] Valign and repeat.
A page advertising a service, requires a phone number in a vertical position ,repeated horizontally across the bottom of the page,with a height of 50px and 3px padding. Your suggestions for coding this would be appreciated. Thanks,Ernie. _ Catch suspicious messages before you open themwith Windows Live Hotmail. http://imagine-windowslive.com/hotmail/?locale=en-usocid=TXT_TAGHM_migration_HM_mini_protection_0507 __ 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] Estimating x-height
Jukka K. Korpela wrote: The results are consistent with those I got with my simplistic method that compares the letter x in large font size with a stickyard. See http://www.cs.tut.fi/~jkorpela/x-height.html Thanks for this ! Together with Bruno's script, that makes for 2 usable tools to find out the aspect ratio of fonts. It seems that different ways lead to the same results, implying that the figures mentioned in CSS specifications are wrong - most notably when they say that Verdana has an aspect ratio of 0.58, but it actually has 0.545. I've no idea where that value for Verdana comes from, all tests and comments I've found point to a value of 0.54x~0.55. One additional note: Gecko doesn't use the 3rd digit after the period, and tends to round upwards (e.g for Verdana it will use 0.55). Or perhaps the info provided by the font itself only takes two digits. For practical purposes, this will only have an impact at very high font-sizes. This, as well as methods of finding out the x-height value for specific fonts, is of some importance to authors who wish to use font-size- adjust (which helps on Firefox 2 and does no harm when it doesn't). As I've noted before (and you did as well), using font-size-adjust does improve readability of text in the case where different fonts are used in the same text block. It also helps in case the fallback font is smaller than the one chosen by the stylesheet author. Progressive enhancement at work here. Lori Lay wrote: I don't think you can rely on the size of elements dimensioned in ex units. Eric says in his book that many user agents get their value for ex by taking the value of em and dividing it in half. This is because most fonts don't have the value of their x-height built-in, and it's difficult to compute, as you discovered. Since lowercase letters are about half as tall as uppercase letters, user agents assume that 1ex is equal to .5em. Safari and Gecko handle the ex value correctly [1]. A 10em wide block won't have the same width as a 20ex wide block, given the same font. basic test: http://dev.l-c-n.com/_temp/em_ex.php [1] when used for line-height, I get different results between the 2 browsers, but that is more related with rounding to grid pixels. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ 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] Overriding style sheet for list item
Hey all,
I have the following defined to set up an unordered lsit
menu set.
.menu ul {
width: 100%;
margin-left:0;
padding-left:0;
}
.menu li {
list-style: none;
}
.menu li a {
display: block;
text-decoration: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
background-color: #9cabc4;
color: #fff;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4x;
}
.menu a:hover {
display: block;
text-decoration: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
background-color: #c5cedc;
color: #00;
}
But certain items in the list I want to override the
background color, so I put this in the line item tag:
li style=background: #00 !important;item/li
But on Firefox/Linux (all I have here at home), it is not
overriding the style sheet, not using the inline code.
Any help would be greatly appreciated!
Skip
--
Skip Evans
Big Sky Penguin
61 W Broadway
Butte, Montana 59701
=-=-=-=-=-=-=-=-=-=-
Check out PHPenguin, a versatile and lightweight
code base for developing PHP/MySQL applications.
phpenguin.bigksypenguin.com
__
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] Overriding style sheet for list item
On 5/29/07, skip evans [EMAIL PROTECTED] wrote:
Hey all,
I have the following defined to set up an unordered lsit
menu set.
.menu ul {
width: 100%;
margin-left:0;
padding-left:0;
}
.menu li {
list-style: none;
}
.menu li a {
display: block;
text-decoration: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
background-color: #9cabc4;
color: #fff;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4x;
}
.menu a:hover {
display: block;
text-decoration: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
background-color: #c5cedc;
color: #00;
}
But certain items in the list I want to override the
background color, so I put this in the line item tag:
li style=background: #00 !important;item/li
But on Firefox/Linux (all I have here at home), it is not
overriding the style sheet, not using the inline code.
Any help would be greatly appreciated!
Try setting background-color rather than background in your inline
style. I don't think that's supposed to make a difference, but it
might be a small bug.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
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] Overriding style sheet for list item
From: skip evans [EMAIL PROTECTED]
li style=background: #00 !important;item/li
---
Hi Skip
Put the inline style inside the A tag instead of the LI tag as you did.
lia href=# style=background: #00;current item/a/li
OR
Set a class for the different link and define its style in the style sheet:
lia href=# class=currentcurrent item/a/li
ul li a.current {background: #00;}
Maurício Samy Silva
http://www.maujor.com/
__
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] Overriding style sheet for list item
Yup. That did the background properly,
but it turned off the hover cover from the list.
That's what I'm trying to solve now.
Perhaps a class will do that.
Thanks!
Skip
Mauricio Samy Silva wrote:
From: skip evans [EMAIL PROTECTED]
li style=background: #00 !important;item/li
---
Hi Skip
Put the inline style inside the A tag instead of the LI tag as you did.
lia href=# style=background: #00;current item/a/li
OR
Set a class for the different link and define its style in the style sheet:
lia href=# class=currentcurrent item/a/li
ul li a.current {background: #00;}
Maurício Samy Silva
http://www.maujor.com/
__
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/
--
Skip Evans
Big Sky Penguin
61 W Broadway
Butte, Montana 59701
=-=-=-=-=-=-=-=-=-=-
Check out PHPenguin, a versatile and lightweight
code base for developing PHP/MySQL applications.
phpenguin.bigksypenguin.com
__
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] Overriding style sheet for list item
From: skip evans [EMAIL PROTECTED]
...but it turned off the hover cover from the list.
---
Hi Skip
Assuming that you get the class solution
lia href=# class=currentcurrent item/a/li
ul li a.current {background: #00;}
Now add the the following to your CSS in order to call back the hover state
for the current class:
.menu a:hover, .menu a.current:hover {
actual rules
}
Maurício Samy Silva
http://www.maujor.com/
__
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] Overriding style sheet for list item
Yes! This did the whole shebang!
Much thanks everyone!!!
Mauricio Samy Silva wrote:
From: skip evans [EMAIL PROTECTED]
...but it turned off the hover cover from the list.
---
Hi Skip
Assuming that you get the class solution
lia href=# class=currentcurrent item/a/li
ul li a.current {background: #00;}
Now add the the following to your CSS in order to call back the hover state
for the current class:
.menu a:hover, .menu a.current:hover {
actual rules
}
Maurício Samy Silva
http://www.maujor.com/
__
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/
--
Skip Evans
Big Sky Penguin
61 W Broadway
Butte, Montana 59701
=-=-=-=-=-=-=-=-=-=-
Check out PHPenguin, a versatile and lightweight
code base for developing PHP/MySQL applications.
phpenguin.bigksypenguin.com
__
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/
