[css-d] ie6/7 shrink-wrapping with floated children
I'm a little rusty on my hack management, but do I remember correctly that there is no workaround for the following IE6 and IE7 bug: doctype html div style=position: absolute; div style=float: right;X/div /div (the outer DIVs shrink-wrapping is incorrectly defeated by the floated child so it instead spans the full page width) Is the only workaround for the wrong size to set an explicit width? Best regards Mike Wilson __ 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] web page help
This is the most simple and compatible one I've found so far: http://ryanfait.com/sticky-footer/ Been using it for a while with very good results. Bernardo On Tue, Jun 22, 2010 at 1:04 PM, r...@catjuggling.com wrote: I would do a google search for sticky footer. It's a technique that keeps the footer always at the bottom of the page. There are quite a few tutorials that show how to do it. I put the footer div into the content div as you suggested David but then the footer floated to the top. Adding more content would push it down but I do not think some of the pages will have the content to push it down. Adding positioning and bottom: 0 seemed to fix the problem. I will see what happens when I get the page content added in. __ 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] web page help
The best sticky footer solution that I have found: http://stackoverflow.com/questions/146659/how-do-i-get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie-6/147152#147152 Seems to still work in latest versions of FF, IE, Opera, Chrome, Safari.. __ 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] centering 3 float: left boxes
On 6/22/10 5:06 PM, martin wrote: Hi all I'm trying to center 3 float:left boxes in the middle of the main container. So far I've got: [code stripped] You might like to try putting the content in a UL instead, and apply inline-block instead of float. Here's an example of an image gallery: http://www.brunildo.org/test/ImgThumbIB.html Cordially, David -- __ 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] web page help
On Tue, Jun 22, 2010 at 9:42 AM, Bernardo Doré berd...@gmail.com wrote: This is the most simple and compatible one I've found so far: http://ryanfait.com/sticky-footer/ Been using it for a while with very good results. Bernardo Can you point to a page that demonstrates the sticky footer working? I'm not seeing it on the url given. Regards, Claude __ 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] Test on CSS complex floats
Hi all! Hope that's useful: http://onwebdev.blogspot.com/2010/06/test-on-css-complex-floats.html HTH :-) http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] web page help
Can you point to a page that demonstrates the sticky footer working? I'm not seeing it on the url given. The image with the browser icons is using it on that page. ---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] web page help
-Original Message- From: Claude Needham [mailto:gxx...@gmail.com] On Wed, Jun 23, 2010 at 11:00 AM, Climis, Tim tcli...@indiana.edu wrote: The image with the browser icons is using it on that page. When looking at http://ryanfait.com/sticky-footer/ I don't see a sticky footer. Is there a personal browser setting that could be responsible? The code on http://stackoverflow.com/questions/146659/how-do-i- get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie- 6/147152#147152 definitely shows a sticky footer. But I just don't see what I understand a sticky footer to be with the ryanfait.com page. I think the problem is in the understanding of what a sticky footer is. The sticky footer on ryanfait.com behaves as a sticky footer, as opposed to a stuck footer. If the page is shorter than the window (fits without vertical scrolling), then the footer is at the bottom of the window. If the page is longer than the window (creates vertical scroll), then the footer is at the bottom of the page. If you check out the CSS-D wiki [http://css-discuss.incutio.com/wiki/Footer_Info], the stackoverflow solution is an example of the first type of footer, while the ryanfait solution is an example of the second. ---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] centering 3 float: left boxes
On 23/06/10 02:18, Tim Climis wrote:
On Tuesday, June 22, 2010 8:06:27 pm martin wrote:
Hi all
I'm trying to center 3 float:left boxes in the middle of the main
container.
This might be pretty simple, actually... Untested, but give:
#container {
float: left;
margin: 0 auto;
}
a try.
Theory: once you float the container, it will shrink to fit all the other
boxes.
I'm pretty sure that the rules of float will still keep the three floated
columns next to each other. And then the margin: auto centers the whole thing.
If you need the main container wider than the three columns, you can add
another container div (#column_container or similar).
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Thanks, but what it did was floating the container to the left (well, as
it's supposed to do), but I want to keep the
container in the middle of the screen.
regards
Martin
__
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] centering 3 float: left boxes
On 23/06/10 15:31, David Hucklesby wrote: On 6/22/10 5:06 PM, martin wrote: Hi all I'm trying to center 3 float:left boxes in the middle of the main container. So far I've got: [code stripped] You might like to try putting the content in a UL instead, and apply inline-block instead of float. Here's an example of an image gallery: http://www.brunildo.org/test/ImgThumbIB.html Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Thanks. That's another possibility. I'll create a separate page to test this and see which one works best for me. __ 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] centered nav over an image /?
How would I put a centered horizontal navigation over an image? http://ecoitsf.com/test.html I would like a background image to sit behind the nav at 100% of the page. Sincerely, Matthew P. Johnson | Eco I.T. 320 Warwick Avenue Oakland CA 94610 | 415.254.1563 | http://ecoitsf.com ecoitsf.com P Please consider the environment before printing this email. __ 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] centering 3 float: left boxes
martin wrote: Hi all I'm trying to center 3 float:left boxes in the middle of the main container. So far I've got: How would I have to change it so that those three boxes (left_main, centre_main, right_main) were positioned in the middle of the container. As you can see they (understandably) are slightly to the left. Martin I am not sure if this is what you are looking for but either way it was fun... http://chelseacreekstudio.com/ca/cssd/3.html Outermost width trimmed to sit in a 1024 window without drawing an h-scroll bar. Cursory checked in the current versions of Mac Opera, FF, Camino, and Safari. Not corrected for our good friends in Redmond. Best, ~d -- desktop http://chelseacreekstudio.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] background layering, transparency help
HI Chris, you were right on with the png for the background, thank you. Questions: 1. The png circular logo (top left) looks good in all browsers except ie6 windows. Any suggestions? 2. I have stray text in my footer, I cannot figure out what is wrong, please help: http://www.clarksburgwineco.com/pages/contact.html thanks. --stuart On Tue, Jun 22, 2010 at 9:14 PM, Chris Blake ch...@3pointdesign.com wrote: Stuart King wrote: Hi : I need to logo to be on top. 2. I need the yellow background to be at 75% opacity 3. I need the text and image in the .mc_50 and .mc_50r classes to be at 100% opacity Please help URL: http://www.clarksburgwineco.com/index_sk.html thank you. --Stuart aside A cup of tea and perhaps a little more passive approach to the tyography might be nice, too... /aside Best, ~d Haha, I'll have a cuppa too. But I think it's pretty cool. Just use a 1x1px tranpsarent PNG background image (repeat) for your opacity problem. It'll just make it easier. Menu is a bit tricky to navigate - bigger maybe. The main body of text could do with more space to the left. Considering you are using browns everywhere I think you could get away with using two fonts for headlines e.g. H1: something; H2: something else. If you're out off tea a few crates of wine will do. Cheers, 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] background layering, transparency help
Questions: 1. The png circular logo (top left) looks good in all browsers except ie6 windows. Any suggestions? See if this helps: http://www.tjkdesign.com/articles/png-alpha-transparency_with-no-http-reque st.asp -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
