Re: [css-d] CSS Sprite Generator
I love using CSS Sprites (http://www.alistapart.com/articles/sprites) But I hate making them in Photoshop. I happen to have one of those essential attributes of a programer (I am lazy). http://lmgtfy.com/?q=sprites+generator -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org __ 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] CSS Sprite Generator
Chetan @Thierry, @David I think the way you answered Sarah's question was insulting and condescending. I think the question was a perfectly valid one. Sure, a Google search would partially provide a solution to Sarah's query, but she asked the question on this list to get *recommendations* from list members. Where did you get that from? This is exactly what she asked: quote Does anyone know of a program that can take a list of files(say 4) let you define the offset values for the basic size of the sprit, Vertical/Horizontal option, and generate the single file to use? /quote So please next time do some homework before you accuse me (or anyone else for that matter) of being rude. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org __ 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] ADMIN: CSS Sprite Generator
Eric, I will reiterate the passage Chetan quoted from the list policies, as well as the text that follows it, because it is always relevant: Above all, if you can't answer with a modicum of respect, or without feeling somehow annoyed by the question, then DO NOT ANSWER AT ALL. I'm dead serious about this. You may have seen and responded to a question six thousand times, but the person asking has only heard it once: when they asked it. They're asking it in order to fill a gap in their own knowledge. Make your answer an encouragement for more questions, not an incentive to unsubscribe. - http://css-discuss.org/policies.html#ask-answer That same section says: My philosophy is that there are two kinds of questions: good questions and unasked questions. Unless I misunderstand the above (which is totally possible), I'd say the original post fell into the latter category. Now if it is of bon ton to remind posters that bottom posting is the list policy, why would it be inappropriate to remind posters that there are questions that would be better not asked? It seems to me that it goes both ways. As a side note, that thread was dead already. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org __ 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] Hello to the Group
Welcome! I am hoping that someone in the group can supply some great tutorials on CSS that will help in my endeavor to become more proficent in CSS markup. http://www.css-101.org /shameless plug -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org __ 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] Browser hacks vs PHP vs JS for browser detection
Is it just a case of using the right tool for the job? It would seem logical to me - if you are using PHP anyway of course - to check the user-agent header and add a class to the body tag? I realise people can change the header sent by their browser, but how many people actually do that? fwiw, I do not use Conditional Comments and I do not do UA sniffing either. I use CSS filters in my styles sheets. Imho, that's where styling belong. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org __ 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] stacked nav in IE7
This is driving me nuts. IE7 the menu is all bad, IE8 only the home
page
menu is bad.
Site: http://www.fargoparks.com/
css: http://www.fargoparks.com/css/home.css
I see these two rules:
#p7PMnav li {
float:left;
}
#p7PMnav li {
width:100%;
clear:both;
float:left;
}
The two first declarations in the second rule create the problem.
You should just get rid of the second rule.
--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org
__
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] stacked nav in IE7
This is driving me nuts. IE7 the menu is all bad, IE8 only the home
page
menu is bad.
Site: http://www.fargoparks.com/
css: http://www.fargoparks.com/css/home.css
For the second rule I mentioned, don't look in the styles sheet, it's in a
conditional comment after the LIs:
!--[if IE 7]style#p7PMnav a{zoom:100%;}#p7PMnav
li{float:left;clear:both;width:100%;}/style![endif]--
--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org
__
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] unable to over ride an li
Try this:
li id=lasta id=donations href=#DONATIONS/a/li
CSS: #container #mainmenu ul li#last {float:right;font-size:1.24em;}
Why going through so many elements? It can't be good regarding performance
and it increases specificity for no reason.
I'd go with a simple: #last {...}
--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org
__
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] unable to over ride an li
Hi Chetan,
Why going through so many elements? It can't be good regarding
performance
and it increases specificity for no reason.
I'd go with a simple: #last {...}
Point accepted. In general, one should keep selectors as simple as
possible, with just as much specificity as one needs.
However, in this case, #last{...} does *not* work see:
http://roughtech.com/t/polar.html
The selector #mainmenu li has to be overridden.
Also, I personally prefer to prefix id selectors with the element
name. This makes it easier for me to read and understand a stylesheet,
I wont have to constantly refer to the html file. For example, I
prefer li#last over #last because at a later time I would know, with
one glance, that the id is on an li.
Imho, using element#id to increase the weight of a rule makes sense, but not
when it is used as a hint to help us read and understand rules. I'd think
/*comments*/ are better suited for that.
Another thought: Is #last really faster than #container #mainmenu ul
li#last ? It appears to me that the latter should be faster because
the browser does not have to traverse the entire DOM tree looking for
#last, it can just start from #container.
That's if browsers were reading from left to right, but they actually do the
opposite.
So consider this:
#mainmenu ul li#last #donations {font-size:1.24em;}
vs.:
#donations {font-size:1.24em;}
With the latter, once they've found the *key selector* (the rightmost one),
they are done! With the former, they need to keep going until they reach
#mainmenu
--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org
__
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] unable to over ride an li
Hi Philip,
Imho, using element#id to increase the weight of a rule makes sense,
but not
when it is used as a hint to help us read and understand rules. I'd
think
/*comments*/ are better suited for that.
I'm afraid I can't agree with that, Thierry : comments indicate
only the coder's intentions; code indicates exactly what he
(or she) has actually written. Well-written code rarely
needs comments; poor code needs an overabundance of them.
Well-written css code means *lean* selectors so a well written styles sheet
should need more comments than a badly written one, isn't?.
These are the two examples posted in this thread:
/* shows best coding practice, but could be hard to find without a comment
*/
#donations {font-size:1.24em;}
/* bad coding practice, but so verbose that it should be easy to find
without a comment */
#mainmenu ul li#last #donations {font-size:1.24em;}
As a side note, such comment has nothing to do with the coder's intention.
--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org
__
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] unable to over ride an li
Well-written css code means *lean* selectors so a well written styles
sheet
should need more comments than a badly written one, isn't?.
With respect, I disagree : you are choosing to interpret well-written
as efficient; I interpret well-written as transparent,
immediately clear to the reader, code that demonstrates clarity
of thought and clarity of expression.
Then following your interpretation, looking at the same example:
#mainmenu ul li#last #donations {font-size:1.24em;}
What is immediately clear to you in that rule?
1. the extra selectors are needed to give enough weight to that rule
2. li is used to differentiate this rule from another one that targets the
same ID, but on a DIV (in another document)
3. all the above
4. none of the above
Imho, with the short version, there is much less guessing. What's clear to
the reader is that we're styling that key selector, nothing more. We are not
messing with specificity and we are not sending mixed signals by pairing the
element with its ID. If we decide to add a comment it is to help authors
spot the element in the sheet and/or document, not to tell them what we're
actually doing. That's because our short selector makes that obvious.
--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org
__
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] CSS-101
http://www.css-101.org Happy New Year! Bonne Année! -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org __ 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] Is it because of my code? [correction]
Felix Miata wrote: I stand firm that px is an inappropriate unit for sizing containers for text content. Not everyone in the universe is thrilled at having to scroll both vertically and horizontally in order to read a scaled web page, either. fwiw, I prefer increasing text-size to zooming a page for the very reason that the former does *not* create a horizontal scrollbar (with px sizing). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] The CSS Position Property
Hi Chetan, I thought this article could be of interest to this list: http://www.yuiblog.com/blog/2010/12/14/the-css-position-property/ That's a nice informative summary of positioning. It would also be worthwhile mentioning that absolutely and fixed positioned inline elements can be sized with width and height declarations. I believe the article says that already. Check the first bullet point in the Things to remember about position:absolute. It says: For *any* 'absolute' or 'fixed' positioned element the computed value for display is block. Thanks a lot for your feedback. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] The CSS Position Property
I thought this article could be of interest to this list: http://www.yuiblog.com/blog/2010/12/14/the-css-position- property/ I believe the article says that already. Check the first bullet point in the Things to remember about position:absolute. It says: For *any* 'absolute' or 'fixed' positioned element the computed value for display is block. Yes, I noticed this later. One point which I think is not mentioned in the article is: On absolutely and fixed positioned elements, the computed value of float is none, regardless of any float declarations. Good point, I forgot to mention this in the article. Thanks! -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] The CSS Position Property
I thought this article could be of interest to this list: http://www.yuiblog.com/blog/2010/12/14/the-css-position-property/ -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Make text bottom-align?
Chetan Crasta wrote: I have made an example of the design here: http://roughtech.com/t/testali.html It uses CSS only. I believe what the OP is after is inline-block: http://www.yuiblog.com/blog/2010/11/15/inline-boxes-with-bottom-alignment/ As a site note, table-cell would work too, but it requires more markup -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] crashing redmond
Hi David, Signature link crashes IETester 6/7/8 on Mac OS X 10.4 running Parallels XP. I find this delightful and rather amusing:-) . Checks on native boxes appreciated. Working fine in ie7/8/9 on Win7 And ie6 on Virtual PC -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: does anyone know of...
A CSS-only lightbox will have many limitations. You cannot have the same functionality as the example you gave, with only CSS2. However, here is one good implementation of a css-only lightbox http://www.cssplay.co.uk/menu/lightbox-hover.html fwiw, I would not call this solution a good implementation. It is not keyboard accessible, it loads all the assets at once (versus on request), and wrap four block-level elements in each anchor (not a problem in HTML5 I believe). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] hasLayout triggering best practice
Hi Georg, Myself, I use any property/value that gets the job done, whenever I need to trigger hasLayout. Loss of validity because of proprietary IE CSS isn't more problematic than use of some mos-, webkit- or o- proprietary CSS ... IMO. I do not care much about CSS validation, but I see a difference between using a proprietary property like zoom and using vendor-specific extensions [1]. Because these are part of the grammar, they are known to the CSS parser: '-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful name But I agree with you, I don't see this as problematic. [1] http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: hasLayout triggering best practice
If having valid stylesheets is important, one could simply apply zoom using javascript: object.style.zoom=1; But then your presentational layer is bound to the behavior layer :-( -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Span Style Inside Div with PHP Code
Everything I've research tells me this ought to be valid, but the span style seems to have no effect. div class=registercolright span style=padding-top:20px; ?php // some code that writes an unordered list ? /span /div !-- close registercolright -- vertical padding will not create vertical space on inline elements -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Span Style Inside Div with PHP Code
Hi Bill, Many thanks, Thierry. Will settle for additional classes. Actually, you should not have a list/list items in that span. So rather than adding a class you'd better replace that span with a div (which will take the padding). As a side note, do you need that additional wrapper? Can't you style registercolright with some padding-top? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz div class=registercolright span style=padding-top:20px; ?php // some code that writes an unordered list ? /span /div !-- close registercolright -- vertical padding will not create vertical space on inline elements -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Span Style Inside Div with PHP Code
Not only can you apply multiple classes to elements, you can also
select elements with both classes and apply styles to only things with
both.
For example:
.column {width: 48%}
.left {float: left}
.left.column {
border-right: 1px solid #333;
padding-right: 1em;
}
Note the lack of a space in the last selector.
Be aware that this does not work in IE6. This browser sees the above as:
.column {width: 48%}
.left {float: left}
.column {
border-right: 1px solid #333;
padding-right: 1em;
}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] Re: hasLayout triggering best practice
These don't seem to be huge disadvantages: I can't think of a good reason to surf with Javascript disabled. According to a recent blog post from Nicholas Zakas (Yahoo!) about 2% of users browse the web without JS. As a side note, I don't think it is always their choice. Also, since the majority of sites use some Javascript, one should expect some problems if one disables it. fwiw, I don't agree, if the page is built with progressive enhancement in mind, there should be no problem. The page may look less sexy, but there should be no problem per se. And the first step toward progressive enhancement is to respect the separation of the three layers. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] IE positioning question
CCing the list -Original Message- From: Debbie Campbell [mailto:d...@redkitecreative.com] I understand - the site is a very strange development-only site with some serious issues (not my site). The image isn't in the footer, will changing the footer affect it or did you mean sidebar? I didn't know you're talking about *that* image, I thought you're talking about the Jacobi one. The one which shows with a slight offset depending on browsers. The other one shows at the top of the sidebar in IE, correct? That difference is due to the fact that in IE you're using position:absolute instead of position:relative (which you use in other browsers). In any case, you should not use position for almost everything on your page. It adds a lot of complexity without solving any problem. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] IE positioning question
In this page:
http://www.redkitecreative.com/projects/billiards/inside_best_billiards
.php
The image below the menu is a pixel or two off. I've tried correcting
this with a conditional comment, with margin or absolute or relative
position, with no luck:
#sidebar img.rotation-img { position: absolute; left: -2px; }
Suggestions greatly appreciated.
You have a *really weird* construct.
I'd remove all the positioning declarations in #footer and its children and
start with a simple float.
By keeping things simple, you'll get something much more robust.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] Re: [css-d Is this proper use of div tags?
Example D http://www.alistapart.com/d/css-positioning-101/example_d.html shows our new markup. Because of the new coordinate system, the blue block measures its offset 200 pixels from the left of the red block (|#box_1|) instead of the document. Yes, and by placing #box_2 as a child of #box_1, it's default position within the flow changes. Because it shares a y-coord in common with #box_1, it shows up as adjacent to #box_1, as Example D clearly indicates. Perhaps is wording isn't the best, but the example supports his logic. Copying your post: the blue block measures its offset 200 pixels from the left of the red block (|#box_1|) instead of the document. The red box *and* the document have nothing to do with the offset of that box. Imho, the example should not demo his logic, but rather how things work... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: [css-d Is this proper use of div tags?
Hi Tim, The red box *and* the document have nothing to do with the offset of that box. Not entirely true. Yes, the blue box is offset in relation to where it would be without position. But where the blue box would be depends directly on other elements (previous siblings and parents, i.e, the red box, and the document). and since we're only changing the left position, the only thing that affects that is the document, making the offset in relation to the document a fair statement. I don't think you can explain relative positioning that way, because that's true for any positioning value, but fixed. The offset (200px in that example [1]) is not in relation to the document. If it was the case, a left-margin or a left padding on the reddish box should have no effect on the blue box. If such styling has an effect on the box, it is because that blue box is offset from *its* normal position in the flow. *its* position, not the position of siblings, or document, etc. That's the reference point for the 200px, nothing else. [1] http://www.alistapart.com/d/css-positioning-101/example_d.html -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] OK to insert block-level tag inside div?
This is related to my question yesterday about proper use of div tags... I now get that an ID must be used only once on a page. Within div tags (from code generously provided here) I've been able to format specific bits of content, like text, using classes and span tags. But I'd like to ad a dotted line between to paragraphs, and that seems to me to be a block-level tag required to do it. Is this correct? Yes, but paragraphs are block-level elements, so simply give a class to one of the paragraphs to create that border. One thing you'll notice though, is that once you apply a border to a paragraph its margin will not collapse with the margin of its sibling (see margin collapsing). Can I throw in a br and apply a border-bottom to that or is that considered bad coding? Bad coding, yes :) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] OK to insert block-level tag inside div?
Yes, but paragraphs are block-level elements, so simply give a class to one of the paragraphs to create that border. One thing you'll notice though, is that once you apply a border to a paragraph its margin will not collapse with the margin of its sibling (see margin collapsing). Before somebody points this out: This won't do anything regarding margins collapsing as the border would not come in between the two :-) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: OK to insert block-level tag inside div?
OK..Here's a link to a graphic showing the dotted line and its
position which I'm after:
http://thinkplan.org/workshop/pix/dottedline.jpg
Try this:
.myParagraph {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #333;
}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] Re: OK to insert block-level tag inside div?
OK..Here's a link to a graphic showing the dotted line and its
position which I'm after:
http://thinkplan.org/workshop/pix/dottedline.jpg
Try this:
.myParagraph {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #333;
}
thanks, Thierry;
looks similar to something I fiddled with just before your email
arrived:
.dotted {
border-top: 1px dotted #000;
padding: 8px 0 0 0;
}
Now, in yours, why margin-top AND padding-top of 10px? Isn't padding-
top: 10px; enough by itself?
The padding is what creates the gap below the border, the margin is what
creates the gap above the border.
You may have the space above the border already created by the bottom margin
of the previous sibling, but in any case, that should not matter because of
*collapsing margins*, hence that value will not change anything if the gap
already exists (via margin). Because these two margins will collapse.
It would be different if that gap was the result of bottom padding on the
previous sibling.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] Re: OK to insert block-level tag inside div?
Zounds! I believe that I understand that entire paragraph! but why, then, after I add a margin-top: 8px to my code, does that paragraph go wider? By wider, I mean that it widens to the width of the parent div which contains all that stuff...the small head, the big head and date the dotted line and the blurb paragraph, now enclosed by my p class=dotted The top margin should not create a issue like that. Did you check that you did not make a typo? Did you validate your code? Sometimes that helps. Or post a URL, that helps too ;) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: [css-d Is this proper use of div tags?
Hi Alan, The article fails to mention about how position:relative can generate a new containing block for descendants elements with a position value of either absolute or fixed. I believe this is true for absolute, but not for fixed as for the latter the reference is the viewport. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: Is this proper use of div tags?
Hi David, My goal is to have a container div with a title at the top, an image at the left, inside the container, and text describing the image at the right, inside the container. Absolute positioning is problematic [brittle among other things] for the base layout. Use a float based layout. I second that, that's why I was really surprised to run into this article on ALA: http://www.alistapart.com/articles/css-positioning-101/ :-( -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [css-d Is this proper use of div tags?
Hi Felix, http://www.alistapart.com/articles/css-positioning-101/ Seemed interesting, until I got to the 5th reference to an invisible example. Where are they hidden, some offsite adserver/image host? I lost my webdeveloper extension by upgrading my primary browser to a Gecko 2.0b. quote A coordinate system is a reference point for offset properties. Recall in example C, our blue block (#box_2) is not sitting inside of any other elements, so the coordinate system it's using to offset itself 200 pixels from the left is the document itself. If we place the #box_2 element inside of #box_1, we'll get a different result, as #box_2 will position itself relative to the coordinate system from #box_1. /quote This is plain wrong. Relatively positioned elements are not positioned in relation to a containing block, but offset in relation to their own default position in the flow. That #box_2 box would be at the same x coordinate if it was moved into #box_1. This article is not going to help people understand how things work. It is going to confuse them and make them believe that it's a good idea to use position for layout. :-( I like the way the author writes though... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Can this stretch be made to work in IE6?
http://www.galaxywebsitedesign.com/temp/test.html The above link works for Firefox 3.6.12, IE8, Safari, and IE7. Is it possible to make this work in IE6? The idea is to stretch the pseudo-background image. Works for me in IE6. But I don't think you need that div. Did you try to style the image itself rather than wrapping it in a div? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Vertical-Align, IE, line-height, and span don't mix
Jukka K. Korpela wrote: In IE, the superscript mucks up the borders and margins -- it's as though the element block goes up and never comes back down when I close the superscript. zoom is a CSS fix for the original test case, using sup is a different story. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] faux column issue...
I am working on a simple site that has columns and lines to divide the columns. Perfect for faux columns as the columns aren't equal depth. Anyway, when I put the background image in my page-wrap div, it shows up fine. When I put it in the background of the content div (because I want the line to not butt into the banner image) it won't show up. Not sure why. If anyone cares to look, go to http://ba-doyn.com/junk/ and check it out. If you look at the css, you will see I have commented out on the page-wrap div in case you wanted to toggle back and forth. Leave the image where it is right now and apply a white bottom border to the banner (#banner) That will do it -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Box Model and Background-image
In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? I believe it is the border box (content + padding + border) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: faux column issue...
Hi David, I think that Michael is talking about the background-image on div#content. It does not show because the three columns it contains are floats. Any containing floats method on div#content will make the background-image show up: Your post made me take a closer look at that page and it turns out that there is something really interesting going on there... Michael had a background image on the main wrapper (commented out) so my suggestion was to fix the issue using the main wrapper, allowing him to get rid of the content wrapper. That wrapper was useless since the footer was clearing the floats, right? In fact, *nothing* clears the floats :-) If the footer stays in place it is only because of a large image (960px) that comes after the floats. You remove that image and everything after that elements goes bye-bye. So Michael should keep the content wrapper and then read the article you posted ;-) Or use the footer to clear the three floats. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: Box Model and Background-image
In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? I believe it is the border box (content + padding + border) No, the default is the padding-box: Thanks Philippe, In my mind we're talking background, not just background images. The background-color is painted in the border box, but yes it would not make much sense to have the background-image within the same boundaries. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Positioning and spies
I have been agonizing over this spry for a week... It worked like a charm! At http://138.26.120.126/CAMAC/Trial21.html: (1) I cannot tell why the submenu in the vertical navigation bar doesn't show all of a sudden. (2) I am still having problems understanding the positioning term. I cannot get the left side bar all the way to the horizontal navigation bar or to the footer. There is always a white slice of background showing. I will greatly appreciate your help. Two of your js files return 404 I used one of your CSS file as an example, you need to take care of the other assets -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Positioning and spies
Any idea what I could do about the highlighted problem 2 below?
Change this:
.LastUpdated {
color:#2B;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
font-style:italic;
}
To this:
.LastUpdated {
color:#2B;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
font-style:italic;
margin-bottom:0;
padding-bottom:10px;
}
To understand why, search for collapsing margin.
For the top part, remove the br you have before sidebar.
As a side note, your construct is really weak, I'd start from scratch. And
you should not use p or br to create vertical space.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] Vertical-Align, IE, line-height, and span don't mix
Here's my current nightmare:
http://datagnostics.com/test/vertical.html
I've got superscript text that needs to be all over the page -- it's
part of the company name. I set a line-height in BODY. I'm doing the
superscript via a span class, with attribute vertical-align: super.
In IE, the superscript mucks up the borders and margins -- it's as
though the element block goes up and never comes back down when I close
the superscript. If I set the element to line-height: normal, this
stops. HOWEVER, if the element is inside an li (not a ul), line-height:
normal doesn't fix it.
You need to help IE by giving the parent a layout.
Try h3 {zoom:1;}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Spries
Your css file is here: http://138.26.120.126/CAMAC/SpryAssets/SpryMenuBarVertical.css But you link to: http://138.26.120.126/SpryAssets/SpryMenuBarVertical.css via link href=../SpryAssets/SpryMenuBarVertical.css rel=stylesheet type=text/css / Try: link href=/CAMAC/SpryAssets/SpryMenuBarVertical.css rel=stylesheet type=text/css / -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Ada Elgavish Sent: Wednesday, November 10, 2010 6:33 PM To: David Laakso; css-d@lists.css-discuss.org Subject: [css-d] Spries Hello, In Dreamweaver (Live View), the spry looks exactly as I want it to look. When I upload the file and the Spry assets to the server, the webpage displays in the browser as a list instead of the cool spry. See at: http://138.26.120.126/CAMAC/Trial21.html Could you help? Thanks. Ada __ 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] evenly spacing
Hi Alan,
Hello Theirry,
It seems that zoom does something in IE7- which I do not understand.
Can anyone explain? This would mean using something like this.
li {display: -moz-inline-block; display: inline-block; width:100px;}
*+html li {display: inline; zoom: 1;} /* IE7 */
* html li {display: inline; zoom: 1;} /* IE6 */
Philippe already explained why zoom works while height or width wouldn't.
But, I'd like to say that the above rules could be replaced with a simple,
much shorter:
li {*display: inline; zoom: 1;}
Imho, there is no need for the *+html and * html hacks as zoom will not
validate anyway.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] Re: evenly spacing
li { display: inline-block; width:100px;}
*+html li { display: inline;} /* IE7 */
* html li { display: inline;} /* IE6 */
Yeah, I'm aware of that page, and it _should_ always work - display:
inline-block sets the 'hasLayout' flag, and that flag is not / cannot
be reset by the subsequent 'display: inline' [1].
However, a couple of times I've seen IE 7 refuse to play along, and
adding 'zoom:1' for IE 7 (and 6) was the only way to force it to
comply.
I ran into the same issue in the past. zoom:1 was the only way to make
things work.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] right column to extend all the way (and funny video)
I have a 2 column layout. I want the right column (with funny video) to extend all the way down to the footer regardless of content. Does anyone see what I am doing wrong? http://www.successseriesllc.com/new.php This should help: http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borde rs-and-negative-margins-with-css/ No image, no extra markup, no CSS3, no pseudo-classes, no Javascript, no absolute positioning... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] evenly spacing
Hi Alan, problems with a layout I was working on. I have a horizontal menu that I was using an UL list, this worked in firefox, but not completly in IE 7/8 and various others. they kept going into a vertical list despite using things like display: inline-block, so I decided to remove the links from the UL tags and just use the link, now I can't figure out how to work with the tag to move the links around or resize them etc. this is the site: http://dmcentral.net/simple/ This simple answer is floating the as. Firstly since they will behave as display:block in which a width can be applied and secondly, floating will allow them to sit side by side. BTW, IE8 does not have the behavior you say it does. For a ul or ol, display: inline-block will render the list items vertical in IE7-. There are two options that are cross browser friendly. 1. Setting display: inline on this lis and setting the as to display: block in which a width can be applied. I don't think so, the links would stack. One way to mimic inline-block in IE 6/7 is to style elements with: display:inline;zoom:1;width:whatever; Making sure to not give a layout to nested elements. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Aligning a floated image with the top of following text
Part of the way into revising my little site, I noticed that the top edge each floated image was about four pixels above the top of the capital letter(s) of the text that immediately followed. I found a solution; using padding to push the image down a bit. But I never understood why that four-pixel disparity was there in the first place? http://www.keithpurtell.com/kthings/atget.htm This space is called half-leading. It is half the difference between the value of line-height and font-size. If the image does not have the same space above it, it is because leading is not applied to replaced elements. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] css with js disabled
Hi David, uri: http://chelseacreekstudio.com/fa/ css: http://chelseacreekstudio.com/fa/css/sisu.css In this rough layout -- when viewed with javascript disabled -- digits 2 through 8 ought to be stacked vertically and flush left to the red rule. What to do? What about using a list for these numbers? Followed by the divs. Each one being a jump link to the related image. With JS off, you would only have to un-float the list items. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] css with js disabled
David Laakso wrote: uri: http://chelseacreekstudio.com/fa/ css: http://chelseacreekstudio.com/fa/css/sisu.css In this rough layout -- when viewed with javascript disabled -- digits 2 through 8 ought to be stacked vertically and flush left to the red rule. What to do? if I understood you correctly. I think it's me who didn't understand the question. I thought David wanted the numbers below each other... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Spry problems
filter:alpha(opacity:0.1); filter:alpha... is proprietary Internet Explorer syntax/functionality. If it serves a purpose - makes IE behave as it should - it should be kept in the stylesheet no matter what the CSS validator says. fwiw, I totally agree (my only issue with filter is related to performance), but as a side note I find the value odd. Why not 0 instead of 0.1? The value here should not match the value of the CSS property since for IE it goes from 0 to 100. So the 0.1 above does not represent 10%, but 0.1% -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Image placement issue in IE
Hello everyone, i'm trying out yet another idea for my new website! The accordion menu works fine on all browsers but i'm having a problem with the images not floating correctly, for example on the About link, on the right and text not sitting side by side to it on the left in Internet Explorer. Works fine in Safari, Chrome, and Firefox, just not IE. Anyone have any advice on how i can rectify this problem? Any thoughts on the website itself would be greatly appreciated as well if anyone is interested. http://dvpwebdesign.com/ This is because you're styling the P with a width which triggers hasLayout. In IE, you end up with two block formatting contexts next to each other; so because of its width, the second one can't fit next to the other. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] z-index issue in IE7
http://www.redkitecreative.com/projects/performance/contact-us/
if you hover on Browse Our Inventory, in IE7 the hovered menu is hidden
behind the #maincontent div.
I tried this:
!--[if IE 7]
style type=text/css
#maincontent {z-index: 10;}
ul.menu li:hover ul, ul.menu ul li:hover ul, ul.menu ul ul li:hover
ul {z-index: 1000;}
/style
![endif]--
But no. Can someone please help?
This is because in IE position:relative alone creates a new stacking
context.
So I'd add:
z-index:1 to the .menu-primary-menu-container rule and I'd *remove* the
z-index declaration from #maincontent
As a side note, there is no reason to put this in a Conditional Comment
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] z-index issue in IE7
Oops - I spoke too soon. I fixed the Flash-overlapping-the-menu issue, but I have one last problem in IE7 only. The image scroller (#mainscroll) is also overlapping the menu. I tried a z-index but not working, it's this page: http://www.redkitecreative.com/projects/performance/ We were a few to suggest a solution. Did you try all of them? I believe the styling in my previous email should fix your issue across the board. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Question about auto
given this snip of code:
div#container {
margin: 15px auto;
}
is auto enough to make the contents of that div remain centered
from left to right as the end user scales their browser window larger
and smaller?
No. You'd need to set a width too.
This is the excerpt of a presentation I gave a couple of months ago. It may
help you understand the concept behind auto:
The horizontal position and size of a non-floating, block-level element is
determined by seven properties: margin-left, border-left, padding-left,
width, padding-right, border-right, and margin-right.
The sum of these seven properties is always equal to the 'width' of the
parent element.
Three of the seven properties can be set to auto: these are margin-left,
width, and margin-right.
For replaced elements, a value of auto on 'width' is replaced by the
intrinsic width, so for them there can only be two auto values.
If exactly one of margin-left, width, margin-right is auto, the UA will
assign that property a value that will make the sum of the seven equal to
the parent's width.
If none of the properties are auto, the value of 'margin-right' will be
assigned 'auto'.
If more than one of the three is auto, and one of them is 'width', then the
others ('margin-left' and/or 'margin-right') will be set to zero and 'width'
will get the value needed to make the sum of the seven equal to the parent's
width.
Otherwise, if both margin-left and margin-right are auto, they will be set
to equal values. This will center the element inside its parent.
If auto is set as the value for one of the seven properties in an element
that is inline or floating, it will be treated as if it were set to zero.
HTH
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] Re: How-to prevent a float drop in ie6
On 10/29/10 1:42 AM, Thierry Koblentz wrote: This article shows how to make IE6 behave (almost) like modern browsers: http://www.yuiblog.com/blog/2010/10/28/css-quick-tip-how-to-prevent- a-float- drop-in-ie6/ Thanks! As always, most helpful. Nevertheless, there comes a time when to give it up and move on -- may be more relevant... Actually, I think trying to fix IE6 quirks is a good way to understand/learn CSS. For example, using negative margin in IE6 makes you look into position:relative which in turn makes you look into stacking contexts. And hasLayout teaches you a lot about block-formatting contexts. Fixing the double margin bug on a float via display:inline teaches you about computation. Fixing the italics bug teaches you about overflow. Using hacks to mimic position:fixed teaches you the difference between background on HTML versus BODY. etc. etc. In short, IE6 taught me more about CSS than any book out there :) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] How-to prevent a float drop in ie6
This article shows how to make IE6 behave (almost) like modern browsers: http://www.yuiblog.com/blog/2010/10/28/css-quick-tip-how-to-prevent-a-float- drop-in-ie6/ HTH -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: how can I align input and select elements
How can I align the input and select form elements in my test case,
so
that their horizontal borders are aligned and all text including
labels is aligned to the baseline?
What exactly do you want to do? Do you want the fields stacked on top
of each other? Then put each in ap (or other block-level element
likediv/div).
form action=Submit method=post
p
labelSexselectoption value=
selected=selectedSex/option/select/label
/p
p
labelDate of Birthinput type=text value=Date of Birth
//label
/p
/form
I'd use explicit labeling with for attributes instead of wrapping the
controls like that.
... or simply unwrap the inputs from the labels and add this rule:
label { display: block; }
Note that it would work the same without changing the markup by styling the
controls rather than the labels
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] layout problem? maybe a float problem?
I have a layout problem here: http://www.glitterlemonade.com/fundraiser/detail/monsters_magnetic_figu res On other pages on the site, the footer behaves and shows up under the rest of the content, but not on this page. Here it is OK: http://www.glitterlemonade.com/get_involved In general the footer, when I added it to the site at the end, was showing up in weird places and not always with the same spacing above it. I suspect it has to do with not clearing floats properly but I can't get to the solution. You may want to rethink your construct. After your homepage_maincontent box I can count no less than *four* elements with clear:both, but what are they supposed to clear? I can't find a float in there... You'd be better making the above container a float rather than a absolutely positioned div. And even if you do that you can still remove all the clear:both in there, as you should be able to contain that float inside #container via overflow:hidden;zoom:1; or any other new block formatting context trigger. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: sprite menu
I have: a) corrected the markup. b) contain the floats with overflow property applied on the ul. c) give a explicit width to the ul so that, the out of the flow element could not go more upper then what it should. Seems to be ok now. http://www.occ.nuvemk.com/CssMarcio/secundariaOcc2.html fwiw, I'd not use negative text-indent as it fails miserably with image off. I prefer to use this technique, which allows the use of a sprite: http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_t echnique.asp As a side note, because of the font you're using, you could also make the image *scalable*: http://tjkdesign.com/articles/tip_5.asp -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Sprite technique question
On a sprite technique we often see something like this:
#menu li a {
background:url('image/menu.png') no-repeat;
width:100%;
height:100%;
display:block;
}
Why, when we set the display to block, the width and height properties
seem to realise the background image presence and, because of that,
the width and height setted to 100% will exactly fit the background
image size?
To be more clear - I'm not properly getting the relation between this
triad: background image, display:block; and width or height.
As are inline-level elements so width and height do not apply unless you
style them as block-elements.
Note that the background shows in both cases, it is just that the box is
bigger once it is styled as block.
The width does not have to be explicit though as by default the value is
auto and it will fill the parent container.
And height:100% is not a sure thing ;-)
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] nav link states
What is the state called when I click on one of a number of links on a navbar and while I am visiting that page, the link stays lit so that if I forget where I am, I need simply glance up at the navbar to see where I am? And the million dollar question is: How do I style such? You could take this approach: http://www.tjkdesign.com/articles/navigation_links_and_current_location.asp If you use Dreamweaver, check this: http://divahtml.com/products/divaGPS/current_menu_location.php -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] menu text/image buttons not working in IE7
On this page (this VirtueMart cart, actually), the menu buttons are screwy in IE7: http://beverlylanzetta.net/retablos.html If you check in a modern browser you'll see they're wide-ish image backgrounds. Can someone tell me how to fix them? I'd not float the UL (nor the LIs), I'd not position everything in there, and I'd not use display:block on the links either. Instead, I'd go with: 1. text-align:center on the list 2. display:inline on the LIs 3. the background image on the links (not the LIs) 4. zoom:1 on the links The key is to keep things *simple*. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Possible webkit bug with overflow and width
This markup shows my problem: Webkit browsers seem to create an erroneous width on overflow:hidden elements inside of overflow:hidden elements, when their width is set to 0. Interesting bug. But I see it differently. Webkit creates an erroneous width for the parent, not for the element with a 0 width. The DIV shows as green, right? Not as red (background color of the nested DIVs). Also, try to reduce the test case and you'll see that overflow:hidden does not have anything to do with this. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] address element with classes
I'm trying to address an LI which has two classes (it's part of the
nav):
li class=page-item-7 current_page_item
Is there any way to address the li ONLY when it has both these
classes? On other pages, it has a different combination of classes.
Yes, you can use the selector below, but note that it won't work in IE6:
.page-item-7.current_page_item {}
Because ie6 will only see:
.current_page_item {}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Clearing a float
Thanks Thierry - I'll give that a shot. Do I have to remove the float from the #leftSidebar nav then? No, you'd leave the float in. The idea is to create two block formatting contexts. The float declaration does this for the left column, the rule I sent you does this for the right column. Note that you could also float both columns. That would work more or less the same. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: Clearing a float
Hi Philippe, I don't think inherit is a proper value for clear. it is: http://www.w3.org/TR/CSS21/visuren.html#flow-control I had checked CSS pocket reference (Eric Meyer/O'Reilly) and it says in there that inherit is not. I have a more recent version of this great little book, but for some reason I can't find it. I'd be curious to know if this has changed in the newer edition. It's interesting though. This new value came in now that authors use clear even less than before as they now contain floats more than they clear them. Thanks for the heads up. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: Clearing a float
I don't think inherit is a proper value for clear. it is: http://www.w3.org/TR/CSS21/visuren.html#flow-control It's interesting though. This new value came in now that authors use clear even less than before as they now contain floats more than they clear them. Does it do anything though? If you clear the parent left, and then the children inherit it, isn't the behavior the same as if they don't have clear set at all? Since the parent is already below all the floats, the child would also be below all the floats and clear would be redundant... For example the parent could clear some float (siblings) while the child would clear nested ones. I never really thought about it though since this inherit value is new to me. I guess there are some edge cases where this could be handy, but I'm not sure... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Two nested list problems
Re: http://www.draftingservices.com/autocad_tutorials.html
I'm trying to accomplish two things, and have been failing.
1. Stop my nested list from inheriting the text decoration and cursor
styling. (I got this to partially work, but removed the code because it
didn't work completely.)
2. Get my nested list indented.
My nested list is under AutoCAD Tutorials.
Can anyone help?
Try this:
#navlist #subnavlist li a {
padding-left:20px;
text-decoration:none;
cursor:default;
width:auto;
}
I wonder why you'd want to remove the cursor styling though
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Two nested list problems
2. Get my nested list indented.
Wrote: Thierry
Try this:
#navlist #subnavlist li a {
padding-left:20px;
text-decoration:none;
cursor:default;
width:auto;
}
Thanks Theirry. I'm one step closer though, and learning, but not there
yet.
I'm trying to get AutoCAD Tutorials and the nested link under it to
behave
just like the other links in the list. Make sense now?
Nope, because you said earlier My nested list is under AutoCAD Tutorials,
hence that's what the rule I sent targets.
Because that nested list contains a single item AutoCAD Tutorial Basic
Training Video 1
Sorry, I have no clue what you are trying to achieve.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] nav help
how do I give this to each link?
so that the last one does not have the white boarder on the right?
thanks a bunch
Do as I suggested in my previous email (see my edits of your #navcontainer
ul li a {} rule).
Then add a class to the last link and use that class to create a rule that
resets the border styling.
For example: #navcontainer .lastChild {border:0}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Clearing a float
I have a float that is giving me problems. You can see a test page
here:
http://test.magnoliasonline.com/public/gallery/before_after
This particular page is simply groups of thumbnail images. My plan was
to
have a hr in between the groups to show that they are separate.
However,
when I add a clear:all to the hr tag, it is actually clearing the
floated left column. So it pushes my next group down the page.
This is because of your construct.
Instead of this:
#content {
margin:0 0 40px 180px;
padding:10px;
}
Try this:
#content {
display:inline-block;
margin:0 0 40px;
padding:10px;
width:783px;
}
That way your main content creates a block formatting context [1] in which
you can freely clear floats
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Clearing a float
Di you by any chance used any one of the following to fix this: clear: both; clear: left; clear: none: clear: right; clear: inherit; I don't think inherit is a proper value for clear. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Trouble with overflow:hidden and absolute hover elements
On 9/26/10 9:25 AM, mrebenti...@comparat.de wrote: Hi, I have some container for column and formular design. The div container need the overflow:hidden attribute. Alabel has a CSS hover definition and shows a hidden help information. This bubble help was cut by the parent containers with overflow:hidden definition. The bubble help is absolute positioned. Does someone know, how to avoid this kind of clipping? [code snipped] I'm guessing that the AP help is partly outside the DIV that has overflow: hidden; on it? I'm also guessing you are using overflow in order to contain floats. With these bold assumptions, I suggest using something other than overflow: hidden; to contain floats, as anything inside, positioned outside, will have the overflow--umm--hidden. As a side note, this is not always true as it depends on the containing block. See: http://www.tjkdesign.com/lab/clearfix/overflow-and-ap.html -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] nav help
Can anybody please let me know how to make the purple horizontal navigation to go all the way to the right. So that there is no empty space after the Mercantile link. http://www.moscowfood.coop/design_new/index.php?nmx=2_0 css is here: http://www.moscowfood.coop/design_new/coop.css Many thanks. In what browsers? Because I checked in ie6 and FF and it goes al the way to the right -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] IE9 beta check - floats with inline content bug
Hi Alan, I was wondering I can please get a check up in IE9 beta to see if it has the following bug that I can see in IE9 preview. http://css-class.com/test/bugs/ie/9-beta/floats-with-inline- content.htm I looked a the page side by side in ie9 and FF and things seem to look the same. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] nav help
Can anybody please let me know how to make the purple horizontal
navigation to go all the way to the right.
So that there is no empty space after the Mercantile link.
http://www.moscowfood.coop/design_new/index.php?nmx=2_0
css is here:
http://www.moscowfood.coop/design_new/coop.css
Many thanks.
Thanks for the screenshot, now I see what you mean
In browsers that support it you can use display:table/table-row/table-cell
Or you can give a width to the links you're floating.
For example:
#navcontainer ul li a {
background-color:#532F64;
border-right:1px solid #FF;
color:white;
float:left;
padding:0.2em 0; /* zero out left/right margins */
text-align:center; /* add this */
text-decoration:none;
width:101px; /* add this */
}
Then remove the border on the last link
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] clearfix without collapsing margins
This may interest those who rely on clearfix to contain floats: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-dem ystified/ -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Ghost space between DIVs
Hi ! I can't figure out why their is a white space between the two last
block of my webpage, they are not on the same master div and they act
like
ghosts !!
If the block at right Derniers messages du forum grows, the block
Comprendre dotnetnuke rapidement at left is pushed down. ... does
anyone
have a suggestion ? I am using Chrome on Mac OSX
Link : http://bit.ly/aGKQiZ
Screenshot : http://img59.imageshack.us/img59/6968/20100927235937.jpg
In yellow, the white space I would like to kill.
C'est normal :)
You are clearing two floats in the left column using div
class=clear/div
And your rule for that class is .clear {clear:both;} so what's happening is
that you are clearing the right column as well ;-)
A quick/easy fix is to replace both with left.
A better fix would be to get rid of the empty div you're using and go with a
technique that contains floats without structural markup.
You could try:
#dnn_ctr414_ContentPane {
display:inline-block;
Width:520px;
}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Legal format lists
Thanks for that. I had (mistakenly) assumed that it wasn't necessary to refer to the DTD explicitly and that each flavour of HTML was fully defined. BTW, switching my doctype declaration to 4.01 strict and then running the page through W3C's validator jogged my memory as to why I've stayed with the transitional standard: the target attribute of the anchor tag is deprecated and my pages often have 'target=_blank' to open content in a new window without resorting to JavaScript. Try !DOCTYPE html PS: as Duncan suggested you can still use a OL if you simply remove the markers from the list items (I'd missed that in my example). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Legal format lists
lispan class=num2.1.1.2/span It shall be construed a
crime
against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./li
...and then float or position the classed 'span' next to the list
item. I'd probably try positioning first, actually. Something along
these lines:
ol.legal li {position: relative; padding-left: 7em;}
ol.legal li span.num {position: absolute; top: 0; left: -7em;}
The numbers there are just wild guesses, so adjust to taste; and I
imagine there would be a bit more needed to fine-tune the placement
and appearance of the numbers. But I think that basic approach
should work for what you're trying to do.
---
Thanks for that (and to Dave also). FWIW, I tried taking a look at
what Wikipedia have done with the table of contents on
http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style_%28lists%29 as
I assumed the numbering was done using CSS. However, I now see that
they've pretty much done as you suggested.
The technique used on Wikipedia won't give you the wrapping you want.
What about using two spans and using this approach:
lispan class=num2.1.1.2/spanspan class=textIt shall be construed
a crime against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./span/li
.legal li li {padding-left: 4em;}
.legal li span.num {float: left; margin-right: .3em; }
.legal li span.text {display: block; overflow: hidden; zoom: 1;}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Styling form elements
Hi Gabriele, Hope this might be useful for beginners: http://onwebdev.blogspot.com/2010/09/css-styling-form-elements.html I don't think using a UL for this makes sense. If you want to wrap every label/input pair then why not using DIVs? Isn't what they are for? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] New IE7 filter?
I think I found a new hack for IE7.
Instead of this:
*:first-child + html .left,
*:first-child + html .right,
*:first-child + html .maincontent {}
We could use this:
.left,.right,.maincontent,x:-ie7 {}
Because of x:-ie7 other browsers should drop the entire rule. Note that
this is a variation of the Firefox hack, as IE7 does not ignore
x:-moz-any-link.
It is shorter, but more importantly it does not add weight to the rule.
If you try this please let me know if it is reliable across the board :)
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] New IE7 filter?
We could use this:
.left,.right,.maincontent,x:-ie7 {}
Actually, it is the colon that dos the magic.
For example:
selector,ie:7 {...}
or:
selector,:7 {...} /* even shorter to target ie7 :) */
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] [+] New IE7 filter?
Please see sig link IE 6/7/8.
#main p,:7 {color: lime; }
Thanks David :)
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Hack to target IE9 beta
Hi Alan,
Ok, thank you, you gave me that extra clue. Here is a revived test.
http://css-class.com/test/css/colors/declaration-string-character-
exscapes2.htm
http://css-class.com/test/css/selectors/str-pseudo-class.htm
IE9 now supports all structural pseudo-classes along with Gecko,
WebKit and Opera so,
:root #ie9 {background: teal\0;}
or
:root #id {property: value\0;}
works in IE9 and Opera (from at least 10.50) since they both support
the specs regarding valid escapes in CSS2.1 correctly. IE9 only fails
when the property is color.
I think there is more to it.
Try these ones for example:
font:3em arial\9;
font-size:13em\9;
I don't have time to check all properties, but I'm sure there are plenty of
other cases.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Hack to target IE9 beta
Hi Alan, Mmm, ok, these are the same results that I see when IE9 preview is in IE7 document mode or when IE8 is in IE7 compatibility mode. For IE7, /9, /a, /b, /c and /d works. For IE8, /0, /9, /a, /b, /c and /d works. For IE9 preview, /0 works. Are you sure that you have IE9 beta in true IE9 mode and not IE7 compatibility mode? Duh! I thought the mode was switched for all the tabs opened when in fact it is *per tab*. So yes, it works as advertised (as the text says on that page), but then how come my tests show that \9 works? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Hack to target IE9 beta
Hi Alan,
Mmm, ok, these are the same results that I see when IE9 preview is in
IE7 document mode or when IE8 is in IE7 compatibility mode.
For IE7, /9, /a, /b, /c and /d works.
For IE8, /0, /9, /a, /b, /c and /d works.
For IE9 preview, /0 works.
Interesting...
It looks like if you replace background with color then \9 works.
Hence why I suggested to use :root #ie9 {color: teal\9;}
but then :root #ie9 {background: teal\9;} would fail.
So it's more reliable/safe to go with this instead:
:root #ie9 {background: teal\0;}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Can i vertically centre a UL?
Hi Alan, poor old IE 7 and older? I think there'd have to be a third element in there to set as display: table-row. ---Tim Not quite true. If display: table-row is not given then, an anonymous table-row is generated [1]. | If the parent P of a 'table-cell' box T is not a 'table-row', | a box corresponding to a 'table-row' will be generated between P | and T. This box will span all consecutive 'table-cell' sibling | boxes of T. I'd agree with Tim, it is better to have an element to create an explicit row as the implicit row is not enough to prevent some browsers from dropping the last item (cell). I ran into this issue before. If you check the archives you should find a few posts where I discuss this with Ingo (or was it Philippe?). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Hack to target IE9 beta
I just downloaded IE9 and I think I found a way to target it.
Syntax: :root selector {property: value\9;}
Example:
:root #ie9 {color: teal\9;}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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] Hack to target IE9 beta
How does IE9 beta show these test? http://css-class.com/test/css-testsuite/css2.1/declaration-string- character-exscapes.htm http://css-class.com/test/css-testsuite/css2.1/declaration-string- character-exscapes-000.htm These are the ones that work: 9, a, b, c, d Ie9 version: 9.0.7930.16406 -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Can i vertically centre a UL?
I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? If you can set height/line-height on the parent, then you can try this: For the DIV: height: 4em; line-height: 4em; text-align:center; For the LIs: display:inline; Whatever height you use make sure line-height as the same value -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Can i vertically centre a UL?
whizz-bang-blammo align centered vertically. Brilliant!!! But sadly not. If there is no height set for your DIV, then line-height should be enough If there is a height then the line-height must match that value -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] How opposite floats work
Hi Gabriele, Hi. I think that's something often underinvestigated: http://onwebdev.blogspot.com/2010/09/css-how-opposite-floats-work.html As you can see, in some cases result differs from what we did expect (the only noticeable change is in the 4th row) What do you expect the 4th row to look like? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] Re: browser treatments of :focus
Hi Alan, http://css-class.com/test/css/selectors/pseudo-class-active- focus.htm This test shows the problem that WebKit has with :focus when selecting a link with the mouse. Tabbing works. I believe if you're using real links instead of # we would see a slightly different behavior. For example, I think you'd see :active kicking in *then* :focus before the new page loads. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] [+] IE6/7
I am getting angry with IE. I have elements wrapped in contentLeft div with width:700px and 3 other elements which supposed to float to the left, but third, goes to the right instead and exceeds with of 700px. It shoul be restricted to such width and put under second element. Am I right or wrong? http://tk-studio-design.webhop.org/Joomla about us section You should not be angry at IE, but at Joomla (if it is Joomla that created *this* layout) as everything seems to be wrong in that construct. *Plus*, IE is fed with totally different rules: - In IE, #contentLeft has a different left margin (seems to be there to fix a double margin bug, but that but is not there) - In IE, the table has a width (500px), but it is width-less in other browsers (as a side note, the column is 700px so no wonder why it does not fill the main content area). - In IE, and IE only, the paragraphs in the table have a 500px width and a 50px margin right (do the maths) - etc. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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/
