[css-d] Absolute positioning within a table
I have a relatively-positioned table, and an absolutely-positioned div in a table cell within that table: http://jsbin.com/erasur In Firefox 4 and 5, the div is positioned relative to the document. In Chrome, and IE 7 (and - maybe - later) it's positioned relative to the table. Which is correct? If Firefox is correct, and there's special handling for positioning within a table, which part of the spec. governs this behaviour? Regards, - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problems with validation
On 5 Jun 2011, at 21:33, Martin mhe...@gmail.com wrote: Hi there. I know it's not strictly css, but perhaps some kind person will help me with this small problem. div class=columns a href=training.php h6Training/h6 pblah blah blah./p /a /div I get the error: document type does not allow element h6 here; missing one of object, ins, del, map, button start-tag Is there any workaround so that the whole block of text, ie. h6 + p was a link? Strictly speaking, no: in HTML 4, a link may not contain a block-level element. Note that there's a subtle, but significant, difference between a block-level element and an element with the CSS style display: block. In html5, however, the above markup would be valid. - bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why does this outline embrace the div above ?
--- On Mon, 5/23/11, Tim Dawson t...@ramasaig.com wrote: I've applied an outline to a para within a div, and I want to apply the same outline to a para underneath the div. (OUTLINE, not border) See: http://www.holidaymullandiona.com/wrongoutline.html (this is an abbreviated version of the page, to illustrate the problem) It works in FF to a point, but for some reason still unclear the outline on the separate para expands to embrace the div above. The div is floated, so the following paragraph's *box* overlaps it. Try clearing the paragraph and you'll see the desired styling. - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why does this outline embrace the div above ?
From: Tim Dawson t...@ramasaig.com Now I'm trying to get the outline to wrap just the text of the para. I don't want to set a fixed width (say 'width: 400px;') because the actual text can vary in width. The best way I've found so far is to insert a span round the text, and put the outline on that. Is there a better way ? The span option is OK, although you probably won't like how it displays when the text wraps onto two lines. An alternative would be to float the paragraph (and then clear the next element) which will 'auto shrink' its width. But, then, the outline will be full-width if the text covers - at least - one line and one letter. I think you're probably after something like: - | Lorem ipsum dolor sit | | amet -- |--| (with apologies to those reading in a non-monospace font) As far as I'm aware, that's not possible in CSS. - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for online reference re optimizing style sheetsyntax
--- On Mon, 4/18/11, Jukka K. Korpela jkorp...@cs.tut.fi wrote: Keith Purtell wrote: One thing I need to do is clean up the main style sheet. So unless someone can present some real evidence of tangible benefits, don't clean up. Even if some evidence is presented, consider whether it really applies to your site. Remember that cleaning up for _size_ generally tends to obfuscate things and make maintenance and development more difficult. Which is why you should only ever perform such cleanup at 'build' time, using an automated tool. Keep all your CSS structured in the most maintainable way possible (which might include, for example, separate files) but combine and compress it for delivery. - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Browser Support: Alternate Style Sheets?
--- On Mon, 3/28/11, Jukka K. Korpela jkorp...@cs.tut.fi wrote: Well it surely demonstrates a _solution_, which is relatively complicated and requires that client-side scripting and cookies be allowed, so there _is_ a problem. The practical conclusion is that alternate stylesheets are not of much use _unless_ you also create an explicit user interface for selecting one of them and program code for making the selection a preferred stylesheet and for storing this selection so that it works across pages and across sessions. Reminds me very much of work I've had to do in the past to support text-size changing via a front-end 'widget'. Of course, as we all know, browsers support (to varying degrees) this feature themselves, but many users are not aware of this, so we made the decision to reinvent the wheel to cater for user ignorance. It sometimes feels like, as website builders, we're doomed to reinvent the browser feature-set in client-side scripts, in many different and inconsistent ways. Even for relatively straightforward features such as changing text size, let alone dealing with alternative stylesheets, user stylesheets, cookie management, etc. - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL or css table for navigation panel?
--- On Mon, 3/21/11, Joergen W. Lang joergen_l...@gmx.de wrote:
Then you *could* use these rules to make you links behave
as desired:
ul.nav {
margin: auto; /*
center list */
list-style: none; /* remove bullets */
width: 20em; /* give it
an explicit width */
}
Don't forget to remove padding from your list:
ul.nav { padding: 0; }
- Bobby
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Positioning a float
Hi all, I'm working on a layout that requires text to wrap around a positioned image. In my case, I need an image in the bottom-right of a box, with text inside the box. So I need the in-flow, wrapping properties of a float combined with the positioning properties of an absolutely-positioned element. Is anyone aware of a way of achieving that? Regards, - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a float
--- On Thu, 1/27/11, Gabriele Romanato gabriele.roman...@gmail.com wrote: You cannot position and float an element at the same time. So: 1. make the container relative position: relative Thus you create a context. 2. position the box with the image at the bottom, using left/right: 0 bottom: 0 3. add some top and left margin to the positioned box to prevent surrounding text from overlapping it. if your container has no background image, you can use borders instead of margins, with the same color of the background of your container. Let me know if this helped. :-) Unfortunately, no. Since the image is positioned, the text alongside it will not wrap accordingly, as the image is no longer in the normal flow. This is regardless of whether the image has width/height, margins, borders, or any other box-model related attribute. - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop down vertical nav?
--- On Wed, 1/19/11, Tim Climis tim.cli...@gmail.com wrote: From: Tim Climis tim.cli...@gmail.com Subject: Re: [css-d] drop down vertical nav? To: css-d@lists.css-discuss.org Date: Wednesday, January 19, 2011, 1:14 AM On Tuesday, January 18, 2011 6:33:03 pm Matthew P. Johnson wrote: -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Matthew P. Johnson Sent: Tuesday, January 18, 2011 3:31 PM To: css-d@lists.css-discuss.org Subject: [css-d] drop down vertical nav? Can a drop down effect for a nav be created using pure css? No. The issue here is that CSS has no after click state. It could (in theory -- I haven't tried) do this if you wanted the folder to extend when you hover over it (:hover), or when you tab on to it with the keyboard (:focus) (including the graphics), but it can't do it on a click. :focus *will* apply on *some* elements when you click them. Links, for example. So a link with a fragment identifier will have its :focus style applied when clicked. Whether this could actually be used to solve the original problem is another matter, of course. - Bobby __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Opacity, floats, and stacking order
Can someone explain the behaviour I'm seeing here [1] which is as follows: 1. A block-level element in the normal flow, following 2 floated DIVs (one left, one right) appears behind them. This, I would expect; the floats have a greater stack level. 2. But if an opacity is applied to the normal flow element, it appears in front of the floats. Or at least, it appears to. Am I misunderstanding opacity, stacking order, or something else entirely? [1] http://www.fiveminuteargument.com/html/weird-opacity.html Regards, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] should this class override my other one?
--- On Wed, 12/15/10, John D xfs...@hotmail.com wrote: Similarly, header styles takes priority over external style sheets Not true. In the case of styles declared in a style element and styles declared in an external stylesheet, *all else being equal*, the latter declaration takes precedence. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Block elements in links
Hi all, I'm investigating an issue in Firefox relating to block display of an element within a link. Here's an example: http://www.fiveminuteargument.com/list-display-testing.html In Safari, a link containing a block element simply wraps that element. However, in Firefox, extra space is created before the nested block element. Does anyone know what the correct behaviour should be? Regards, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block elements in links
--- On Mon, 12/13/10, Chetan Crasta chetancra...@gmail.com wrote: I think Firefox, Opera and IE 8 show the correct behavior. An element with display:block that is within an inline element generates a block box within the context that it is in (the inline box). This can be seen when a span with a p has display:block and also in your third example with text outside the a. Hmmm... it appears that the display: list-item is relevant. Compare the rendering of: 1. div style=background-color: #ccc; display: list-item;a href=#span style=display: block;test/span/a/div 2. ullia href=#span style=display: block;test/span/a/li/ul 3. div style=background-color: #ccc;a href=#span style=display: block;test/span/a/div Firefox shows extra space within both the implict (2.) and explicit (1.) 'display: list-item' elements. Safari doesn't. Opera shows extra space on 2. but not on 1. Without a 'display: list-item' container, all 3 browsers repress the extra space. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block elements in links
--- On Mon, 12/13/10, Chetan Crasta chetancra...@gmail.com wrote: 1. div style=background-color: #ccc; display: list-item;a href=#span style=display: block;test/span/a/div Opera shows extra space on 2. but not on 1. Opera puts the extra space only if there is text before or after the a. Which version? I get the extra space, in that exact example, in Opera 10.60 - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Block elements in links
--- On Mon, 12/13/10, Philippe Wittenbergh e...@l-c-n.com wrote: Which version? I get the extra space, in that exact example, in Opera 10.60 Opera 10.63 Linux http://roughtech.com/t/list-display-testing.html Opera is misaligning the list marker, but doesn't put extra space. Of course - stupid of me to have missed that! In Test A (Bobby's original), Gecko generates a box for the a in test 3 but only before the nested block. That shouldn't be, there is nothing to generate a line box. So it definitely looks as if we have a fairly minor bug in Opera, and a more significant bug in Firefox. If anyone's thinking of filing a bug or looking into this in more detail, I have some anecdotal evidence (from a third party) that the Firefox behaviour was not present in April, which might suggest a 3.6 regression, although take that with a large pinch of salt! - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] should this class override my other one?
--- On Mon, 12/13/10, Angela French afre...@sbctc.edu wrote:
From: Angela French afre...@sbctc.edu
Subject: [css-d] should this class override my other one?
To: 'css-d (css-d@lists.css-discuss.org)' css-d@lists.css-discuss.org
Date: Monday, December 13, 2010, 4:50 PM
... I made a class like this:
td.center {text-align:center;}
... The .css file that was called with a link tag, had the following
class in it:
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
My question is this. It appears in FF that .center
was being applied to my td in addition to my
td.center. But not so in IE. Can anyone explain
this to me?
Hi Angela,
Both should be applied. Any selector (e.g. .center) in any CSS file or head
section, that matches a given element, should apply to that element.
td.center happens to be more specific than .center, but that's only relevant
for overriding individual CSS properties that are the same. In this case, the
property declaration is exactly the same anyway, but:
.center { text-align: left; }
should not have any effect, since td.center { text-align: center; } is more
specific. Here's a short example demonstrating (at least some of) the relevant
issues:
/* 1 */ td.center { font-size: 120%; background-color: red; }
/* 2 */ .center { color: red; font-size: 100%; }
/* 3 */ .center { color: blue; }
/* 4 */ body td.center { background-color: green; }
The above CSS will affect a 'td class=center' like so:
1. color: blue - declarations 2 and 3 match and are equally specific, so the
second one will apply (the latest equal match always applies)
2. font-size: 120% - since the first declaration is more specific than any
later, its font-size wins out
3. background-color: green - the 4th declaration is more specific, so overrides
the 1st
Remember that:
.foo { font-size: 10px; color: red; }
is just a shorthand for:
.foo { font-size: 10px; }
.foo { color: red; }
and is exactly equivalent. So overriding according to specificity applies to
individual attribute/value declarations, not entire blocks of declarations.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to 'unvisited' links?
--- On Tue, 12/7/10, David Laakso da...@chelseacreekstudio.com wrote: As T. A. has suggested, ditch the visited link style in the CSS... I think that would be a shame. There are often usability benefits associated with being able to tell if you've already visited a specific URL. aside http://dbaron.org/mozilla/visited-privacy /aside As I understand that article, it's suggesting the fix should be in the browser, not the web content. It's certainly more realistic to fix 4 or 5 browsers (OK, maybe a FEW more ...) than millions of stylesheets. Moreover, as I understand the 'exploit', removing your own site's visited link style does nothing to protect your readers; the only way to protect them is to ensure browsers cannot 'sniff' the :visited info, or ensure they regularly clear their 'visited cache'. To be honest, short of the actual fix, I'd be in favour of a browser option to restrict :visited info to the session, where it's much more useful anyway. Finally, I note that google performs its own 'visited tracking', if you're logged in/have a google cookie, at least. Whether that's a good thing or a bad thing is a point I'll leave open to discussion. Regards, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Outlook 2007 and DL/DD tag
--- On Wed, 12/1/10, Albert van der Veen albert.lijs...@xs4all.nl wrote: I'm setting up an HTML newsletter and come across a problem in Outlook 2007 on Windows. This is an excellent resource for information on cross-email-client support for HTML: http://www.email-standards.org/ In fact, there's a mention of poor support for margin/padding in outlook 2007: http://www.email-standards.org/clients/microsoft-outlook-2007/ and an example of no margin support which looks very like what you're seeing: http://www.email-standards.org/samples/#margin As already mentioned, HTML emails are horrible to work with; however much it pains you, you're actually better off using tables for layout and just coming to terms with this through gritted teeth. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Aligning elements in a 'grid'
Hi all, I have a series of elements (marked up as a UL) that I'd like to display in rows. Each LI has the same width, but a variable height. I'd like a solution for the case in which there are a fixed number of 'columns', and when the number of columns is variable; for the latter, each LI is a fixed width, but the UL's width is variable. Floats aren't suitable for this, due to the variable heights involved. I don't want to add a containing element to represent each row, partly because it's not very 'clean', but also because that isn't possible in the 'variable number of columns' case. Inline-blocks are almost perfect for this scenario (even IE issues can be hacked around) but whitespace then becomes an issue: such space between elements has an effect on the layout. Is there either a solution to the inline-block/whitespace problem, or another approach that will achieve the same layout? Example here: http://www.fiveminuteargument.com/layout-testing.html Note that, in this example, I've removed whitespace around elements in the inline-block example in order to demonstrate the desired layout. But I'd like a solution that doesn't require that. Thanks everyone, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ANN: hcss/0.1
--- On Sat, 11/20/10, Jonas Galvez jonasgal...@gmail.com wrote:
hcss is markup for css. Runs on
Python 2.2+.
https://github.com/galvez/hcss
It's an interesting approach but I think, until it can fully express all CSS
selectors, it's flawed. How, for example, can you use hcss to generate this CSS?
.container p { line-height: 2; }
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] which tag do i target with css for the hover effect i want
--- On Mon, 11/8/10, Philippe Wittenbergh e...@l-c-n.com wrote:
On Nov 8, 2010, at 9:32 PM, Lisa Frost wrote:
I've tried every combination of padding and margin i
can think of, on the
li or the a tag and can not work out
which tag i should be targeting to
get a hover effect where the background colour changes
to fill the whole
menu item (ie box), not just behind the text.
Sorry hard to explain, you can see what i mean by
looking at the menu here:
http://www.diabetespolarflight.org/xhtml/template.html
#sidemainmenu li:hover {background-color: lime;} ought to
do what you want, if I understood you correctly.
Whilst that will work, and fully answers the question, from a CSS perspective,
you should be aware that the link target areas (i.e. what can be clicked on)
will then differ from (be smaller than) the list items which are coloured. If
you think that disconnects fine, then by all means use this method.
Personally, I think that's confusing from the user's point of view, so I'd
approach this by expanding the links, e.g.
#sidemainmenu a { display: block; padding: 10px 0; }
and remove the padding on your LIs. With the :hover selector that's currently
in use on that page (#sidemainmenu a:hover), that should give the effect you're
after.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] which tag do i target with css for the hover effect i want
--- On Mon, 11/8/10, Lisa Frost birdiefr...@gmail.com wrote: Dear Bobby and Philippe, Both ways work perfectly in the way that i was wishing for. I tried both to learn something. Now i just need to decide which one! I suppose it boils down to personal preference. I would automatically only expect the text to show the its a link symbol rather than the whole highlighted background. Is it better accessibility wise to make the whole area clickable or for a menu does it not matter. Increasing the footprint of a link can certainly improve accessibility/usability. Small text links can be difficult to click. Certain motor disabilities can exasperate this. Different devices such as touch-screen phones with a small display can also make low-footprint links awkward. It's important that you clearly indicate when a link is focussed; clicking whitespace on a page, only to end up at an advertising site is frustrating. Your method of changing the background colour is an excellent way of conveying this. Overall, this method of displaying links within a menu is very common. Try checking out a few important sites and seeing how they do this; I'm willing to bet more often than not they'll use 'large footprint' links in their navigation. Regards, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background bullet for paragraphs
--- On Mon, 10/18/10, Linda Miller, DVM anm...@bellsouth.net wrote:
p class=imageBulletsimg border=0 width=10
height=10
src=Image_files/image003.gifnbsp;nbsp;And
the info for the paragraph/p
Is there a way to shorten the above and use CSS? Something
like using the image as a background for the paragraph and
floating it to the left? This to completely remove the
img tag?
Yes, almost exactly that way:
p.imageBullets { background: url('Image_files/image003.gif') no-repeat top
left; padding-left: 16px; /* or however wide your image is + whatever gap you'd
like between it and the text /* }
that will create a 'hanging bullet'. A bullet that acts like a floated element
(text wrapping around it and under it, rather than in a separate 'column') is a
little trickier (and, IMO, uglier) but is possible, I believe, with generated
content.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Behind the CSS Scenery of My New Nested List
--- On Wed, 10/6/10, Brian M. Curran br...@draftingservices.com wrote: If you built this nested list, would your site architecture that supports it look like 1 or 2, for subitem1: 1. wwwdotdomain.com/subitem1.html 2. wwwdotdomain.com/item2/subitem1.html If this really is a question about URL architecture (and not a question about CSS that I'm misunderstanding), it's way off-topic for this list. I notice that you've cross-posted to the webdesign-L list; that's a MUCH more relevant place for the question. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the other list
--- On Tue, 9/28/10, Chris Blake ch...@3pointdesign.com wrote: what's the name/link to the other list that some members use for all question regarding web-devm not solely CSS? http://webdesign-l.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] Can CSS get me out of the stone age?
--- On Thu, 8/26/10, Lineberger, Scott sline...@coastalind.com wrote: http://www.coastalind.com/ciordersample.html Does anyone have any suggested CSS coding that would streamline this page? Not really, no. CSS cannot be used to reduce *content*, only to style it. Your issue is one of markup - how best to represent thousands of items in a form - and, thus, isn't really suitable for this list, IMO. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
--- On Fri, 8/20/10, Gail Issen gis...@sbcglobal.net wrote: The way I remember the order is that they sound like TROUBLE ... TRBL ... Top Right Bottom Left. I just remember it as clockwise, starting from the top. This works completely obviously for 4 values, and pretty obviously for 2 (top/bottom and left/right 'mirror' each other). For 3 (which is by far the hardest to remember), you just need to bear in mind that it's more common to have differing top/bottom values than it is left/right, so the repeated value is, instinctively, the left/right one. 1 value isn't a problem :) Those spec-writers actually did things pretty logically when they were drafting CSS! - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
--- On Wed, 8/18/10, Wesley Acheson wesley.ache...@gmail.com wrote: No-one spotted the deliberate mistake? ;) 4 values: are Top, bottom, left and right. should be 4 values: are top, right, bottom, left - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
--- On Wed, 8/18/10, Keith Purtell keithpurt...@keithpurtell.com wrote: First, I don't understand width. Second, I especially don't understand how he has illustrated margin. Third, the padding. Why is it necessary and how is it affecting the the flow of text around my images? I don't think anyone's mentioned Firebug yet, which must be a first! It's a Firefox plugin which is excellent as a debugging tool, a design tool, and a training tool for those new to CSS. Firebug will (to some extent) answer your 3 questions - and many more - by providing visual feedback, in your browser, of how various styles affect the design. http://getfirebug.com/ I recommend it as an absolute must for any web design work. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] navigation link a different colour when page is active
--- On Tue, 8/3/10, Duncan Hill dun...@gmail.com wrote: to add a little to MB's method, and maybe confound the SSI doubters a little bit. The 'active' page can easily have its link disabled with no more than CSS by changing the cursor to a standard arrow so that the user does not expect any action, and the addition of the 'pointer-events' property set to none. An entire item on the menu can be just as easily hidden by using display: none; Of course, that method doesn't help if you don't have CSS enabled or if, for example, you're using a screen reader. You could also use javascript to remove the 'href' attribute, but that suffers from the same sort of problem. Ideally, you'd remove the href element server-side so the *content* is accurate. There shouldn't be any case where this is difficult. Yes, if you're just including a single static chunk of HTML for your menu, this isn't possible, so it's better to either dynamically generate the menu, or have a separate static 'chunk' for each different state. If your menu has more than one level of navigation, you'll need to do this anyway. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] new website - critics welcome
--- On Thu, 7/22/10, tomo jacobson tomojacob...@gmail.com wrote: hi, i'm an amateur. i haven't done any website since early high-school... anyway this is what i achieved (can't post the link, sorry...): tomojacobson.art.pl/strona/ I think there are three interweaving factors that /can/ (and often do) compete, that need to be taken into account during any design: 1. Pragmatism - are you interested in delivering your message to every single last member of your potential audience, or are you happy to serve the majority? 2. Creativity - how much are you looking for the visuals to be a feature of the site in their own right, as opposed to merely being a pretty wrapping for the content? How much is the site an expression of who you are, as well as a tool for communicating information? 3. Morality - how happy are you to enforce certain limitations, bearing in mind (partly) how you would feel if it were you on the receiving end? Most of your issues can be evaluated according to those factors. For example, take the issue of the front-page navigation: 1. Pragmatism. Not everyone will 'get' this'. It's certainly not very keyboard-friendly. And, I imagine, it's not very touch-friendly, either. Those 3 points will each diminish your potential audience to some extent, and to different degrees. 2. Creativity. This is a nice, attractive effect, which certainly isn't commonplace. It's a look at me kind of feature, and it offers a brief amount of enjoyment for the visitor as they sweep their mouse across the letters and discover what's underneath. It also adds a nice dash of colour, and is friendly and playful. 3. Morality. Does it matter to you that some people won't be able to use this interface, and may feel aggrieved or even angered? Are there improvements you could make for keyboard users (clue: it may be as simple as adding :focus where you currently have :hover in your CSS)? That's just one example - your screen width issue is also ripe for this kind of evaluation. I'm not trying to answer these questions for you; these are your decisions to make. But I think it's worth thinking about the design in these terms, and also bearing in mind that, whilst these factors compete to some extent, they can also be made to work together, keeping compromise to a minimum. Some of what I consider to be the 'best' websites nowadays do exactly that. BTW, I think that, overall, your site is attractive, funny (in a good way!), and fulfils its purpose very well. Good luck in your venture. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] id and class selectors
--- On Wed, 7/21/10, Gabriele Romanato gabriele.roman...@gmail.com wrote: Kris, you should basically use cascade. For example, if you have a structure like this: div id=test ul li/li !--more-- /ul div And you /probably/ shouldn't have a structure like that, since: ul id=test li/li !--more-- /ul can usually be styled accordingly. YMMV, of course. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] images are misaligned
--- On Tue, 6/15/10, Thijs Hakkenberg th...@hakkenberg.com wrote: I've got an an extension generating images in the CMS typo3, but the images won't align and I have no clue why. http://kunstomhetlijf.nl/index.php?id=181 Hi Thijs, Your images are too wide for their container. The container (.csc-textpic-imagerow) is 466 pixels wide. Each image is 101 pixels wide, with an additional 8 pixels padding (4 each side). The list items containing them (apart from the first column) have a left margin of 20 pixels. (4 * 109) + (3 * 20) = 496 pixels. If you set that left margin to 10px instead, you'll get what you're probably looking for. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img element or sprites for icons?
--- On Wed, 5/12/10, jeffrey morin rufus2...@gmail.com wrote: On Wed, May 12, 2010 at 12:18 PM, Thierry Koblentz thierry.koble...@gmail.com wrote: Why not using the links or list items to hold the background images rather than adding extra elements (spans or else? Sorry I should have explained that better. The links are using a background image to make them look like buttons. So that's why I was looking at an empty element instead of using the links. How essential are those icons? If they are genuinely conveying no information (as your screenreader comments imply) then I'd personally have no problem adding the markup 'placeholders' via JavaScript, and styling their backgrounds via CSS. That keeps your markup clean but still gives you all the benefits of CSS-images. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thoughts on img alt tag verbage
--- On Thu, 5/6/10, Jukka K. Korpela jkorp...@cs.tut.fi wrote: Another CSS-related issue is that many people have used alt attributes to create tooltips, like annotations on the images. This tends to interfere with the proper use of such attributes. Moreover, the tooltips are rendered in a manner that is immune to everything you say in CSS, using system routines. The rendering has many drawbacks, like the disappearance of the tooltip after some seconds, which is really annoying if the text is long and you'd like to read it. Therefore, if you want to show tooltips, it's better to do that with CSS (or CSS + JavaScript), e.g. including explanatory text in document content, hiding it with CSS, and making it visible in a particular position. It's useful then to add title= (i.e., title attribute with empty value), as this will prevent some browsers from displaying the alt attribute value as tooltip. Actually, the title attribute is the best way of displaying tooltips, IMO. That text is available to screenreaders, and is - as you point out - handled by most browsers in a fairly consistent way, usually in keeping with the user's OS, so the behaviour should be familiar. The way I handle 'enhanced' tooltips (if required) is with a bit of javascript that extracts (and removes) the title value, adds it to the DOM, and then styles that new element. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] validation with no warnings
--- On Mon, 4/12/10, Chris Blake ch...@3pointdesign.com wrote: http://wch.redrunner.co.uk/ The index page just has one warning, the others have 3. I'd love it if someone could tell me what doctype and UTF setting suits my style so that I can just strike that from my list. Hi Chris, Your home page only has a single warning, which relates to the line-break in your doctype declaration. Instead of: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/ html4/strict.dtd write: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; or: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; Your other pages are simply missing a content-type declaration; why not use the same one as your home page: meta http-equiv=Content-Type content=text/html; charset=UTF-8 FWIW, I use HTML4/strict (because I see no point in using XHTML since it's not supported properly by IE, but I still want everything to be as strictly defined as possible) and UTF-8 (for non-ASCII support, although I normally use character entities anyway). - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Reset CSS
From: Chris Blake ch...@3pointdesign.com Anyone know of a standard and simple reset.css file to use. This is a good, recent article from our very own Thierry: http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling/ I think the general point to take from the current prevailing opinion is: don't use a reset 'blindly', think about the effects it's actually performing and adjust styles accordingly. IMO, resets are far more relevant for quick mockup work and designing in the browser rather than final production work. __ 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 how to handle div height with floating children
--- On Fri, 3/19/10, Claude Needham gxx...@gmail.com wrote: The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. But I would like to understand why this is happening Here's my explanation: http://www.fiveminuteargument.com/float-container and have some idea of the best practice for handling this issue. I'm not sure if it's considered *best* practice, but a very common technique is to apply 'overflow: hidden' (or another non-default overflow value) to the container. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] multiple IDs and classes to one div - which one speaks loudest?
--- On Mon, 3/15/10, Chris Blake ch...@3pointdesign.com wrote:
Here is the HTML:
div id=yoo-toppanel-1
class=yoo-toppanelcontent/div
And it reads this CSS first:
#yoo-toppanel-1 div.yoo-toppanel div.panel-container {
But because of this it is disregarding 'mine' and choosing
default.
Hi Chris,
It's actually 'disregarding' your CSS because '#yoo-toppanel-1
div.yoo-toppanel' doesn't match; that's looking for a DIV element with a class
of 'yoo-toppanel' INSIDE an element with an ID of 'yoo-toppanel-1'.
To match that element, you actually want:
#yoo-toppanel-1.yoo-toppanel
OR
div#yoo-toppanel-1.yoo-toppanel
OR just
#yoo-toppanel-1
which will probably 'win' on specificity, depending on the other CSS present.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
--- On Thu, 3/4/10, Angela French afre...@sbctc.edu wrote:
Hello,
I am trying to create drop down menus (one level, dropping
down from horizontal list items in a top nav bar). My
issue is that that, while the drop down menu appears when
hovering over top level list item, when the user moves OFF
of that list item to move into the drop down sublist, the
sublist disappears.
Hi Angela,
You have a gap between your toplistitem and your sublist. When the pointer
moves over this gap, it's no longer hovering over the toplistitem, so the
:hover style doesn't apply. Try setting:
div#navbar li.toplistitem { height: 29px; }
to confirm this. That's probably not the style that you *want*, but that's the
cause of the problem.
If you want an example of how to build a really nice dropdown menu, take a look
at this one I stumbled across today:
http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with single level drop down menu
--- On Thu, 3/4/10, Angela French afre...@sbctc.edu wrote: Bobby, You solution works, but it means that the sub menu would always have to be attached to the top menu item. That's why I provided that example link which does have a gap between the top item and the submenu, but still works. The way that's done is that there are two nested elements' boxes for the top menu item: the outer touches the submenu, the inner has its background styled with a gap below it. **The :hover is then applied to this outer element** - that's the key. If you take a look at that example with firebug, it should be pretty clear how it's being done. Cheers, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color
--- On Tue, 2/23/10, Jason Arnold jaon.arn...@gmail.com wrote: What is the reasons for using: background: #fff; instead of: background-color: #fff; I'm surprised no-one's pointed out the obvious: that using background will override all other background-* properties (to their default values), in addition to setting background-color. Using background-color will just set that property and inherit the others. Depending on your existing CSS, this could be significant. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Deprecations in recent versions of HTML cause C SS problems
--- On Wed, 2/10/10, fred dagg rickdu...@hotmail.co.nz wrote:
For example: given an in-line citation such as (McConnell,
2002) in an academic/scientific paper, the bibliographic
reference might be:
McConnell, S. (July, 2002) The Business of Software
Improvement. IEEE Software pp. 5-7
Note that, in the one line, part (the title) is to be
underlined, part (the journal title) to be itallicized and
the remainder in normal face font.
I can't see any way to perform the process using CSS.
Perhaps someone can help with that. Thanks.
No-one's really addressed the original issue - that of the markup - possibly
because it didn't come through cleanly in your post, Fred. Maybe you can try
again (and ensure you're posting in plain text).
There are - broadly speaking - 3 options that I can think of:
Presentational markup:
McConnell, S. (July, 2002) uThe Business of Software Improvement/u. iIEEE
Software/i pp. 5-7
This has all the disadvantages associated with presentational markup that have
led to the W3C discouraging these kinds of elements.
Semantic markup using specific elements:
McConnell, S. (July, 2002) strongThe Business of Software
Improvement/strong. emIEEE Software/em pp. 5-7
And targeting them via CSS (e.g. strong { font-weight: normal; text-decoration:
underline; } em { font-style: italic; }) - presumably the entire citation would
sit in an element with its own class (quite possibly a list item if this is in
a references section at the foot of the document) which should be included in
those selectors. Alternatively, you could use class names on the individual
strong/em elements, in a very similar way to:
Semantic markup using generic elements:
McConnell, S. (July, 2002) span class=article-titleThe Business of Software
Improvement/span. span class=journal-titleIEEE Software/span pp. 5-7
This is, indeed, quite a bit more typing than the presentational approach, but
the associated downsides depend on how you're entering this data in the first
place. If you're using a CMS, rather than marking-up your documents by hand,
the time taken to type those extra characters should be mitigated.
Do any of those approaches work for you?
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: form ::
--- On Mon, 2/8/10, David Laakso da...@chelseacreekstudio.com wrote: I have had my little problems styling my little contact form but /thimk/ I may have most of my little problems resolved? http://chelseacreekstudio.com/site/contact/index.php Hi David, Not sure if you're taking general design comments, but the first thing that struck me about the form was that it's difficult to identify which field the 'required' / 'optional' labels are associated with. Adding a 'for' attribute would help, as might a javascript effect onfocus, but I think the spacing needs to be addressed, too. Regards, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float not working in IE 7
--- On Mon, 2/8/10, Climis, Tim tcli...@indiana.edu wrote:
The h3s (for
Date, Time, etc) are floated left, but the following
paragraphs aren't floating up.
http://www.indiana.edu/~intlserv/ic/weekly_news.php
Hmmm... not sure I've come up against this specific problem before, but a
'clear' fix to ensure the list items are containing the headings and paragraphs
does the trick:
.event_details li { overflow: hidden; }
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] positioning text in a table cell
--- On Fri, 2/5/10, Cyril Motsch cyril.mot...@laposte.net wrote: Have you tried absolute positioning? I have tried that, with position: absolute; bottom: 0pt, (Don't forget that, strictly speaking, 0pt is invalid because a value of 0 doesn't need a unit) but both Safari 4.0.4 and Firefox 3.5.6 for Mac understand that to be relative to the whole table, not to the individual cell. Generally speaking, an absolutely-positioned element will be positioned in relation to its closest relatively-positioned ancestor. However, even adding 'position: relative' to the table cell doesn't fix the problem. In my very brief testing, it appears this is related to the table-cell display value, and is - hopefully - behaving according to spec. Changing the display to 'block' resolves that although, of course, this may have undesirable side-effects (and may not work in various IE versions). - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Picture spacing problem if padding is used for frame what is used for space from text
From: Carol Swinehart c...@ckfswebservices.com http://www.habitatfairfield.org/test/index2.php page address left image near bottom in order to get the padding and the border for the frame effect I used this style=float: left; padding: 10px; border: 1px solid #015395; I also wanted the text to space away from the frame and had to use this hspace=15 But hspace of course doesn't parse. Any ideas what I can use to get the same effect. Margin is - more-or-less - the modern equivalent of hspace/vspace. Try margin-right: 15px; - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] comment and request for feedback on a site at test
--- On Wed, 1/27/10, Stack Robert r...@stack212.com wrote:
Also, I would like to have the captions below images set up
so that the title is flush left and bold, and the caption
(both are P elements) is flush right and on the same line as
the title. Any thoughts on how to get them on the same line?
Hi Rob,
This might not be exactly what you want, but should at least give you a start:
1. Get the title and caption on the same line using 'opposing floats'
(http://www.fiveminuteargument.com/opposing-floats):
#title { float: left; }
#caption { float: right; }
2. Reset horizontal margins so everything will fit:
#title, #caption { margin-left: 0; margin-right: 0; }
3. Set widths to appropriate values so they both fit on the line, e.g.
#title { width: 15%; }
#caption { width: 85%; }
4. Sort out the vertical alignment:
#caption { padding-top: 1em; /* to match title */ }
5. Finally, 'hack' their container so that it encloses these newly floated
elements:
.imageContainer { overflow: hidden; }
That's all based on the image on the front page. Of course, you might want to
tweak that according to more detailed requirements you may have, but that
should be a good basis with which to start.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to space out menu items evenly across menu bar?
--- On Tue, 1/26/10, shumdesign shumdes...@gmail.com wrote:
I want to have the main menu items space out evenly across the 620px
menu bar, how do you mark that up and keep the submenus in the right spot?
Can I use percentages to do this?
.sf-menu { width: 100%; }
.sf-menu li { width: 20%; }
will do it for you. You might also want to size the submenus to match. And the
first menu item's text will wrap (under my font), which you could avoid in some
cases by decreasing the padding, although this will always be a problem for
some viewers if you fix the width of each item.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div that fixed vertically but floated right
--- On Mon, 1/18/10, Dave M G mar...@autotelic.com wrote: I am trying to create a DIV that floats to the right of some content, but will stay fixed vertically even when the page is scrolled up or down. Just a quick idea for one possible approach: if the 'floated' div has a known width, you should be able to include it in a relatively positioned wrapper (your main content?), position it absolutely, and create enough right margin on the wrapper to accommodate it. Will that work for your specific case? - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font differences
--- On Sun, 1/10/10, David McGlone da...@dmcentral.net wrote: I googled but couldn't actually find an clear straightforward explanation. The CSS validator is your friend: http://jigsaw.w3.org/css-validator/ - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fixed width horizontal list
--- On Tue, 11/17/09, Jack Bates ms...@freezone.co.uk wrote:
I want to style an ol so it
looks similar to the main links on this
page, http://artefactual.com/
- horizontal
- right justified
- fixed width
Hi Jack,
The key to this one is floating the list to the right (to align the entire
thing on the right-hand edge) and the individual items to the left (to align
them vertically, and maintain their order). Something like this should be a
good start:
ol { background-color: blue; list-style-type: none; float: right; }
li { float: left; }
a { color: white; padding: 4px 0; width: 128px; display: block; text-align:
center; }
a:hover { background-color: grey; }
And don't switch your ordered list for an unordered list, as suggested in
another response: the whole point of your initial enquiry is that this list's
order is significant!
Regards,
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] styling linked headings
--- On Thu, 11/12/09, Angela French afre...@sbctc.edu wrote: I want a consistent site-wide style for the headings, but then they are not readily identifiable as links. I am looking for ideas/examples of others who have come up with a successful styling solution. The suggestions you've already received are the most obvious ways of identifying a link: if it's blue and underlined, it will be recognised as a link. The further you divert from this, the less likely your links will be recognised. Especially for headings, a border-bottom is far preferable to a text-decoration: underline since it doesn't interrupt descenders and it can be styled as a pixel-thin line. Partly, the problem is that people just aren't used to headings being linked; for your average web user, it's not a very common experience. I'd suggest that, no matter what your solution, you think about linking the copy. Not, as you rightly point out, by adding a meaningless 'More' link, but by linking relevant words/phrases, for example in: http://checkoutacollege.com/Parents/ForParents.aspx you could link the reasons community and technical colleges are the first choice under the first heading, costs of all these different college options under the second, etc. If there's no suitable word or phrase, see if you can rework the copy such that there is. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Timetable without table
--- On Fri, 10/16/09, Emanuele Venezia emanuele.vene...@polito.it wrote: Can anyone explain why the two columns are not vertically aligned in each row? The top margin of the floated paragraph is not collapsing with the bottom margin of the paragraph above it, unlike the non-floating paragraph on the right. You could either adjust these specific margins, or float the non-floating paras to the right. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Universal selector vs. body selector
--- On Tue, 10/6/09, Ezequiel Garzón m...@ezequielgarzon.net wrote:
Greetings. As you will be able to
tell, I'm a CSS rookie. My doubt is,
if the body contains all the other containers, why does
body { ... }
behave different from * { ... }? Aren't properties supposed
to
cascade? Inheritable properties at least, no?
In addition to the explanations of behaviour that have been given, I'd suggest
that you should avoid the universal selector wherever possible, especially with
properties that inherit (as in your example), since it causes all manner of
problems with inheritance. Using:
* { color: black; }
you can no longer make use of inheritance to style, for example, an entire
section with a different colour, since the universal selector will take
precedence over inheritance.
More here:
http://www.fiveminuteargument.com/blog/stop-breaking-inheritance
Cheers,
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Space before p
--- On Wed, 9/30/09, Lalena lal...@lalenafisher.com wrote: Now I am wondering how to remove the extra space before/after a paragraph. I tried setting margins, and margin-top and margin-bottom and padding to 0, but it didn't work. Anyone know? Hi Lalena, Do you have a URL you can post? What you've suggested will work in the general case, so the problem could be elsewhere - e.g. another selector targeting the element. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shorthand elements
--- On Mon, 9/28/09, tedd tedd.sperl...@gmail.com wrote: opinion I find reading other code (as well as mine later) much easier if longhand elements are used. After 40+ years of programming I can say the less cryptic the code, the better it is. This is because of self-documentation -- in short, documentation matters. /opinion Hi tedd, Interesting. To be honest, I find: margin: 10px 20px; far quicker to read, understand, and visualise than: margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; so what you say definitely holds for some of the time, but doesn't hold the rest of the time. I don't know quite what we should conclude from that though :) I remember I found the shorthand - particularly the 3-value version - annoying at first, but it now seems like second nature. I'd draw the analogy with the ternary operator in c-like languages. It's pretty confusing for beginners to understand but much more readable for those who are familiar with it. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My fixed object is missing altogether
--- On Mon, 9/28/09, Theresa Mesa trixiesirishe...@gmail.com wrote:
Why is my image not showing up? I've triple-checked the
file name.
http://mdh-test.com/PV_web/cornerart.png gives a 404 - you want to be using
url('images/cornerart.png') in your CSS, not just 'cornerart.png'.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mysterious bullets that will not go away! (cross browser)
--- On Mon, 8/31/09, Cathy Tibbles ca...@tibbles.net wrote:
I've tried all the tools up my sleave ...
still have NO idea where these
bullets are coming from!
Hi Cathy,
You mean the at the beginning of each list item in the right-hand sidebar?
They're from this rule:
.entry ul li:before, #sidebar ul ul li:before {
content: » ;
}
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] external link indicators
--- On Wed, 8/26/09, David Robertson funpackeds...@googlemail.com wrote: On 27/08/2009, at 9:02 AM, tommy_til...@arwb.uscourts.gov wrote: Can you or has anyone ever used CSS to indicate that a link would take you outside the current web site? Trying to come up with some way to let the user know they are exiting my site. IIRC it adds padding to the a on the right-hand side and adds a background-image positioned to the right. This is the canonical way of indicating an external link, but it might also help to add information to the title attribute to support non-visual clients. You should also evaluate exactly why you want to indicate this explicitly. Wikipedia is a good example because the vast majority of links are internal and, being an encyclopaedia, the external/internal distinction can be quite significant, and external links may not be obvious. I'm of the opinion that they overuse this technique though - does each and every link under 'external links' really need its own icon indicating it's an external link? Anything's better than opening links in a new window, though :-) __ 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] embed CSS styles right within HTML page?
--- On Tue, 8/18/09, Ce Ce ceceli...@gmail.com wrote: How do you determine if it might be best to embed some styles right within the html page. Only if: a) The style is a completely unique, 'one-shot' affair with no potential for re-use b) Content is dynamically generated from a single source and, therefore, changing inline styles is just as easy as changing those in a stylesheet Even in those circumstances, unless there's a REALLY good reason, I tend to shy away from inline styles simply because they make the markup harder to read and increase its footprint. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can't get rid of blue links
--- On Wed, 8/12/09, Kim Brooks Wei kimi@kimbwei.com wrote: I have some links here that are blue, but I can't figure out why they are this color. Do you mean the links in your footer? They're not your specified colour because you're applying that colour to links in .narrowcolumn, which is separate from the footer. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen resolution?
--- On Tue, 8/11/09, Sam Brown freejack_in...@yahoo.com wrote: I understand the argument from a purist perspective, usability should be first and foremost in any design and/or layout, but realistically, I don't see this as a practical issue given the more common usage of page zooming over the now declining exposure of any sort of text scaling behavior in modern browsers. How long do we design or build in support for what is essentially becoming a deprecated behavior? Personally, I rue this so-called 'advance'. It smacks very much of 'not everyone can design their site to handle text scaling nicely, so let's just settle for second best by default'. - Bobby -- www.fiveminuteargument.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] nested lists in ie7
--- On Mon, 8/3/09, Dermot Ward dermotw...@eircom.net wrote:
Hi Dermot,
.class {
font-weight: bold;
}
Do you REALLY mean this? That selector will only match HTML elements with a
class of 'class' - e.g. li class=class - is that really what you intended?
ul
li class=oneOne/li
ul
li class=twoOne A/li
li class=twoOne B/li
li class=twoOne C/li
/ul
/ul
Notice how, on the third line, your indent doesn't quite match your structure -
this is a warning sign! Your ul should be inside a li; li is the only
valid child element of a ul, so the above won't validate. You need something
like:
ul
li class=oneOne/li
li
ul
li class=twoOne A/li
li class=twoOne B/li
li class=twoOne C/li
/ul
/li
/ul
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An easier way?
--- On Sun, 7/26/09, David McGlone da...@dmcentral.net wrote: I know everyone here prefers that when a question is asked, that the poster upload an example on the web. Well is there any other way this could be accomplished? In order for me to put the work i've done on the internet would take too long because of the databases etc, etc. Hi David, Since this list is all about CSS, what we really care about is the final markup and CSS, rather than how it's generated. If you have a specific question, could you not just put up the relevant page(s) as static files? - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fix and contain: static sidebar fluid content - layout floats
--- On Mon, 7/20/09, Don Spark freedonsp...@gmail.com wrote:
1st:
How do I contain the two floats in the red #container
Try overflow: hidden on the #container
2nd:
How do I get these two floats functional (and containing
what I insert
into them):
Try the following (which will need some tweaking, but should put you on the
right track):
#content { margin-left: 200px; }
.content { /* remove the margin /* }
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed or float?
--- On Thu, 7/16/09, David Dorward dorw...@gmail.com wrote: 2009/7/15 Ellen Heitman ellen.heit...@gmail.com: I have a table centered at the top of the page that I want to remain visible even when the page scrolls. However, I don't want to be able to see the text scrolling behind it. How do I fix this? Which position property would I use? position: fixed ... with a solid background colour. ... and an appropriate z-index :) - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed or float?
--- On Thu, 7/16/09, Alan Gresley a...@css-class.com wrote: Bobby Jack wrote: ... and an appropriate z-index :) None is required for position: fixed. You're positioning, not layering (altering the paint order). Not if there's a relatively-positioned element on the page, in my experience: http://www.fiveminuteargument.com/fixed-position-z-index Is this a bug or expected behaviour? - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css image reveal rollover problem
--- On Fri, 7/10/09, Sara Ullman sa...@speakeasy.net wrote: Unfortunately, in my case the image is disappearing entirely rather than showing the lower part of it on mouseover. An easy one, for a change :) Your :hover images are referenced in an 'images' directory; looks like this should be 'pics'. Everything else seems to be working fine. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clear floats is clearing my right hand column!!
--- On Tue, 7/7/09, Chris Blake ch...@3pointdesign.com wrote: Anyway, I have just dropped it into the page I am having a small issue with and it has gone crazy! It's clearing the right column! I haven't looked at your CSS/markup in detail, but it sounds very much like you're running into this issue: http://www.fiveminuteargument.com/clear-as-mud - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clear floats is clearing my right hand column!!
--- On Tue, 7/7/09, Chris Blake ch...@3pointdesign.com wrote: Anyway, I have just dropped it into the page I am having a small issue with and it has gone crazy! It's clearing the right column! I'm not sure I'm even seeing the problem (in Firefox) - can you be specific as to which element is misbehaving? - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] progress bar
--- On Wed, 7/1/09, Noel Taylor noelta...@gmail.com wrote: What is the difference then, philosophically I guess, between a span and a div, since their default block/inline stylings do not determine their fundamental nature? Their fundamental nature is, very broadly speaking: div: this is a section of the document span: this is a piece of text that is, in some way, separate from the text that surrounds it The block/inline nature of their display is, by necessity, closely linked to their very existence. In general, span and div should be avoided whenever possible. My take on the progress bar doesn't use spans or divs at all, but reuses an existing HTML element: the definition list. Take a look at: http://www.fiveminuteargument.com/progress-bar This would be a non-issue if Eric Meyer's suggestion to allow href on any element were to take off: http://meyerweb.com/eric/thoughts/2008/06/02/the-missing-link/ - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] flashing text
--- On Wed, 7/1/09, Tri-State AdVantage k...@tristateadvantage.com wrote: The main problem is that the text is flashing. You have 'text-decoration: blink' on your .region and your .h3 Also, the paragraph headings are suppose to have colored bars across the page and it does not work either. Those 'headings' are actually 'span' elements, which are behaving as you describe, in your context. You /could/ add 'display: block' to those elements, but that's only really delaying the problem. To be honest, the whole page is quite a mess in terms of markup validity and structure. I'd suggest you either start again with clean markup, by hand, or use a tool that's much more standards compliant. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] adjusting overall size in css?
--- On Mon, 6/22/09, David Hucklesby huckle...@gmail.com wrote: I think 1200px a bit ambitious Seconded. Although the following stats are site-specific and, therefore, should only be taken as a very rough guide, they represent a wide audience so should be representative of the general web populous: 1024 x 768 37% 1280 x 800 25% 1280 x 1024 14% 1440 x 900 6% 800 x 600 3% So a whopping 4 out of 10 users will have to scroll your design horizontally to use it. I've noticed an increasing number of websites whose designs do not fit into a 1024 x 768 resolution. For certain audiences, this is probably acceptable, although no less frustrating for me personally. For a general purpose site, however, 960-ish should accommodate at least 90% of your visitors. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] adjusting overall size in css?
--- On Tue, 6/23/09, Rob Emenecker list-s...@hairydogdigital.com wrote: So a whopping 4 out of 10 users will have to scroll your design horizontally to use it. Another thing to bear in mind here, if it was not already mentioned, screen stats ONLY tell you how large the users monitor resolution is. They do not convey whether the user has their browser in a smaller window or not. Great point. I've always wondered quite why Google analytics stores screen resolution, but not browser size. Maybe time to switch stats packages ... __ 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] Chrome vs floated tables
--- On Wed, 6/17/09, Richard Grevers richard.grev...@gmail.com wrote: Google chrome (2.0.172.31) appears to minimise the width of floated tables which have no explicit width, while most other browsers assume 100%. Is this actually a bug or just one of those undefined behaviours that serve as a lesson to always follow Braden's mantra? I've always been led to believe that float without explicit width is a no-no, but I think this might only be due to poor browser implementations. From the spec: 10.3.5 Floating, non-replaced elements - If 'width' is computed as 'auto', the used value is the shrink-to-fit width. http://www.w3.org/TR/CSS21/visudet.html#float-width As I read that, Google chrome is the only browser that behaves correctly - over to someone else to correct ME though :) - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Absolute Positioning
--- On Wed, 6/17/09, Scott Wilcox sc...@tig.gr wrote: I get the position of the containing element (called 'photoContainer') and add that to the x,y points to give me my final absolute position. My problem seems to come in when I'm setting the values for the absolutely positioned elements. In IE, they don't show at all, Firefox 3.0.11 displays them correctly sometimes, Safari is about 20px out and so is chrome. Hi Scott, I think it would probably help to have an actual example to view, rather than just a screenshot, BUT - on your general method - have you considered the following approach: 1. Give photoContainer (or whatever) relative positioning 2. Position the other elements absolutely within that This should reduce any problems caused by different positionings of the containing element. If that doesn't make sense, feel free to mail me directly and I'll explain further. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What's your preference -- fluid, elastic, or fixed?
--- On Fri, 6/5/09, Glow glowvirt...@gmail.com wrote: I hear what you're saying regarding fixed widths and wide screens (like a postage stamp on a coffee table), but that said, one thing I wonder about long-term with fluid layouts and increasing screen size is how to scale content when you've got someone using a gigantic monitor (can you visualize one-line articles stretching across three feet of screen real estate?) This is exactly why 'hybrid' layouts, IMO, need to be developed to cater for the problem trio of line-length, variable width, and variable text size. For example, I've tried to achieve a readable variable width on my homepage with the use of fixed-width (relative to font-size, of course) floats. The wider the browser window, and the smaller the text size, the more 'columns' are displayed. There's a short write-up here: http://www.fiveminuteargument.com/blog/a-flexible-homepage-layout This is the kind of thing that, I hope, the column properties in CSS3 will make a lot cleaner (one disadvantage is that box heights have to be fixed too, and that's difficult to do nicely for variable text length). I'm sure there are other mechanisms in which properties and layout techniques can be combined, as 'hybrid' layouts, to address all 3 problems. I think either David or Georg posted a good message to that effect here a few months ago. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS statements for horizontal rule
I am trying to use horizontal rules
of specific width and position in an
xhtml strict 1.0 web page. The width and align
attributes work, but do not
pass the strict 1.0 validation test (as you probably
know).
I have tried using both class and id statements in a CSS
file (with
appropriate selectors in the body). Neither
work.
Hi Mike,
It should be perfectly possible to achieve what you want, with the method
you're using. Something like:
.test { width: 400px; }
in your CSS and:
hr class=test
will validate and have the expected result. That's 'width', anyway. I'm not
quite sure what you mean by 'position' - maybe you could elaborate.
If this is similar to what you're doing, and it's still not working, a specific
example (preferably by URL) would help us to solve the problem.
Regards,
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS statements for horizontal rule
--- On Tue, 5/19/09, Bobby Jack bobbykj...@yahoo.co.uk wrote: ... in your CSS and: hr class=test ... Sorry, Alan's point about closing the element is obviously an important one; I rarely work with XHTML nowadays! - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Creating your own stylesheet for a website
--- On Fri, 5/1/09, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: Hi Sarah, Is there away for me to create a Stylesheet for it and have my browser automatically override there styles? Yes, but it depends on your browser. Firefox, for example, makes it very easy to do and a search for user stylesheet will probably suffice; example: http://webdesign.about.com/od/css/ht/htcssuserfirefo.htm There are also plugins available which will allow you to supply per-site user stylesheets. I know to many of you this might sound horrible It /should/ sound delightful to most of us, after all it's a key part of the 'C' in 'CSS' :) Unfortunately, no browser supports it very well (IMHO) which is a real shame. P.S. I think this might be considered dangerously close to off-topic, since this list is intended for discussion surrounding specific CSS behaviour rather than more general issues. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Align Theory
--- On Thu, 4/23/09, Jack Blankenships learningcssindet...@gmail.com wrote: The idea that using display: table-cell does not seem to be any more semantically correct than simply placing the element in a table cell ... By definition, CSS declarations are NOT semantic but simply describe the visual rendering of associated markup. There should probably be a less semantically-inclined value than table-cell available, to enforce the separation between style and content, but that doesn't mean that separation is not already present. __ 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] page review
--- On Sun, 4/19/09, David Laakso da...@chelseacreekstudio.com wrote: Comments and suggestions appreciated. http://chelseacreekstudio.com/ca/cssd/op8/index.html Time for some pedantry? :-) * web–site should be written with a standard hyphen, not an en-dash * Asides, such as the one after corporate image should be separated with an em-dash, not an en-dash * Single-character should be hyphenated consistently * I don't know exactly /how/ you should write dot com, but it shouldn't contain an en-dash I find myself visiting this great article from time-to-time to refresh my understanding of the rules: http://www.alistapart.com/stories/emen/ The fact that this might seem so trivial is a) a reflection of how accurately some of us wish punctuation were used on the web and b) testament to the fact that, other than that, the page is well designed, simple, with no glaring problems. Kudos on the generous line-height and the validity. I'm sure you're planning to change the a, b, c class names, though :) Cheers, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page review
--- On Mon, 4/20/09, Felix Miata mrma...@ij.net wrote: Excess line-height is the main problem I found on it. Its main paragraph line length is good, not too long, not too short, and thus there's no good reason for non-standard line-height there. OTOH, the side paragraph line length is quite short, making the excess line-height look badly out of place, as in a middle school term paper. Hmmm... I see your point about the sidebar - with its (much) shorter line length, there's no reason for its line height (1.5) to be greater than that of the main copy (1.4). However, neither of these values is excessive, IMHO - I much prefer a little too much line-height than the terrible default of too little, anyway. __ 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] simple margins not collapsing
--- On Thu, 4/16/09, Trevor Nicholls tre...@castingthevoid.com wrote: Can somebody please explain why the lower margin of my first para and the upper margin of my fragment div are not collapsing? You fragment div is floated left. From the spec. (http://www.w3.org/TR/CSS21/box.html#collapsing-margins): Vertical margins between a floated box and any other box do not collapse How could I fix this? Turn the float off (if the div doesn't need it) or remove the margin. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background images
--- On Tue, 4/14/09, Brian Hazelton bdh_2...@comcast.net wrote: When should I use an image and when should i use it as a background image. Semantically (and generally) speaking, it's recommended that you use an img element if the image is actually part of the content (e.g. you're displaying a bunch of photos, maybe with comments) and a background image if it's 'decoration', such as a border. Of course, this can be subjective and the distinction gets somewhat blurry - a logo, for example, is not as obviously classified as the previous two examples. You may also find various benefits of one or the other for styling purposes, but you should try and avoid breaking the general rule if possible. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float and Width
--- On Thu, 4/9/09, Del Wegener d...@delweg.com wrote: ... I get warnings when validating css. http://www.drdelmath.com/playpen/test1_float.htm Which validator are you using? W3C's gave no errors when I tried it. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 column expanding center column CSS
--- On Thu, 4/9/09, Yazmin Media ywick...@gmail.com wrote: I need to setup a 3-column, fixed width layout that allows the center column to expand in width when necessary. That's a bit of an oxymoron, but if you want the middle column to be no smaller than a certain width, you can use min-width. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrap text in li
--- On Thu, 4/9/09, Chike Loney chikelo...@gmail.com wrote: Hi guys, can anuyone tell me how to wrap text in a list item please? Sure: litext/li :-) Of course, you're /probably/ not asking for that, but it would be useful to have a BIT more detail. Do you mean 'dynamically'? If so, you want to be looking at javascript for that, not CSS. Do you mean 'wrap' as in what happens when text won't fit within the width of one line? That should happen automatically, but you can reduce the width of the parent ul/ol with the CSS width property. I can't think what else you might mean. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer xhtml and css valid
On Sun, 4/5/09, David Laakso da...@chelseacreekstudio.com wrote: Brian Hazelton wrote: I have a web design company and was wondering if it is still common practice to put the links to w3c in the footer if the pages validate for xhtml and css I think their inclusion is a matter of opinion. Personally, I think they are distracting and unnecessary. I recently removed the full size validation buttons from my (personal) site's footer. Whilst they're useful to me, they're probably not so to that many others, although they're certainly more relevant to my audience than that of a general interest site. I think there's a perception that they smack somewhat of a 'look how good I am' mentality, and there's a danger you'll be shot down in flames should a single validation error occur when those links are followed. This (type of) information should almost certainly be provided by the browser rather than individual web pages. - Bobby (fiveminuteargument.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] Positioning images and wrapping text...
--- On Mon, 3/30/09, Michael Beaudoin mich...@ba-doyn.com wrote: Is there a way to precisely position an image and have the wrap follow? Hi Michael, You can achieve what I think you're after simply by wrapping the image in an absolutely positioned container. Demo here: http://www.fiveminuteargument.com/positioned-floated-image Let me know if that's not quite what you're after. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float problem in Firefox
--- On Sat, 3/28/09, Gaurav Sharma sharmal...@gmail.com wrote: I have a small problem with float in Mozilla. http://gauravsharma.uuuq.com the background image does not render right. Hi Gaurav, With only a cursory glance, I have a feeling that the structure is slightly more complicated than it need be - there are quite a few nested divs there. However, with what you have, the containing element with the background (#footer) needs to clear the floats that it contains. One method is applying 'overflow: auto' to that element. Alternatives can be found with a search for 'self clearing float'. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is this possible with CSS?
Hi Geoffrey,
Have you tried something like the following?
ul { list-style-type: none; color: #fff; }
li:hover { list-style-type: disc; color: #f7c30e; }
li:hover a { color: #f7c30e; }
a { text-decoration: none; color: #fff }
(The li:hover a and a { color: ... } seem to be required by IE7 - gah.
Other browsers handle inherit properly)
Probably won't work in IE6, although I haven't tested it; one version of IE
doesn't like :hover on anything but a, but I cannot remember which
- Bobby
--- On Sun, 3/29/09, Geoffrey Hoffman geo...@globalmediaminds.com wrote:
From: Geoffrey Hoffman geo...@globalmediaminds.com
Subject: [css-d] Is this possible with CSS?
To: css-d@lists.css-discuss.org
Date: Sunday, March 29, 2009, 3:20 AM
I'm trying to replicate the effect done (with tables,
images and Javascript) in the left column of this page...
http://holdenluntz.com/artist.htm
... with CSS only.
Specifically, I want the li bullet to turn a color
when I hover on the a inside it. (Ignore the images
that show up on hover in the right-hand column). I've
recoded it as a simple link list, e.g
ul
lia href=#Link
One/a/li
lia href=#Link
Two/a/li
lia href=#Link
Three/a/li
/ul
I know that it's possible to use a re-positioned
background image to achieve this effect, but I was wondering
if it is possible to do with CSS only. I've tried
several of the obvious things without any luck.
Any suggestions?
TIA,
Geoff
__
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] Is this possible with CSS?
--- On Sun, 3/29/09, Geoffrey Hoffman geo...@globalmediaminds.com wrote: I just can't make the bullet change on hover. I think it's due to how selectors work. The CSS I supplied should do just that - turns off the bullets on the whole list by default, turns them back on for each li, much as your example does. In short, the hover is happening on a but I'm trying to change the color of li (a's parent) To do this (without javascript or) requires the :hover to apply to the li. This shouldn't, practically, be a problem (other than the possible old-version-of-IE issue I mentioned previously). - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE list problem
--- On Fri, 3/27/09, Peter Hammarling pe...@artworkers.net wrote: It gives a negative left margin to ul's and ol's. I couldn't find another way to make list items line up with the rest of the text although I'd tried all combinations of margin 0 and padding 0. I use the 'position: relative, left: -1.5em, padding-left: 1.5em' technique from http://csshowto.com/typography/hanging-punctuation-with-css/ for full IE compatibility. Not sure if it's better than a negative left margin but, given IE's tendency to screw negative margins up, I suspect this is a safer IE-6 solution. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin Collapsing down to the html element itself
--- On Mon, 3/23/09, Robert O'Rourke r...@sanchothefat.com wrote: The page is at http://www.sanchothefat.com/dev/tc/ and the unwanted space is at the bottom of the page in the latest Firefox and Opera but not in Safari or Chrome. As ever, Firebug is your friend. The extra space is not a margin, but the slightly strange image at the end of your document. The one with an ID of 1 which, BTW, is invalid. I'm not sure what's inserting that, but it seems wordpress related (maybe a plugin) and I think must happen via javascript, since I can't see it in the source document. The image itself is an animated 'throbber', of the sort popular for ajax notification. I'm also not quite sure who's interpreting the CSS correctly; the image is 'off-screen', but only in the horizontal direction. Setting top to 0, for example, removes the additional space (but I'm not necessarily suggesting this as a complete solution!) Hope that helps, - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin Collapsing down to the html element itself
--- On Mon, 3/23/09, Els el...@tiscali.nl wrote: That's what I thought at first too, but it's actually the letter 'l'. (lowercase L). Good call! I guess that proves: a) Firebug's default font is poorly chosen b) Using lowercase ELL as an ID (or a name, or a variable, ...) is a pretty stupid idea, even if it IS valid c) I need to double-check things before throwing accusations around :-) __ 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] [OT] EMs vs. PERCENTs
--- On Thu, 3/19/09, Rob Emenecker list-s...@hairydogdigital.com wrote: I am looking for a few good web locations that explain and clarify the differences between EMs and PERCENTS Rob, do you mean: a) For font sizing b) For layout c) In general (i.e. including both the above) There are a few quite considerable differences if you're talking anything more than basic syntax. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [OT] EMs vs. PERCENTs
--- On Thu, 3/19/09, Michael Stevens bigm...@bigmikes.org wrote:
So, is it uncommon, or bad practice, to use both in this
situation?
{height: 7.2em; width: 20%;}
More and more, I find myself using the two in various combinations. It gets
particularly interesting if you throw pixels into the mix (which *can* still
have valid uses!) and/or combine different measurements with, for example,
width, min-width, and max-width.
Generally speaking, I think the following are relevant points:
1. Line lengths are less legible if they are too short or too long; this
suggests some level of box-sizing related to font-size, i.e. ems.
2. That's not to say the line length cannot vary; min-width and max-width in
ems can still achieve readable copy with varying font sizes.
3. Horizontal scrolling is BAD. Unrestricted em-sizing tends to lead to
horizontal scrolling, but this can be mitigated (esp. on the good browsers)
with max-width as a percentatge - e.g. 100%
4. Users with v. wide screen resolutions might like to take advantage of the
fact. This suggests some level of percentage-based box sizing (for width).
5. Equally, users with narrow resolutions are increasingly common - mobile
phones, handheld games consoles, pdas, etc. It would be wise to ensure your
content is at least readable by them, so large fixed widths may not be the best
long-term strategy.
I think 'combined measure' layouts are the way of the future; georg (I /think/
- apologies if someone else!) discussed these at great length in an excellent
mail the other day. Em layouts have fallen out of favour recently with the
introduction of page zooming, especially given that percentage-based layouts
tend to behave 'nicely' with this technique (i.e. NOT causing horizontal
scrollbars in good browser implementations). I don't think 'unrestricted'
percentage-based layouts are the end of the story, though.
I'm currently experimenting with a (much improved) layout for my site's home
page which will combine some of these concepts to produce a layout that scales
nicely with font size, adapts to browser width appropriately, and gives
everyone 'screen estate' value for money. More on
http://www.fiveminuteargument.com very soon.
- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
