Re: [css-d] David Laakso's site in Firefox 2.x/Firefox 3.x
Gunlaug Sørtun wrote: david wrote: Looked at it in FF 3.0.4 on Linux with JS on. The first time I went (with JS turned off) the About section was expanded. After I turned JS on, the About section was collapsed, and clicking on About did NOTHING beyond put a dotted horizontal line above and below it. After changing preferences one also has to reload the page in that Gecko for all preferences to work on it. Quite normal in many browsers. I did with a Ctrl-click on the Reload button. http://www.chelseacreekstudio.com/yl/index.html works as expected - ok - in all Geckos and a range of other browsers on Ubuntu. -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slice not working?
Christopher R wrote: Sorry, for the multiple threads I just want to get this solved. The problem happens in FireFox 3.x, all you have to do is view the page in IE7 then compare that to FF3 and IE6 and you'll see. Argh Well, some of us don't have IE7 around to see what it's supposed to look like ... but if you're using any variety of IE as your idea of how it's supposed to look: that could be your problem there. Better idea is to make it look the way you want in FF and other standards-compliant browsers, then patch around whatever of the uncountable numbers of IE bugs prevent IE from displaying it the same way. -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check: Can this DIV be vertically centered in theviewport?
From: Stephen Tang clowwizarder...@gmail.com Yes, I am aware about enlarging the font. Unfortunately, the center image is a fixed height and it didn't look good if the box became vertically longer as the font size increased. http://www.isadoratang.com/index.php I'm kind of surprised at that thought because I would think that enlarging the box so that the text was still on the white background (when font size is increased) would be preferable to having the text shoot out the bottom of the fixed-height box, as it does now. For what it's worth, I could not comfortably read your text as set, and HAD to increase the font size, causing the behavior described above. I have no idea what the text on that image says, it is too small to read. Page zoom in Opera (to 180%) allowed me to read some of the image text, but not all of it, as the font used is narrow and squished together. I have no idea what it says under Sage College of Albany because if I zoom the page much further the top of the image scoots out the top of the viewport and is unviewable, and the text does not become more readable anyway. The page navigation (portfolio, about, contact) begins leaving the viewport as well at this page zoom on my machine. I realize that these issues depend on the size of someones monitor and browser, but perhaps they are worth considering. As a reference, most of the time I do not wear glasses, only for reading books and the like (not the computer screen). ~holly __ 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] David Laakso's site in Firefox 2.x/Firefox 3.x
david wrote: I did with a Ctrl-click on the Reload button. Should do the trick -- and does at my end. I don't know what prevented expected functionality at your end. regards Georg -- http://www.gunlaug.no __ 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] just center
MEM wrote:
Ok. I have comment this two lines: Now it seems to work in FF.
/*height: 20em; */ /*width: 30em; */
If this is OK, I will try to understand the IE part now.
Height isn't needed but you'll need the width on #centered. Otherwise
you just get a container as wide as the viewport with centered text in
it. If that's what you want then it's ok, but I can't see the point.
For the IE part (for IE7 and older), you just have to read the article.
All about how it works is expanded and explained there.
regards
Georg
--
http://www.gunlaug.no
Georg wrote:
Otherwise you just get a container as wide as the viewport with centered
text. If that's what you want then it's ok, but I can't see the point.
I want something really simple, like a little lettering on the center,
saying under construction with a logo, or hang on, for example, just to
have something there before a site get's done.
But well... now that I look at it, I actually don't need the centered div.:S
Only the wrapper one.
But since I may want to create other things with a centered layout (for
example, I may want to center a modal popup on the future), I will comment
on that div and on the width so that, in the future, I can give them a good
use, if there is no better solution at the time. :)
## Now the IE part:
#
div#centered {
margin-top:
expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)
/2) 0 ? 0 :
(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2)
+'px') ;
}
offsetHeight is part of the MSIE's DHTML object model.
It is a representation of the height in IE browsers, that it's higher than
the padding, the border and the margin of any element inside the browser
window. (well... this is not correct, it's not browser window, because
browser window contains also buttons, and other elements.
1) How do we call the (normally white) part where we put or code inside?
2) When we do document.documentElement, we are telling, in this case, give
me the element with the tag body or the tag html ?
Quoted: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092
documentElement of type Element, readonly
This is a convenience attribute that allows direct access to the
child node that is the root element of the document. For HTML documents,
this is the element with the tagName HTML.
Anyway, is this interpretation correct?
We take that offsetHeight and we divide it by 2. (so, or margin-top property
is now pointing at the middle of the html document (or body?) element.
Once there, we subtract the half of the offsetHeight of the element (in this
case, the #centered div). What do we get? The margin-top of a centered
element of any given height.
But if that height, after the calculations, bring us a negative value, for
example, if, somehow, (I'M NOT SURE OF THIS) we will have a centered element
bigger than the dimensions of our browser (white part), (I'M NOT SURE
ABOUT THIS EITHER) and since we don't want parts of the content of that div
to disappear, then, we should give him a margin-top of 0.
Well, I'm not sure about my last statement since I have tested it like this,
with a 200em element, and I get always the top margin of 0:
margin-top:
expression(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/
2) +'px') ;
I And, somehow, I was expecting the content to go outside the browser white
part, (with negative margins) but he does not, and I get always a margin of
0. Maybe it's because this calculations, work on a window with no scroll
bars. But since the browser generates scroll bars, there will never be the
case, where center div will get bigger than the
documentElement.offsetHeight ???
I'm confused, what's going on on this code?
Thanks a lot,
Márcio
__
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] just center
MEM wrote: I'm confused, what's going on on this code? Simple logic, coded in jscript and expanded/explained here... http://www.gunlaug.no/contents/wd_additions_20.html#item3 ...and there's a link to Microsoft's information on the subject in my page... http://msdn.microsoft.com/en-us/library/ms533024.aspx Beyond that I don't want to reiterate stuff from my two year old article on how to use IE-expressions to overcome weaknesses in old IE's CSS support. After all: Support for IE-expressions is discontinued in IE8 - no need for it, and older IE versions that supports it are slowly dropping in numbers. regards Georg -- http://www.gunlaug.no __ 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] just center
Simple logic, coded in jscript and expanded/explained here... http://www.gunlaug.no/contents/wd_additions_20.html#item3 ...and there's a link to Microsoft's information on the subject in my page... http://msdn.microsoft.com/en-us/library/ms533024.aspx Beyond that I don't want to reiterate stuff from my two year old article on how to use IE-expressions to overcome weaknesses in old IE's CSS support. After all: Support for IE-expressions is discontinued in IE8 - no need for it, and older IE versions that supports it are slowly dropping in numbers. regards Georg -- http://www.gunlaug.no Thanks for the IE8 info. I didn't know about that. Well, at the time of my last e-mail, I have read the article on your page. And I have also read the similar information about the offset here: https://developer.mozilla.org/en/DOM/element.offsetHeight After the reading, and some testing, I was having some doubts that I've expressed on the last e-mail. Please don't take me wrong: I was not putting the article in question, neither trying to make you reiterate things that you have written before. I was just asking for a clarification and trying to understand how things really happen on that .js code. But it was a too long pseudo-English e-mail from someone who doesn't even properly know the language, and I assume my fault for some miscomprehension that may have arrived. Despite the fact that that code will be deprecated sometime, I still want to learn how to read it, but, as you stated, maybe I should look elsewhere. Thanks for your time, once again, Márcio __ 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] just center
MEM wrote: Thanks for the IE8 info. I didn't know about that. IE8 still supports IE-expressions in its two backwards compatibility modes - emulating IE7 standard mode and IE5.5/6 quirks mode. No need to hide them from IE8 in super-standard mode though, since it simply ignores them then. Most of what we can do with IE-expressions can be done in regular CSS already - in supporting browsers, and new CSS functions like calc() will improve things even more in the coming years. Please don't take me wrong: I was not putting the article in question, neither trying to make you reiterate things that you have written before. Question all I write as much as you like, as I can't imagine any of it being even remotely close to perfect. In a few years probably most of what I've written about such problem-solving in old browsers will be obsolete and should be deleted anyway, as browsers slowly catch up with common standards. I was just asking for a clarification and trying to understand how things really happen on that .js code. Ok, I'll try. See below. But it was a too long pseudo-English e-mail from someone who doesn't even properly know the language, and I assume my fault for some miscomprehension that may have arrived. Language isn't a problem here, despite the fact that English isn't my native language. I'm Norwegian... :-) I did however have a problem with you not being able to see that I've avoided negative margin-top by simply setting the top-margin to zero if it ever could become negative. Blame my short response on the fact that I, as goes for many who have been around on various lists and forums for a few years, has grown a bit tired of continuous spoon feeding when I think the case has been made clear enough already. Such impatience and shortness may hit the wrong people at times - sorry. Despite the fact that that code will be deprecated sometime, I still want to learn how to read it, but, as you stated, maybe I should look elsewhere. Most would read my IE-expression from a Javascript background, so a person fluent in Javascript should be able to help you extract more details. I have no real experience with Javascript, so I created the expression based on simple logic that works in all programming languages. It was just a question of getting the syntax right for the language at hand. Microsoft's dynamic expressions are compact, but not very straightforward to create or read IMO. Glad I won't have to write many, if any, more of those. --- The original problem was that a negative margin-top would obviously hide the top of the container above viewport area, and that would be no improvement over basic absolute positioning that many use for such horizontal and vertical centering. If that was good enough, then no IE-expression would be needed. Avoiding a negative margin-top is the only slightly clever part in my expression - and why I coded it. In practice I'm dividing dimensions of body (equal to viewport) and the centered element by 2, and subtract half of one from half of the other to get the offset needed to get the vertical mid-point of the element positioned in the vertical mid-point of viewport, *if* (and only if) the viewport is tall enough to house the entire container. If the viewport is too small for the element, I zero out margin-top so the element stays inside viewport. Hope that helps a bit. regards Georg -- http://www.gunlaug.no __ 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] 3 columns of text, but MINIMAL wrapping, possible?
I would think this is fairly common, but I can neither find a solution or figure one out :(. I just want 3 columns in my header like this (texts are just examples): Login/SignupWe are the bestLanguages | Settings | Help The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. So when the browser window is small, they can crunch right next to each other (maybe with 1-2 ems padding between). Any more downsizing of the browser window and they'll HAVE to wrap, that's ok, but ideally I'd love a min-width setting that acts on that threshold. This is easily achieved (though I haven't even tried it) using tables. But I need We are the best (not my real text) to be top in the source order. And, of course, I'm very hesitant to use tables for layouts. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? Oh and Languages is a drop-down menu. Is the above possible without using a table for the layout? Is the above possible while keeping We are the best at the top of the source order? Thanks so much for any help. This is my first CSS stylesheet, I've only just read a few books on CSS including the excellent Flexible Web Design Creating Liquid and Elastic Layouts with CSS by Zoe Gillenwater. -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ 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 columns of text, but MINIMAL wrapping, possible?
Scott Mueller wrote: The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? IE8 has proper support for CSS table, and older IE versions can be tricked... http://www.gunlaug.no/tos/moa_11h.html However, problems arise when one wants source-ordering, table behavior and old IE trickery all at once in a self-adjusting layout. Neither HTML table nor CSS table permits real source-ordering, so you'll probably end up with a complex solution to a small problem. I don't think it's worth it for anything but proof of concept cases. In real life I would forget source-ordering, and use a regular HTML table for a case like yours, to achieve optimal fluidity without premature wrapping, while avoiding problems with older IE versions' lack of CSS table support. You also have to take into account that text can/will be resized, which in itself will complicate things enough if your case is supposed to work across browser-land and various end-user options. regards Georg -- http://www.gunlaug.no __ 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 columns of text, but MINIMAL wrapping, possible?
On Sunday, March 22, 2009 7:38:22 pm Scott Mueller wrote:
I would think this is fairly common, but I can neither find a solution or
figure one out :(. I just want 3 columns in my header like this (texts are
just examples):
Login/SignupWe are the bestLanguages | Settings |
Help
The difficult part is that I want these columns to NOT wrap as much as
possible, spread across the width of the browser window and have equal
amounts of whitespace between.
If you want things to appear out-of-flow, you'll need to specifically position
them. Do you really want equal amounts of white space, or columns of equal
width? The latter is easy. The former may not be possible.
You might try three divs like this:
body {min-width: 640px} /* keeps the page from shrinking too much */
div#mainContent {
position:absolute; /* positions this column out of the flow */
left: 33%; /* left 1/3 to leave room for the left
column */
width: 33%; /* width is 1/3 of the screen */
text-align: center; /* aligns the text in the center to help with
the white
space balance */
}
div#left {
float: left;/* need this to keep the div from bumping the
right side down
*/
width: 33%} /* keeps the left column from flowing into the center one */
div#right {
float: right; /* positions the right column over on the right side */
width: 33%; /* again keeps right content out of the middle space */
text-align: right; /* helps keep the white space as equal as possible */
}
To better approximate the equal white space requirement, you might try playing
with the width of the left and center columns (change left to 20%, and center
to 46%, or something like that.) But specially adjusted percents like that
won't hold up well to browser and text resizing. The text will end up
wrapping pretty quickly.
This is easily achieved (though I haven't even tried it) using tables. But
I need We are the best (not my real text) to be top in the source order.
And, of course, I'm very hesitant to use tables for layouts. I know
there's a display: table declaration, but I understand no IE browsers pay
attention to it... maybe there's an IE hack for this?
Tables wouldn't let you have that at the top of the source. I forget whether
they resize to the content, because I haven't used them for positioning in
years. That would be their only benefit in this case, i think (if they do
that).
Oh and Languages is a drop-down menu. Is the above possible without
using a table for the layout? Is the above possible while keeping We are
the best at the top of the source order?
You can stick whatever you want in a div, so the drop down's not going to be a
problem at all.
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
Hi Gunlaug, thank you for your quick response. Sounds like I'm best off using a table for my layout as painful as that sounds after reading 3 books properly explaining how wrong doing so is... On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Scott Mueller wrote: The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? IE8 has proper support for CSS table, and older IE versions can be tricked... http://www.gunlaug.no/tos/moa_11h.html However, problems arise when one wants source-ordering, table behavior and old IE trickery all at once in a self-adjusting layout. Neither HTML table nor CSS table permits real source-ordering, so you'll probably end up with a complex solution to a small problem. I don't think it's worth it for anything but proof of concept cases. In real life I would forget source-ordering, and use a regular HTML table for a case like yours, to achieve optimal fluidity without premature wrapping, while avoiding problems with older IE versions' lack of CSS table support. You also have to take into account that text can/will be resized, which in itself will complicate things enough if your case is supposed to work across browser-land and various end-user options. regards Georg -- http://www.gunlaug.no -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ 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] just center
In practice I'm dividing dimensions of body (equal to viewport) and the
centered element by 2, and subtract half of one from half of the
other to get the offset needed to get the vertical mid-point of the
element positioned in the vertical mid-point of viewport
yup, clear...
*if* (and only if) the viewport is tall enough to house the entire
container.
If the viewport is too small for the element, I zero out margin-top so the
element stays inside viewport.
And here WAS my question:
If the browsers, automatically add scroll bars to the viewport, allowing it,
with this, to grow indefinitely, then, when or how can the viewport be too
small for the element?
I mean, each time we make the subtraction between half of the viewport with
half of the element we want to center, we will never get a negative value,
because the viewport will be always bigger then centered element, hence,
I've not understand why we have to set it to 0.
If we give a negative top margin to a element, it will get out of range to
the viewport. Ok.
If we force a negative top margin to go to 0, we will get the contents
visible to us on the viewport. Ok.
But I WAS not getting why we need that on a expression that seemed to never
give a negative value.
Why was I saying that the js expression seems to never give a negative
value? Because I have tested with this expression:
div#wrapper {
margin-top:
expression(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/
2) +'px') ;
}
Then I have change the value of the center element to a exaggerated big
number, and then, I was surprised to see that the center element was stick
on the top, all visible, so, with margin-top 0.
But this WAS my question, not anymore, because, while I was writing this
e-mail, I've noticed that the expression above was not correct. I've
corrected the expression to this one:
div#wrapper {
margin-top:
expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)
/2) +'px') ;
}
And I can now see that the element gets out of range on the top of the
viewport. So I've now understand why we need to use this first line:
expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)
/2) 0 ? 0 .
Yupi!! :)
Thanks a lot for your reply, and for your time on this,
Regards,
Márcio
__
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 columns of text, but MINIMAL wrapping, possible?
Hi Tim, thanks for the response. The issue I have is I really don't want
the text to wrap. It either should only wrap if absolutely necessary (all
whitespace is consumed) or horizontal scrollbars should appear when
absolutely necessary. So it is the equal whitespace that I care about, not
equal size columns. The text also changes for each column based on which
language you're viewing it in, your name, whether you're logged in, etc.
My specified source order isn't the end of the world, just a strong desire.
If I can just do this without tables it would be nice.
On Sun, Mar 22, 2009 at 5:37 PM, Tim Climis tcli...@indiana.edu wrote:
On Sunday, March 22, 2009 7:38:22 pm Scott Mueller wrote:
I would think this is fairly common, but I can neither find a solution or
figure one out :(. I just want 3 columns in my header like this (texts
are
just examples):
Login/SignupWe are the bestLanguages | Settings |
Help
The difficult part is that I want these columns to NOT wrap as much as
possible, spread across the width of the browser window and have equal
amounts of whitespace between.
If you want things to appear out-of-flow, you'll need to specifically
position
them. Do you really want equal amounts of white space, or columns of
equal
width? The latter is easy. The former may not be possible.
You might try three divs like this:
body {min-width: 640px} /* keeps the page from shrinking too much */
div#mainContent {
position:absolute; /* positions this column out of the flow */
left: 33%; /* left 1/3 to leave room for the
left column */
width: 33%; /* width is 1/3 of the screen */
text-align: center; /* aligns the text in the center to help
with the white
space balance */
}
div#left {
float: left;/* need this to keep the div from bumping
the right side down
*/
width: 33%} /* keeps the left column from flowing into the center
one */
div#right {
float: right; /* positions the right column over on the right side
*/
width: 33%; /* again keeps right content out of the middle space */
text-align: right; /* helps keep the white space as equal as
possible */
}
To better approximate the equal white space requirement, you might try
playing
with the width of the left and center columns (change left to 20%, and
center
to 46%, or something like that.) But specially adjusted percents like that
won't hold up well to browser and text resizing. The text will end up
wrapping pretty quickly.
This is easily achieved (though I haven't even tried it) using tables.
But
I need We are the best (not my real text) to be top in the source
order.
And, of course, I'm very hesitant to use tables for layouts. I know
there's a display: table declaration, but I understand no IE browsers pay
attention to it... maybe there's an IE hack for this?
Tables wouldn't let you have that at the top of the source. I forget
whether
they resize to the content, because I haven't used them for positioning in
years. That would be their only benefit in this case, i think (if they do
that).
Oh and Languages is a drop-down menu. Is the above possible without
using a table for the layout? Is the above possible while keeping We
are
the best at the top of the source order?
You can stick whatever you want in a div, so the drop down's not going to
be a
problem at all.
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
__
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 columns of text, but MINIMAL wrapping, possible?
I see you put my desired source order, thanks! The only issue is the spacing between the header parts needs to be equal (this is the most important requirement). On Sun, Mar 22, 2009 at 6:14 PM, Mauricio (Maujor) Samy Silva css.mau...@gmail.com wrote: Hi Scott, As Gunlaug and Tim pointed out there are some issues for a solid solution for the problem. But, just for studies purposes have a look at a test case hosted at: http://www.maujor.com/temp/css-d/fluid-header.html May be you can find a more consistent solution. Regards Maurício Samy Silva -Mensagem Original- De: Scott Mueller sc...@appletree.com Para: Gunlaug Sørtun gunla...@c2i.net Cc: css-d@lists.css-discuss.org Enviada em: domingo, 22 de março de 2009 21:38 Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible? Hi Gunlaug, thank you for your quick response. Sounds like I'm best off using a table for my layout as painful as that sounds after reading 3 books properly explaining how wrong doing so is... On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Scott Mueller wrote: The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? IE8 has proper support for CSS table, and older IE versions can be tricked... http://www.gunlaug.no/tos/moa_11h.html However, problems arise when one wants source-ordering, table behavior and old IE trickery all at once in a self-adjusting layout. Neither HTML table nor CSS table permits real source-ordering, so you'll probably end up with a complex solution to a small problem. I don't think it's worth it for anything but proof of concept cases. In real life I would forget source-ordering, and use a regular HTML table for a case like yours, to achieve optimal fluidity without premature wrapping, while avoiding problems with older IE versions' lack of CSS table support. You also have to take into account that text can/will be resized, which in itself will complicate things enough if your case is supposed to work across browser-land and various end-user options. regards Georg -- http://www.gunlaug.no -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ 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/ -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ 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 columns of text, but MINIMAL wrapping, possible?
the spacing between the header parts needs to be equal .. It's possible to achieve ONLY if the header has a fixed width (not fluid as showed in my approach). Regards Maurício -Mensagem Original- De: Scott Mueller Para: Mauricio (Maujor) Samy Silva Cc: Gunlaug Sørtun ; css-d@lists.css-discuss.org Enviada em: domingo, 22 de março de 2009 22:18 Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible? I see you put my desired source order, thanks! The only issue is the spacing between the header parts needs to be equal (this is the most important requirement). On Sun, Mar 22, 2009 at 6:14 PM, Mauricio (Maujor) Samy Silva css.mau...@gmail.com wrote: Hi Scott, As Gunlaug and Tim pointed out there are some issues for a solid solution for the problem. But, just for studies purposes have a look at a test case hosted at: http://www.maujor.com/temp/css-d/fluid-header.html May be you can find a more consistent solution. Regards Maurício Samy Silva -Mensagem Original- De: Scott Mueller sc...@appletree.com Para: Gunlaug Sørtun gunla...@c2i.net Cc: css-d@lists.css-discuss.org Enviada em: domingo, 22 de março de 2009 21:38 Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible? Hi Gunlaug, thank you for your quick response. Sounds like I'm best off using a table for my layout as painful as that sounds after reading 3 books properly explaining how wrong doing so is... On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Scott Mueller wrote: The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? IE8 has proper support for CSS table, and older IE versions can be tricked... http://www.gunlaug.no/tos/moa_11h.html However, problems arise when one wants source-ordering, table behavior and old IE trickery all at once in a self-adjusting layout. Neither HTML table nor CSS table permits real source-ordering, so you'll probably end up with a complex solution to a small problem. I don't think it's worth it for anything but proof of concept cases. In real life I would forget source-ordering, and use a regular HTML table for a case like yours, to achieve optimal fluidity without premature wrapping, while avoiding problems with older IE versions' lack of CSS table support. You also have to take into account that text can/will be resized, which in itself will complicate things enough if your case is supposed to work across browser-land and various end-user options. regards Georg -- http://www.gunlaug.no -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ 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/ -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ 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 columns of text, but MINIMAL wrapping, possible?
Hi Scott, As Gunlaug and Tim pointed out there are some issues for a solid solution for the problem. But, just for studies purposes have a look at a test case hosted at: http://www.maujor.com/temp/css-d/fluid-header.html May be you can find a more consistent solution. Regards Maurício Samy Silva -Mensagem Original- De: Scott Mueller sc...@appletree.com Para: Gunlaug Sørtun gunla...@c2i.net Cc: css-d@lists.css-discuss.org Enviada em: domingo, 22 de março de 2009 21:38 Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible? Hi Gunlaug, thank you for your quick response. Sounds like I'm best off using a table for my layout as painful as that sounds after reading 3 books properly explaining how wrong doing so is... On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Scott Mueller wrote: The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? IE8 has proper support for CSS table, and older IE versions can be tricked... http://www.gunlaug.no/tos/moa_11h.html However, problems arise when one wants source-ordering, table behavior and old IE trickery all at once in a self-adjusting layout. Neither HTML table nor CSS table permits real source-ordering, so you'll probably end up with a complex solution to a small problem. I don't think it's worth it for anything but proof of concept cases. In real life I would forget source-ordering, and use a regular HTML table for a case like yours, to achieve optimal fluidity without premature wrapping, while avoiding problems with older IE versions' lack of CSS table support. You also have to take into account that text can/will be resized, which in itself will complicate things enough if your case is supposed to work across browser-land and various end-user options. regards Georg -- http://www.gunlaug.no -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ 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] 3 columns of text, but MINIMAL wrapping, possible?
So this is what I'm about to use. It's not equal spacing between the 3
columns, but it decreases (or increases) proportionally. So text won't wrap
until absolutely necessary (all whitespace is consumed). Had to use tables
and couldn't use the source order I wanted either :(. Is there anything
better than this? Can I get equal spacing with tables? Browsers seem to
insert the same amount of padding that the text is wide. If I could make
the left and right cells hug the text, problem would be solved, but
padding:0 and margin:0 declarations seem to have no effect:
html
head
style type=text/css
body {
margin: 0;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
td#a {
padding: 0;
text-align: left;
background-color: red;
}
td#b {
vertical-align: top;
text-align: center;
background-color: yellow;
}
td#c {
vertical-align: top;
text-align: right;
background-color: #55FF55;
}
form {
display: inline;
}
/style
/head
body
tabletr
td id=aabc def ghi jkl mno pqr stu vwxyz
formselectoptiontest/optionoptionanother/option/select/form/td
td id=babcdefghijklmnoqrstuvwxyz/td
td id=ca/td
/tr/table
/body
/html
On Sun, Mar 22, 2009 at 6:25 PM, Mauricio (Maujor) Samy Silva
css.mau...@gmail.com wrote:
the spacing between the header parts needs to be equal ..
It's possible to achieve ONLY if the header has a fixed width (not fluid as
showed in my approach).
Regards
Maurício
-Mensagem Original-
*De:* Scott Mueller sc...@appletree.com
*Para:* Mauricio (Maujor) Samy Silva css.mau...@gmail.com
*Cc:* Gunlaug Sørtun gunla...@c2i.net ; css-d@lists.css-discuss.org
*Enviada em:* domingo, 22 de março de 2009 22:18
*Assunto:* Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
I see you put my desired source order, thanks! The only issue is the
spacing between the header parts needs to be equal (this is the most
important requirement).
On Sun, Mar 22, 2009 at 6:14 PM, Mauricio (Maujor) Samy Silva
css.mau...@gmail.com wrote:
Hi Scott,
As Gunlaug and Tim pointed out there are some issues for a solid solution
for the problem.
But, just for studies purposes have a look at a test case hosted at:
http://www.maujor.com/temp/css-d/fluid-header.html
May be you can find a more consistent solution.
Regards
Maurício Samy Silva
-Mensagem Original- De: Scott Mueller sc...@appletree.com
Para: Gunlaug Sørtun gunla...@c2i.net
Cc: css-d@lists.css-discuss.org
Enviada em: domingo, 22 de março de 2009 21:38
Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
Hi Gunlaug, thank you for your quick response. Sounds like I'm best off
using a table for my layout as painful as that sounds after reading 3
books
properly explaining how wrong doing so is...
On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote:
Scott Mueller wrote:
The difficult part is that I want these columns to NOT wrap as much as
possible, spread across the width of the browser window and have equal
amounts of whitespace between.
I know there's a display: table declaration, but I understand no IE
browsers pay attention to it... maybe there's an IE hack for this?
IE8 has proper support for CSS table, and older IE versions can be
tricked...
http://www.gunlaug.no/tos/moa_11h.html
However, problems arise when one wants source-ordering, table behavior
and old IE trickery all at once in a self-adjusting layout. Neither
HTML table nor CSS table permits real source-ordering, so you'll
probably end up with a complex solution to a small problem. I don't
think it's worth it for anything but proof of concept cases.
In real life I would forget source-ordering, and use a regular HTML
table for a case like yours, to achieve optimal fluidity without
premature wrapping, while avoiding problems with older IE versions' lack
of CSS table support.
You also have to take into account that text can/will be resized, which
in itself will complicate things enough if your case is supposed to work
across browser-land and various end-user options.
regards
Georg
--
http://www.gunlaug.no
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
__
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/
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
__
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
Re: [css-d] David Laakso's site in Firefox 2.x/Firefox 3.x
Gunlaug Sørtun wrote: david wrote: I did with a Ctrl-click on the Reload button. Should do the trick -- and does at my end. I don't know what prevented expected functionality at your end. Possibly the use of NoScript at my end. ;-) -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] just center
MEM wrote: I want something really simple, like a little lettering on the center, saying under construction with a logo, or hang on, for example, just to have something there before a site get's done. But well... now that I look at it, I actually don't need the centered div.:S Only the wrapper one. And when I think about it - putting up an Under Construction site sounds like one of the old marks of amateur web design ... why put anything up until the site's done? -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] David Laakso's site in Firefox 2.x/Firefox 3.x
david wrote: Gunlaug Sørtun wrote: david wrote: I did with a Ctrl-click on the Reload button. Should do the trick -- and does at my end. I don't know what prevented expected functionality at your end. Possibly the use of NoScript at my end. ;-) Life is a zoo in a jungle. -- Peter De Vries Some might say the same about the Web :-) . Thanks, David. ~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/
