Re: [css-d] understading ul li as menus - A 5 question quest.
On Mar 14, 2010, at 1:10 AM, MEM wrote: However, if I recall correctly, this very nice property/value par, is not well supported cross-browser, that's why I try to avoid it. As long as you apply it to inline element, ti should be reasonably well supported, including IE 6 and 7. Applied to block level elements won't work in IE 6 7. Still, and since I have a float applied, we can rely on display:block; only right? Yes. Question, assuming that all my previous assumptions were correct: Is it ok to change the nature of a inline element to block ? Silly question perhaps, it depends on our/user/layout requirements, but, I mean, should we use it with caution (ie. Using mostly with very specific selectors?) (I believe I have repeat the same silly question) :) Please reply if it makes any sense. You can always change the display value of (and all) elements, there are no limitations beyond what the spec specifies and no particular reason otherwise that would prevent from doing so. Almost perfectly clear. Why the line-height doesn't affect the container? Or better (or worst) yet, what kind of rule, apply when the element affect the container or don't affect it? The line-box generated by the inner element/line-height wont affect the line-box(es) generated on the parent elements generally. The inner (inline) element's line-box will overflow the line-box generated by/on the parent (block) element eventually, but it won't affect the layout of the block. ... I rarely use overflow:hidden for these kind of constructs. If the intent is to contain the floated blocks for 'good' browsers, there are many ways. Now that bugs me. Until know, I thought that, for compliant browsers, the only condition that should apply for floats to be contained was that the container should be wide enough to contain the child floated elements. And, perhaps for consistency cross browser, explicitly declare a width on both, container an elements.(don't recall if this is for IE only). I mean contain in the vertical dimension: floats are removed from the flow, and as such don't affect the height of the parent element, unless that parent element is set to contain those floats, by having a clearing element inside, or use a property that establishes a new block formatting context, per CSS2.1:9.4.1 http://www.w3.org/TR/CSS21/visuren.html#block-formatting Yes but, in order to use it, and as far as I know, to have it validate, we need to create a separate css file on a conditional comment for ie browsers only. Clearly, this will be done but, let's say that we have 140 elements to contain the floats. Hmm. I personally don't care about validation in _that_ way (my stylesheets are mostly invalid anyway, by using vendor-prefixed properties); I mostly use the CSS validator as a spell checker :-). If you're concerned about validation, other properties that trigger hasLayout can be used (width, height, min/max-width, min-max-height) http://www.satzansatz.de/cssd/onhavinglayout.html I always suggest 'zoom:1' because it screams 'hasLayout', and is very easy to find in a stylesheet. The other properties all have legitimate uses. When reading through / editing / managing a stylesheet, it takes just a little more attention to understand if the property is used as a 'hasLayout' trigger or for some other reason Should we declare all those elements again on a separate css file (assuming this is the best approach), and apply zoom:1; to each of them? You could have a class that does the job and apply it to those elements that need it. I personally avoid having to use multiple stylesheets if possible (performance reasons mostly). There is nothing wrong in having a IE-only stylesheet. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hover bounces in drop down nav based on a href address ( wordpress)
Here is a strange scenario in the top bar drop down navigation: http://www.sldinfo.com/ My first level of drop down navigation needs to have a 3px underline on hover, and so i've 'faked it out' by using a 3 px white bottom border in teh off state. So far so good. (line 41, navigation.css) What is really odd is that if you hover over Issues and Trends, you get the bounce effect. I was having this trouble with another item - by doing step by step troubleshooting, I found the fix: by literally changing the address of the link, it fixed the problem. Hunh? Saving this out to a static file, and changing the link from a href=http://www.sldinfo.com/?page_id=19; title=Issues amp; TrendsIssues amp; Trends/a to li class=page_item page-item-19a href=http://www.sldinfo.com/?page_id=xxx19; title=Issues amp; TrendsIssues amp; Trends/a removes the effect. The problem: I fixed one element of the nav by simply duplicating the page and (about was bouncing), and then issue and trends started doing it. Any ideas why this would be? I am using the multi-level navigation menu plugin, heavily customized (based on suckerfish). Other problem I've been completely unable to solve is the bounce effect on the sub-sub menus (e.g. Resources - Photo Galleries -- see flyout menu). I've gone through each piece of the code and tried to remedy this 7px bounce, but nothing. Would appreciate any insights on the first problem, and any resources to better understand the structure of the second problem (as I suspect I am not fully understanding the mechanism for the sub-sub-sub menu). Anne Shroeder Web Developer Language Works, web sites in YOUR language http://www.language-works.com Email: a...@language-works.com (301) 755-8400 (cell) Attitude is more important than the past, than education, than money, than circumstances, than what people do or say. It is more important than appearance, giftedness, or skill. ~ W.C. Fields __ 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] SOLVED multiple IDs and classes to one div - which one speaks loudest?
On 15 March 2010 19:41, Chris Blake ch...@3pointdesign.com wrote: I don't understand why every class or ID in this module's default CSS has to start with 'div' but that's what'd been crushing my change in parenting idea. I guess that IDs are stronger than classes then. No need to guess: http://www.w3.org/TR/CSS21/cascade.html#specificity -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] content in table won't align vertically
On 12-3-2010 16:46, Climis, Tim wrote: Any clues? Default top and bottom margins of 1em on H1 elements? It looks like it's top aligning to me in Firefox, IE8, and Chrome. The only space I see is the margin on the H1 which you didn't cancel out. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Thanks, that's what I was looking for! __ 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] content in table won't align vertically
I know, but because this template is meant for a newsletter I didn't fix the validity-- I also had to use a lot of inline css.. On 12-3-2010 21:53, Chris F.A. Johnson wrote: On Fri, 12 Mar 2010, Thijs Hakkenberg wrote: Dear list, In dreamweaver the 'Aan de lezer' content aligns to the top of the TD element, but in Firefox/IE8 it won't: http://nieuwsbrief.varkensinnood.nl/fileadmin/template/mailings/nieuwsbrief_vin_2010/template.html Any clues? Perhaps it's caused by one of the 41 XHTML errors. Fix those and see if the problem persists. __ 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] content in table won't align vertically
I don't want to sound cynical, but personally speaking I would never rely on Dreamweaver's WYSIWYG rendering to suggest how an HTML document might appear in a conformant browser. In my experience, DW almost never grasps the full subtlety of CSS, and its rendering usually leaves a great deal to be desired. Philip Taylor Thijs Hakkenberg wrote: Dear list, In dreamweaver the 'Aan de lezer' content aligns to the top of the TD element, but in Firefox/IE8 it won't: http://nieuwsbrief.varkensinnood.nl/fileadmin/template/mailings/nieuwsbrief_vin_2010/template.html Any clues? __ 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] content in table won't align vertically
Web site visitors don't browse the web in Dreamweaver. They browse it using real web browsers. And it is incredibly easy to check a site's rendering in a real web browser, even when using Dreamweaver for development. So why even think about how it looks in DW? Philip TAYLOR wrote: I don't want to sound cynical, but personally speaking I would never rely on Dreamweaver's WYSIWYG rendering to suggest how an HTML document might appear in a conformant browser. In my experience, DW almost never grasps the full subtlety of CSS, and its rendering usually leaves a great deal to be desired. Philip Taylor Thijs Hakkenberg wrote: Dear list, In dreamweaver the 'Aan de lezer' content aligns to the top of the TD element, but in Firefox/IE8 it won't: http://nieuwsbrief.varkensinnood.nl/fileadmin/template/mailings/nieuwsbrief_vin_2010/template.html Any clues? -- David gn...@hawaii.rr.com authenticity, honesty, community __ 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 do I evenly center three boxes in a div?
I need to evenly space three boxes (divs) across their parent container. The parent container is a fixed width. Other than using specific widths on the boxes and the margins in between, is there a way to make them center themselves? I thought I saw an article about this once, but can't find it now. Thank you for any assistance. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how do I evenly center three boxes in a div?
On Tue, Mar 16, 2010 at 7:22 PM, Angela French afre...@sbctc.edu wrote: I need to evenly space three boxes (divs) across their parent container. The parent container is a fixed width. Other than using specific widths on the boxes and the margins in between, is there a way to make them center themselves? I thought I saw an article about this once, but can't find it now. Thank you for any assistance. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/ I don't know if this is the rightest answer, but you could float all three divs across the page, then place your target divs inside each floating div, and center your target divs inside their container floating divs. ∞ Andy Badera ∞ +1 518-641-1280 Google Voice ∞ This email is: [ ] bloggable [x] ask first [ ] private ∞ Google me: http://www.google.com/search?q=andrew%20badera __ 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 do I evenly center three boxes in a div?
Hmmm sounds like extra code, but will give it a try. Still looking for another solution. -Original Message- From: Andrew Badera [mailto:and...@badera.us] Sent: Tuesday, March 16, 2010 4:29 PM To: Angela French Cc: css discuss Subject: Re: [css-d] how do I evenly center three boxes in a div? On Tue, Mar 16, 2010 at 7:22 PM, Angela French afre...@sbctc.edu wrote: I need to evenly space three boxes (divs) across their parent container. The parent container is a fixed width. Other than using specific widths on the boxes and the margins in between, is there a way to make them center themselves? I thought I saw an article about this once, but can't find it now. Thank you for any assistance. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/ I don't know if this is the rightest answer, but you could float all three divs across the page, then place your target divs inside each floating div, and center your target divs inside their container floating divs. ∞ Andy Badera ∞ +1 518-641-1280 Google Voice ∞ This email is: [ ] bloggable [x] ask first [ ] private ∞ Google me: http://www.google.com/search?q=andrew%20badera __ 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 do I evenly center three boxes in a div?
I need to evenly space three boxes (divs) across their parent container. The parent container is a fixed width. Other than using specific widths on the boxes and the margins in between, is there a way to make them center themselves? I thought I saw an article about this once, but can't find it now. Thank you for any assistance. Would something like this work for you? http://tjkdesign.com/articles/thumbnail_and_caption/inline-block_table-cell_ and_zoom.asp -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework __ 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 do I evenly center three boxes in a div?
Your method works lovely for horizontally centering. I'm having trouble on the vertical axis though. I tried vertical-align:middle on the container div (the div holding each of the three content boxes),but it's still flush top. -Original Message- From: Andrew Badera [mailto:and...@badera.us] Sent: Tuesday, March 16, 2010 4:29 PM To: Angela French Cc: css discuss Subject: Re: [css-d] how do I evenly center three boxes in a div? On Tue, Mar 16, 2010 at 7:22 PM, Angela French afre...@sbctc.edu wrote: I need to evenly space three boxes (divs) across their parent container. The parent container is a fixed width. Other than using specific widths on the boxes and the margins in between, is there a way to make them center themselves? I thought I saw an article about this once, but can't find it now. Thank you for any assistance. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/ I don't know if this is the rightest answer, but you could float all three divs across the page, then place your target divs inside each floating div, and center your target divs inside their container floating divs. ∞ Andy Badera ∞ +1 518-641-1280 Google Voice ∞ This email is: [ ] bloggable [x] ask first [ ] private ∞ Google me: http://www.google.com/search?q=andrew%20badera __ 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 do I evenly center three boxes in a div?
On Tue, Mar 16, 2010 at 7:57 PM, Angela French afre...@sbctc.edu wrote: Your method works lovely for horizontally centering. I'm having trouble on the vertical axis though. I tried vertical-align:middle on the container div (the div holding each of the three content boxes),but it's still flush top. Have you tried margin auto on the vertical margins? --ab __ 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] In HTML CSS vs. Separate style sheet CSS
On 16/03/2010, at 12:18 AM, Chris Blake wrote: On 16/03/2010, at 12:01 AM, Climis, Tim wrote: 100%px isn't valid, unless my programming mind is tying to make too much sense. I think that's the problem... His template is putting in 'px' even though he doesn't want one. And he wants to have a width of 100% in spite of it. Stylesheets should never overwrite a style defined in the actual tag (Unless it's on the user's side). On the other hand, that gave me an idea that may work (completely untested mind you): Invalid styles should be ignored. So, if you specify width: 100%px in the inline style, and then width: 100% in the style sheet, it might actually get applied. It would be among the ugliest hacks I've ever seen though. ---Tim You're right that's what I am trying to do. I will give it a go for the sake of experimentation. I may even write width(px): uglyhack% in the joomla backend so that it can't even get a number from it! style=width: uglyhack%px ;height: 255px; There goes validation ;-P Thanks to both! Cheers, CB The Hack worked but it's made a hash of the animation and navigation of the module. It might come in handy for something else though. Thanks! CB __ 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/
