[css-d] What's your preference -- fluid, elastic, or fixed?
I normally work with fixed layouts because I find that I have more control over the ultimate appearance of the design. But lately I'm becoming more interested in fluid or elastic layouts because of their greater accessibility. So, just out of curiosity -- what's your particular preference and why? Peg ambientglow __ 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 Menu problem
Alan Gresley wrote: The most notable difference occurs with lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left while Internet Exploder uses margin-left to indent, All modern browser have padding-start for list, not padding-left since this default (padding-start) is applied regardless of if the text flows from left to right or right to left. Pedantically, you are correct. but as you are discovering Exploder also has a default top padding. Is this a IE6 whitespace bug you referring to for li? Heh, no. It seems I was a little too cute for my own good. I meant IE has a top padding of zero (the OP already knew Firefox had a top padding), hence the difference. That's why a padding of 0 on the UL seemed to fix the problem, at least at my end. Further reading: [1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ Using the Meyer reset or any other reset is the same a knocking down a bridge and then building it back up and can add many extra styles to ones CSS Reset sheets have their limitations, but it seems more of a personal preference than right or wrong to me. To be fair, IE8 can not be referred to as 'exploder' since it now is the best in implementing CSS2.1 correctly. Agreed, and FWIW I consider IE8 to be an excellent browser. adieu Mark __ 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 Menu problem
Mark Henderson wrote:
Is this a IE6 whitespace bug you referring to for li?
Heh, no. It seems I was a little too cute for my own good. I meant IE
has a top padding of zero (the OP already knew Firefox had a top
padding), hence the difference. That's why a padding of 0 on the UL
seemed to fix the problem, at least at my end.
[...]
adieu
Mark
There is no padding top Mark. All browsers (apart from Safari) have the
default margin-top (1em) of the list showing. IE7- makes default
vertical margins disappear [1] since the list is within a hasLayout
container (the orange box is a float). So when you gave the style,
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
you zeroed out the margin-top of the list. Safari I think is mangling
the HTML causing the margin space to disappear and IE8 shows an unusual
drop of the link 'Standard' under it's own bullet.
http://www.donann.co.uk/new_site/vertical_menu.html
Mangled HTML:
lia href=placeholder
class=left_menu_indentbAll-in-ones/b/strong/li
1. http://css-class.com/test/bugs/ie/haslayout-margins.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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, Jun 05, 2009 at 12:05:35AM -0700, Glow wrote: I normally work with fixed layouts because I find that I have more control over the ultimate appearance of the design. But lately I'm becoming more interested in fluid or elastic layouts because of their greater accessibility. So, just out of curiosity -- what's your particular preference and why? I'm not sure what distinction you make between fluid and elastic, so I'll just answer anything but fixed. Screens are getting both larger and smaller these days, so any fixed width you may choose will either be a narrow strip down a widescreen HD display, a morass of horizontal scrolling on a handheld device, or (more likely) both. Also keep in mind that HTML/CSS presentation is ultimately decided by the browser - the user can disable CSS, apply cusom stylesheets to override your CSS, use a screen reader, etc. - so any control over the ultimate appearance that a fixed width may provide is little more than an illusion anyhow. -- Dave Sherohman __ 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 05/06/2009, at 6:32 PM, Dave Sherohman wrote: On Fri, Jun 05, 2009 at 12:05:35AM -0700, Glow wrote: I normally work with fixed layouts because I find that I have more control over the ultimate appearance of the design. But lately I'm becoming more interested in fluid or elastic layouts because of their greater accessibility. So, just out of curiosity -- what's your particular preference and why? I'm not sure what distinction you make between fluid and elastic, so I'll just answer anything but fixed. Screens are getting both larger and smaller these days, so any fixed width you may choose will either be a narrow strip down a widescreen HD display, a morass of horizontal scrolling on a handheld device, or (more likely) both. Also keep in mind that HTML/CSS presentation is ultimately decided by the browser - the user can disable CSS, apply cusom stylesheets to override your CSS, use a screen reader, etc. - so any control over the ultimate appearance that a fixed width may provide is little more than an illusion anyhow. -- Dave Sherohman Hi Glow, It's got to be fluid for me, because it makes things easier for the user. They don't have to resize browser, play with settings, feel like they are looking at something from the dark-ages or that side scrolling is a web 2.0 trend! However i feel that it is harder to do fluid and elastic (by elastic I take it that you mean; the main container, possibly one or two other containers are fluid but one or two might be fixed width) so it is a tricky choice, depending on the deadline or how much you care about that website. I generally choose fixed because it is easier for me, and I am primarily a designer so rounded corners and funky backgrounds are more easily achieved by background images rather than floating corners and repeating images that can deal with resizing. I should make the switch though. The only thing that is holding me back from always working in fluid is font-sizing. I really don't understand percentages, I am used to working in pixels. My first website was fluid and all I can remember about designing for fluid was setting max-width and min width (I think hacks had to be made), plenty of clear divs and lots of cool things you can do with fixed position objects as you resize the page. The result was much better than if I had gone with fixed. %%% percentages to haunt my dreams until I concur % %%% Anyone got any good guides, links? cb __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What's your preference -- fluid, elastic, or fixed?
I'm not sure what distinction you make between fluid and elastic, so I just wanted to mention that I've seen elastic as widths defined by ems, fluid by percents and fixed set by pixels. -Delos __ 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 Menu problem
Thanks to everyone for replying.
Especially Yazmin for the styles, which solved the problem, and Mark for the
explanation which has helped me greatly in understanding what was happening
and may help with a few other quirks!
John
On Thursday 04 June 2009 22:58:20 Mark Henderson wrote:
On Behalf Of Yazmin Media
Sent: 5 June 2009 04:38
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
__
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/
--
http://www.donann.co.uk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What's your preference -- fluid, elastic, or fixed?
Delos Woodruff wrote: I'm not sure what distinction you make between fluid and elastic, so I just wanted to mention that I've seen elastic as widths defined by ems, fluid by percents and fixed set by pixels. -Delos So have I and sometimes use same. There is a distinct advantage to the min/max width method employing px, em, percent widths. A page, for example, will have a readable line-measure /on landing/-- regardless of the users monitor size or window she has open in it. Nevertheless, there is no one-size-fits-all layout that will accommodate /every/ personal or client need. The choice of layout, and its method for setting width, depends on what you or your client happen to be pimping or pushing. As we move closer toward CSS3 (and beyond) the number of choices for layout construct in working the Web will grow... __ 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?
I think of elastic as being a hybrid of fluid and fixed. 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?) Peg On Fri, Jun 5, 2009 at 3:32 AM, Dave Sherohmand...@sherohman.org wrote: On Fri, Jun 05, 2009 at 12:05:35AM -0700, Glow wrote: I normally work with fixed layouts because I find that I have more control over the ultimate appearance of the design. But lately I'm becoming more interested in fluid or elastic layouts because of their greater accessibility. So, just out of curiosity -- what's your particular preference and why? I'm not sure what distinction you make between fluid and elastic, so I'll just answer anything but fixed. Screens are getting both larger and smaller these days, so any fixed width you may choose will either be a narrow strip down a widescreen HD display, a morass of horizontal scrolling on a handheld device, or (more likely) both. Also keep in mind that HTML/CSS presentation is ultimately decided by the browser - the user can disable CSS, apply cusom stylesheets to override your CSS, use a screen reader, etc. - so any control over the ultimate appearance that a fixed width may provide is little more than an illusion anyhow. -- Dave Sherohman __ 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] What's your preference -- fluid, elastic, or fixed?
Chris Blake wrote: The only thing that is holding me back from always working in fluid is font-sizing. Anyone got any good guides, links? cb Our friend of the list(s) Georg Sortun, has any number of layouts that are spins on the negative-margin concept. This particular layout of his employs min/max width using %, px, em values. [1]. Read his documentation for it carefully, and font-sizing will not be problematic regardless of what browser a user opens it in, or what text-size setting she prefers. [1] http://www.alistapart.com/articles/negativemargins/ [2] http://www.gunlaug.no/tos/moa_12a.html __ 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] What's your preference -- fluid, elastic, or fixed?
On 2009/06/05 07:21 (GMT-0700) Glow composed: 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?) If you set a reasonable overall maximum width in em, with lines neither too narrow nor too wide, also measured in em, then the giant display user would have to be using an even more gigantic font size in order for his whole screen width to be filled. The same applies with mini laptop users, who would also have to be using a disproportionately large font size for the content not to fit in the available space without horizontal scrolling. -- Cast but a glance at riches, and they are gone, for they will surely sprout wings and fly off to the sky like an eagle.Proverbs 23:5 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] first-child pseudo-class not behaving as expected
Hi all,
I am trying to use the first-child pseudo-class to set a zero top margin in
several content divs on a page. The page works in IE7, but not FF3 -- kind
of the opposite of what I would expect. In FF3 the sidebar has a single p
element in it, and a style of...
div#sidebar:first-child *
{margin-top: 0;}
But it does not work in FF3. Why? I've tried using specific elements rather
than the universal selector, with no difference. When I look at the code
using Firebug in Firefox it does not even show the pseudo-class on the
sidebar div (however it does show it with the content div).
The XTHML and CSS validate, and I've checked through it for typos and
errors. Can't find a thing. I've also begun to wonder if there is something
overriding the first-child declaration in the cascade.
Link to problem page:
http://new.pasadenabusinessassociation.com
Any suggestions?
Best regards,
Rob
Rob Emenecker @ Hairy Dog Digital
410.694.3575 (arf) || 410.694.3550 (fax)
www.hairydogdigital.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] first-child pseudo-class not behaving as expected
Rob Emenecker wrote:
Hi all,
I am trying to use the first-child pseudo-class to set a zero top margin in
several content divs on a page.
div#sidebar:first-child *
{margin-top: 0;}
http://new.pasadenabusinessassociation.com
Any suggestions?
/*div#content:first-child * { margin-top: 0; } delete ruleset*/
/*div#sidebar:first-child * { margin-top: 0; }delete ruleset*/
p {border: 1px solid red;margin: 0 0 15px 0;}/*add ruleset*/
Rob
~d
__
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] first-child pseudo-class not behaving as expected
/*div#content:first-child * { margin-top: 0; } delete
ruleset*/
/*div#sidebar:first-child * { margin-top: 0;
}delete ruleset*/
p {border: 1px solid red;margin: 0 0 15px
0;}/*add ruleset*/
David,
That works in the one example, but the purpose of me setting these the way I
did was so that ANY element that was the FIRST element in either of those
DIVs would have a margin-top value of 0 pixels. It's a heck of a lot less
coding that doing a universal reset on all possible elements, and then
having to make all vertical margin adjustments using only the bottom one.
Also, this will be destined for a user-maintainable CMS setup. So while I
could always create a first-element class that has a margin-top value of
0, I have no guarantee that the end-user content editor will remember to
apply that class the first element --OR-- remove it if a previous
first-element now falls lower into the content.
...Rob
Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
__
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] first-child pseudo-class not behaving as expected
Thanks Tim,
div#sidebar p:first-child { margin-top: 0; }
Somehow, somewhere I misread the an explanation of the specification and got
the placement of the [:first-child] pseudo-element incorrect.
The following does work in IE7+ and FF3:
div#sidebar *:first-child {margin-top: 0;}
div#content *:first-child (margin-top: 0;}
I realize bets are off with IE6, however, with standards-compliant sites, I
basically take a horseshoes and hand grenades approach with IE6. So the
margin-top value in the case of IE6 will be acceptable.
...Rob
Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
__
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] first-child pseudo-class not behaving as expected
Rob Emenecker wrote:
/*div#content:first-child * { margin-top: 0; } delete
ruleset*/
/*div#sidebar:first-child * { margin-top: 0;
}delete ruleset*/
p {border: 1px solid red;margin: 0 0 15px
0;}/*add ruleset*/
David,
That works in the one example, but the purpose of me setting these the way I
did was so that ANY element that was the FIRST element in either of those
DIVs would have a margin-top value of 0 pixels. It's a heck of a lot less
coding that doing a universal reset on all possible elements, and then
having to make all vertical margin adjustments using only the bottom one.
Also, this will be destined for a user-maintainable CMS setup. So while I
could always create a first-element class that has a margin-top value of
0, I have no guarantee that the end-user content editor will remember to
apply that class the first element --OR-- remove it if a previous
first-element now falls lower into the content.
...Rob
You are way over my head, Rob. But given what you state is a given case,
then the solution may well lie within a problem solving language--
programming?
__
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/
