[css-d] margins on tr
Hi all, I know it's not possible to place a margin on a tr-tag, but is there any alternative if tr elements need to be visually separated from each other. Mind that every tr has a border and a gradient background, so trickery using td tags is pretty much out of the question. Cross-browser solution would be nice J Visual example: http://onderhond.com/temp/product-lines.png Additionally: any idea _why_ it is not possible to put margins on a tr? Greets, Niels Matthijs http://www.onderhond.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] Hover over link - opacity
As far as i can see, this shouldn't be any problem at all. Just switch
the opacity values. Normal case:
a {opacity:1;}
a:hover {opacity:0.7;}
what you want:
a {opacity:0.7;}
a:hover {opacity:1;}
That should about cover it I guess. Of course, it doesn't have to be 1,
you can choose any value between 0 and 1 as base value.
Greets,
Niels Matthijs
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ellen Heitman
Sent: 12 May 2009 16:30
To: css-d@lists.css-discuss.org
Subject: [css-d] Hover over link - opacity
I've come across numerous tutorials on how to alter the opacity of an
image
link when hovering over it. I've seen that you start with a less opaque
image and, when hovered over, the image becomes opaque. Can the reverse
be
done? Can I have the normal image, and when I hover over it, lessen the
opacity? I haven't seen any advice on how to do this, and I know that
opacity is sometimes a tricky thing in how browsers process it.
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/
__
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] webtool: IE6 CSS Fixer
Hi all, dunno if it belongs here, but since this mailing list is all about css and possible bugs, I think some people will benefit from this. A new tool was released today, automating the ie6 css debug work (at least, to some extent). It takes a main css file, to which it applies a series of selectable fixes. It then outputs a new css file which can be used as a start for the real work. This tool is not supposed to be a miracle solution, but it does fix a good portion of ie6 bugs with one single click. Also, it doesn't output clean and lean ie6 fix css, but that's something you'll have to bear with for now. http://www.onderhond.com/tools/ie6fixer/ Hope this helps :) Greets, Niels Matthijs http://www.onderhond.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] margins & background clipping
> There is no 'one-fix-it-all' solution. Overflow is one option; float, > display:table-cell or inline-block are 2 more options. Hmmm, that's a shame. Should you be wondering why I'm bothering with all this, I've been looking for a good way to work with paddings and margins (trying to find some kind of logic instead of mixing the two depending on my mood). This is what I've come up with so far. http://www.onderhond.com/blog/work/margins-paddings-introduction http://www.onderhond.com/blog/work/margins-paddings-guidelines http://www.onderhond.com/blog/work/margins-paddings-solution1 http://www.onderhond.com/blog/work/margins-paddings-solution2 Sadly, the background clipping is a serious obstacle as it stands in the way of my favored (theoretical) solution. But thanks for the help :) Greets, Niels Matthijs http://www.onderhond.com/blog/onderhond -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Philippe Wittenbergh Sent: donderdag 13 maart 2008 10:18 To: CSS-D Subject: Re: [css-d] margins & background clipping On Mar 12, 2008, at 11:22 PM, Niels Matthijs wrote: > Adding a border on the parent this is an ugly trick because when > changing the background color you need to change the border color > too. Generally I avoid such methods in css. border-color:transparent ? (of course, iExploder v6 doesn't play with that…). >> Or: establishing a new block-formatting context > > That's the overflow trick I've been using, I just wonder if there's > a safe fix that will work seamlessly in all situation. I can add > overflow:hidden but then I can't position anything outside my parent > container anymore ... etc etc. There is no 'one-fix-it-all' solution. Overflow is one option; float, display:table-cell or inline-block are 2 more options. And yeah, IE makes things difficult, depending on the hasLayout status of the parent, the margins on the first-child/last-child come and go. :not(fun) things. Philippe --- Philippe Wittenbergh http://l-c-n.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/ No virus found in this incoming message. Checked by AVG. Version: 7.5.518 / Virus Database: 269.21.7/1327 - Release Date: 12/03/2008 13:27 No virus found in this outgoing message. Checked by AVG. Version: 7.5.518 / Virus Database: 269.21.7/1327 - Release Date: 12/03/2008 13:27 __ 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] margins & background clipping
Hi, > Well I can only take guesses since nothing is clear to me. Maybe this test > case [1] > will possibly help until I can see what the problem is. Why did > you pull the page? I have no idea why you can't reach it, the following link works fine for me: http://users.pandora.be/onderhond/onderhond/paddings-margins-2.html -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alan Gresley Sent: woensdag 12 maart 2008 19:42 To: css-d@lists.css-discuss.org Cc: Philippe Wittenbergh Subject: Re: [css-d] margins & background clipping Niels Matthijs wrote: >> Top padding on the parent element ? >> (border or padding are not 'crappy' solutions to the problem of >> collapsing margins in my book.) > > Well, the question was to fix this without touching the padding/margin method > used. As I'm looking > for a good way to work with margins and paddings I was trying out this > solution. The reason why I > dropped the top padding in the parent div was to have an easier IE6 > stylesheet (no more need to > single out the first child and drop its top-margin). I can't see the page now since you have pulled it but if this is an issue about collapsing margins then this would be effecting IE7. Do you have individual style sheets for IE6 and IE7? > Adding a border on the parent this is an ugly trick because when changing the > background color you > need to change the border color too. Generally I avoid such methods in css. > >> Or: establishing a new block-formatting context > > That's the overflow trick I've been using, I just wonder if there's a safe > fix that will work > seamlessly in all situation. I can add overflow:hidden but then I can't > position anything outside > my parent container anymore ... etc etc. > > Hope I made it a little clearer now what kind of fix I'm looking for. > > Greets, > Niels Matthijs Well I can only take guesses since nothing is clear to me. Maybe this test case [1] will possibly help until I can see what the problem is. Why did you pull the page? [1] <http://css-class.com/test/css/box/margins/iehaslayoutmargins.htm> Alan http://css-class.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/ No virus found in this incoming message. Checked by AVG. Version: 7.5.518 / Virus Database: 269.21.7/1327 - Release Date: 12/03/2008 13:27 No virus found in this outgoing message. Checked by AVG. Version: 7.5.518 / Virus Database: 269.21.7/1327 - Release Date: 12/03/2008 13:27 __ 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] margins & background clipping
> Top padding on the parent element ? > (border or padding are not 'crappy' solutions to the problem of > collapsing margins in my book.) Well, the question was to fix this without touching the padding/margin method used. As I'm looking for a good way to work with margins and paddings I was trying out this solution. The reason why I dropped the top padding in the parent div was to have an easier IE6 stylesheet (no more need to single out the first child and drop its top-margin). Adding a border on the parent this is an ugly trick because when changing the background color you need to change the border color too. Generally I avoid such methods in css. > Or: establishing a new block-formatting context That's the overflow trick I've been using, I just wonder if there's a safe fix that will work seamlessly in all situation. I can add overflow:hidden but then I can't position anything outside my parent container anymore ... etc etc. Hope I made it a little clearer now what kind of fix I'm looking for. Greets, Niels Matthijs -Original Message- From: Philippe Wittenbergh [mailto:[EMAIL PROTECTED] Sent: woensdag 12 maart 2008 14:52 To: CSS-D Cc: Niels Matthijs Subject: Re: [css-d] margins & background clipping On Mar 11, 2008, at 8:27 PM, Niels Matthijs wrote: > This has to do with collapsing margins as giving the parent element > a border also helps. Sadly, these are crappy solutions, I just don’t > want my background clipped there. Any way to avoid/fix this without > touching the method of margins/paddings I’m using ? Top padding on the parent element ? (border or padding are not 'crappy' solutions to the problem of collapsing margins in my book.) Or: establishing a new block-formatting context (css2.1 : 9.4.1 -[1]), such as overflow other than visible, display table-cell, float, display:inline-block, ... Establishing that new block formatting context on the parent element will always contain the margins of the descendant. [1] http://www.w3.org/TR/CSS21/visuren.html#block-formatting Philippe --- Philippe Wittenbergh http://l-c-n.com/ No virus found in this incoming message. Checked by AVG. Version: 7.5.518 / Virus Database: 269.21.7/1325 - Release Date: 11/03/2008 13:41 No virus found in this outgoing message. Checked by AVG. Version: 7.5.518 / Virus Database: 269.21.7/1325 - Release Date: 11/03/2008 13:41 __ 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] margins & background clipping
Hi all, I’ve run into an irritating little problem. I’ve been experimenting with margins and paddings and after some toying around I found a little “quirck” that made the background of my parent div disappear for the given margin: HYPERLINK "http://users.pandora.be/onderhond/onderhond/paddings-margins-2.html"http://users.pandora.be/onderhond/onderhond/paddings-margins-2.html You can check the testpage to see three example that are made using a specific margin/padding solution. The parent element is always padded from three sides, except for the top side. The children all have a top margin. On the test page you’ll see that everything is fine because I’ve added an overflow:hidden declaration on the parent element. If you take that declaration off (Firebug it), you’ll notice that the background will be clipped in FF (and other browsers, though strangely not in IE6) This has to do with collapsing margins as giving the parent element a border also helps. Sadly, these are crappy solutions, I just don’t want my background clipped there. Any way to avoid/fix this without touching the method of margins/paddings I’m using ? Any help would be greatly appreciated. Greets, Niels Matthijs No virus found in this outgoing message. Checked by AVG. Version: 7.5.518 / Virus Database: 269.21.7/1324 - Release Date: 10/03/2008 19:27 __ 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] Request for Comments on this CSS Stylesheet Approach
Hello, This method is not something I would recommend. The possible problems I see: * no full use of caching. A css file needs to be loaded by a browser only once, then it is stored in cache. By adding a separate stylesheet for each page you will lose that speed gain. * what with elements that appear on more than one page, but not on enough pages to put them into the main.css. Do you plan on updating all css files when the style of this element changes? * The fact that you have two css files to check won't make it any easier either. * What about new templates. People will need to create new stylesheets for those, even when no new elements are introduced. When using a tool like Firebug to find css rules, the problem of a big css is limited. Also, using a good editor will fix most of the issues. And of course, there's always the trusty ctrl+F In the long run, I would advise against this method :) Greets, Niels Matthijs -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth Sent: maandag 18 februari 2008 17:09 To: 'CSS Discussion' Subject: [css-d] Request for Comments on this CSS Stylesheet Approach Hi, all. I'd like to know your thoughts on including separate stylesheets for individual pages. I've realized at the start of a pretty large site, including Internet and Intranet sections, that my stylesheet could grow very large and even finding sections of styles for particular pages could be a cumbersome task. What I'm considering is having one main stylesheet, then having supplemental stylesheet for the various pages I will create. E.g., for a particular page, I would have main.css, plus index.css. For announcements, I would have main.css, plus announcements.css. I would be avoiding loading a lot of irrelevant styles for a particular page and make finding style references much easier, too. It seems like the best way to go, but I want to make sure I'm not creating a problem with the technique with which I'm unaware. I can easily specify which particular page's stylesheet is called by using coldfusion and the cgi.script_name variable. Thoughts? Thanks, Rick __ 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/ No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.20.7/1285 - Release Date: 18/02/2008 5:50 No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.20.7/1285 - Release Date: 18/02/2008 5:50 __ 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] paddings and margins inside span
Hello all, I've run across a nasty problem not so long ago. I had a link (a tag) with a span inside. The a tag linked to a pdf file, the span tag contained the size of the pdf file. I put the span tag inside the a tag but wasn't too happy with the spacing between the link text and the extra info. So I tried adding a padding to the span, but that gave problems in IE(6&7) and Opera. The padding was not underlined, which created a nasty effect. I tried doing the same with margins, but the effect remained. I made a test-page for this case: HYPERLINK "http://www.onderhond.com/testpages/inner-link-spacing.html"http://www.onderhond.com/testpages/inner-link-spacing.html I've been looking for solutions and also wrote an article on the subject: HYPERLINK "http://www.onderhond.com/blog/onderhond/inner-link-spacing"http://www.onderhond.com/blog/onderhond/inner-link-spacing If anyone could help me out, it would be greatly appreciated. This bug has been haunting me for some time now and I hate not being able to fix it properly. Greets, Niels Matthijs No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.20.2/1272 - Release Date: 11/02/2008 17:28 __ 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] Spreading list items across total width
Hi, I've been having some problems with a list. I'm using a list as mark-up for my main navigation, the list has 4 items and the 4 items have to be spread evenly across the total width of a container (4x25%). I'm looking for a way to make this work in a liquid/elastic layout. I've tried many things, sadly I haven't found a solution yet. I documented the methods I have tried here: http://www.onderhond.com/blog/work/spreading-list-items I also provided some test pages for each method with a little explanation which browser fails where. Sadly, I haven't found a solid way yet. Help would be greatly appreciated. Greets, Niels Matthijs __ 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] IE z-index problem
IE6 finally got me.
http://users.pandora.be/onderhond/test_IE6_zindex.html
I know what the problem is, but can't seem to find a solid fix. This
example shows the setup I want to achieve in IE6. It's a theoretical
example, but one I can find no solution for, javascript or css. The
XHTML/CSS were kept as simple as possible.
Main div A
Sub div B
Main div C
Sub div D
/* IMPORTANT CSS CAUSING THE TROUBLE */
.top {position:relative; height:7.5em; width:50em;}
.top .sub {position:absolute; z-index:10; left:10em; bottom:-2.5em;
height:3em; width:8em;}
.bottom {position:relative; height:7.5em; width:50em;}
.bottom .sub {position:absolute; height:3em; width:8em; z-index:10;
right:10em; top:-2.5em;}
Note that the position:relative declaration can't be removed. *Any* help
would be greatly appreciated.
Sincerly,
Niels Matthijs
[EMAIL PROTECTED]
__
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/
