[css-d] overflow:hidden doesn't seem to define block for float
I have tried to use floats to arrange several items on the screen. One of the floats has a div and that one has floats inside. Though the div is set with overflow:hidden, one of the floats inside spills over. Actually, it does so in one of the layouts, I use two different layouts for the same HTML, one left to right, the other right to left, one does fine the other doesn't. Moreover, they behave quite differently in FF and IE. The issue is shown and explained here, including a table-based sample of what I want to achieve in the one that fails: http://www.satyam.com.ar/floats.html Satyam __ css-discuss [EMAIL PROTECTED] 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] Style sheet for printing
Good Afternoon; Please look at this page and its CSS. http://www.drdelmath.com/policies_procedures/math160c_summer_08.htm When I view it in IE7, printing behaves as directed by the style sheet. This works for both the Default styles and the Projection styles. Both print at 10pt. However, FF seems to be unaware of the @media print portion of the style sheets. At one time during my testing I set color to red. IE printed in red but FF did not. I have also tried both Strict and Transitional in the DOCTYPE. Who (me, IE, or FF) is doing what wrong? How do I fix it? Thanks Del [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] 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] Fill the page, but keep your border
Stephen, Kudos to you on this. I personally found this very useful on a project of mine. Cheers, Lisa Wilcox For a long time I have been trying to find a way to create a page which fills the viewport but leaves a border around the content. For example, a div which is 100%-4em wide and high, with a 2em border. Unfortunately the css box model doesn't make this easy. I have found a way to do this with css which I believe is novel: http://www.sfnelson.org/css-demo.html In essence, I use a hidden floating div with height: 100% and margin: -4em. This marks the bottom of the div. Then, I create the content div, and place another hidden div inside it which has float: none. This stretches the content box below the floating div. I hope this is useful to someone. Regards, Stephen Nelson __ css-discuss [EMAIL PROTECTED] 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 align list numbers?
-Original Message- From: Richard Grevers [mailto:[EMAIL PROTECTED] Sent: Sunday, May 25, 2008 1:32 PM To: David Jones Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] How to align list numbers? On 5/23/08, David Jones [EMAIL PROTECTED] wrote: Thanks, Josh (and Jukka and Phillipe). I tried the list-style-position: inside option. When text wraps in the list item, it wraps back to the start of the item number. That wouldn't be acceptable here. I could see why that wouldn't work, but also how it could be made to work, so I started tinkering: http://www.dramatic.co.nz/testing/lefty_roman_list.html It's not a perfect solution, as it requires extra markup inside the list items: A div to make the content line up with itself, and a non-breaking space to force the browser to keep the item number outside the div. I only have Opera, firefox 2 and IE6 available to test with at present, but its working fine on all of those Thanks, Richard, that's not a bad solution, at least in terms of minimal impact on the markup. I suppose if we knew XSLT, we could have the CMS automatically adjust the markup to add the parts to it. Unfortunately, as it is now, the CMS' editor doesn't support adding div tags except in Code View, and we're doing our level best to keep our content creators away from Code View. David Jones, Content Coordinator, Customer Relations - KL PS, (808) 948-5830 MMS hmsa.com made the following annotations. -- This electronic message is not an offer to contract, the acceptance of an offer to contract, or in any other way intended to contractually obligate HMSA; neither is it intended to change the terms of any existing contract unless specifically so stated. The information contained in this electronic message (or attached hereto) is intended only for the individual or entity to which it is addressed and may contain information that is confidential and protected by law. If you are not the intended recipient of this e-mail, you are cautioned that use of its contents in any way is prohibited and may be unlawful. If you have received this communication in error, please notify the sender immediately by e-mail or telephone and return the original message by e-mail to the sender or to [EMAIL PROTECTED] We will reimburse you for any cost you incur in notifying us of the errant e-mail. Thank you. · == __ css-discuss [EMAIL PROTECTED] 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 please
thanks for the feedback guys... 2008/5/27 David Laakso [EMAIL PROTECTED]: Rob freeman wrote: nearly there, please can you check this site for any obvious pitfalls... http://www.nest-life.com/update/ thanks No major issues that I could see in compliant browsers, or IE/6 IE/7. The footer apron (white on black w/ magenta stuff) brakes a little early with font scaling, but not a dig deal. I prefer the home and contact pages-- the black body background-color is a little much on the other pages. There are a few CSS markup errors to correct. As for myself, I am too old and too tired to linger long on any site whose author messes with my preference for font-size. -- http://chelseacreekstudio.com/ -- Rob Freeman [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] 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] Paged Media -- page-break-(before|after|inside)
Hello Listfolk, When printing this page: http://www.illuminoid.com/print/ the page breaks often appear inside of the tables. I would like to gently suggest to my browser ( Firefox 2.0.0.14, WinXP Pro ), and to others that will listen, to keep the contents of the tables together. I have tried the docs: http://www.w3.org/TR/REC-CSS2/page.html#break-insidewith no success... Suggestions? Thanks! -- Wellington __ css-discuss [EMAIL PROTECTED] 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] Paged Media -- page-break-(before|after|inside)
Hi Wellington,
When printing this page: http://www.illuminoid.com/print/ the
page breaks often appear inside of the tables. I would like
to gently suggest to my browser ( Firefox 2.0.0.14, WinXP Pro
), and to others that will listen, to keep the contents of
the tables together.
Firefox doesn't support 'page-break-inside: avoid' yet -- not even FF3 ;-(
I would leave the 'page-break-inside: avoid' in the source (someday, hopefully
soon, browsers will do the right thing with it). But for now, I'm afraid
you're stuck with either living with the unfortunate break inside the tables,
and waiting for browsers to catch up, or forcing a page break before the
tables. (Something like:
table {page-break-before: always;}
...which doesn't look all that desirable for your page, either.)
Best wishes,
Melinda
Melinda S. Grant
Melinda Grant Consulting
+1.541.582.3681
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
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] Style sheet for printing
On May 28, 2008, at 4:21 AM, Del Wegener wrote:
Please look at this page and its CSS.
http://www.drdelmath.com/policies_procedures/math160c_summer_08.htm
When I view it in IE7, printing behaves as directed by the style
sheet.
This works for both the Default styles and the Projection styles.
Both
print at 10pt.
However, FF seems to be unaware of the @media print portion of the
style
sheets. At one time during my testing I set color to red. IE
printed in
red but FF did not. I have also tried both Strict and Transitional
in the
DOCTYPE.
Who (me, IE, or FF) is doing what wrong? How do I fix it?
You :-). And IE of course.
In the procedure_projection_style.css file you have an error on line
115: there is a redundant '}'.
(after div#footer {}). Once that is corrected, Gecko and WebKit work
as expected.
Additionally, on line 60 and 68 there are errors with the color value
(missing a '#').
The error console in Firefox would have told you that, or a quick trip
to the css validator.
http://jigsaw.w3.org/css-validator/
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
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] overflow:hidden doesn't seem to define block for float
On May 28, 2008, at 1:51 AM, Satyam wrote: have tried to use floats to arrange several items on the screen. One of the floats has a div and that one has floats inside. Though the div is set with overflow:hidden, one of the floats inside spills over. Actually, it does so in one of the layouts, I use two different layouts for the same HTML, one left to right, the other right to left, one does fine the other doesn't. Moreover, they behave quite differently in FF and IE. The issue is shown and explained here, including a table-based sample of what I want to achieve in the one that fails: http://www.satyam.com.ar/floats.html 1. you don't need to add the 'overflow:hidden to div class='inputFields radio'. That block is floated, and thus establishes a block formatting context per CSS2.1:9.4.1 – it will always contain nested floats. 2. The 'label' inside the above div drops below the radio button, because the radio is wrapped in a div. you'd need to float (float:right) both div.input and div.label. That should result in the display you want in modern borwsers, if I understand it all correctly. I haven't had a look at what IE does. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] 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] Weird Rollover Behavior in latest versions Saf/FF
Hi, All: Can someone take a look at this page and see if 1.) they experience this problem and 2.) if they can offer a solution? The problem is that the drum images on the page, which are floated side-by-side in a UL and use a class called thumbnails, and are supposed to produce a larger version of each image when each one is hovered, respectively, (and do!) lose their positioning and wind up stacked, one below the other instead of floating side-by-side. So far, when it's happened to me, I've noticed that the top two behave while the ones below go wonky until you refresh the page. Here's the page: http://www.luciacomnes.com/drums.html and here's my CSS: http://www.luciacomnes.com/lc.css I also have stylesheets for IE6 and 7 here: http://www.luciacomnes.com/lc_IE7.css and here: http://www.luciacomnes.com/lc_invalid.css ...FYI... The page validates as of this writing as do the rest of the pages. Thank you, all! mc Melton Cartes An Ad Guy 106 Guerrero St. San Francisco, CA 94103 [EMAIL PROTECTED] 415-621-6501 http://www.anadguy.com ~ ~ ~ Are you learning Spanish? Do you know someone who is? The secret to learning Spanish in my new eBook, The Cartesian Spanish Pronunciation Lesson! http://www.cartesianspanishlesson.com ~ ~ ~ Want to see some T-shirts and other schwag I've designed? http://www.zazzle.com/anadguy ...there'll be more to come. __ css-discuss [EMAIL PROTECTED] 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] Weird Rollover Behavior in latest versions Saf/FF
On May 28, 2008, at 11:47 AM, Melton Cartes wrote:
The problem is that the drum images on the page, which are floated
side-by-side in a UL and use a class called thumbnails, and are
supposed to produce a larger version of each image when each one is
hovered, respectively, (and do!) lose their positioning and wind up
stacked, one below the other instead of floating side-by-side.
So far, when it's happened to me, I've noticed that the top two
behave while the ones below go wonky until you refresh the page.
Here's the page:
http://www.luciacomnes.com/drums.html
I can't reproduce what you describe with Gecko 1.9 (FX 3 rc1) based
browsers, but I see that issue with WebKit and Safari.
All those auto-width floated elements; the .thumbnails li appears to
shrink-wrap after hovering over the image. Hmm, on hover you resize
the image and take it completely out of the flow. Thus the li gets
narrower, but doesn't get the original width back after the pointer is
moved away.
.thumbnails li {width:100%} fixes that here.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
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] Weird Rollover Behavior in latest versions Saf/FF
Melton Cartes wrote: The problem is that the drum images on the page, which are floated side-by-side in a UL and use a class called thumbnails, and are supposed to produce a larger version of each image when each one is hovered, respectively, (and do!) lose their positioning and wind up stacked, one below the other instead of floating side-by-side. http://www.luciacomnes.com/drums.html mc Mac OS X 10.4.11 The thumbnails behave as I believe you intend (unless I have misunderstood the issue) among: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14 Camino Version 1.6.1 (1.8.1.14 2008051211) Safari Version 3.1.1 (4525.18) XP IE/7 on Mac XP IE/6 standalone on Mac -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] Weird Rollover Behavior in latest versions Saf/FF
David Laakso wrote: Melton Cartes wrote: The problem is that the drum images on the page, which are floated side-by-side in a UL and use a class called thumbnails, and are supposed to produce a larger version of each image when each one is hovered, respectively, (and do!) lose their positioning and wind up stacked, one below the other instead of floating side-by-side. http://www.luciacomnes.com/drums.html mc I neglected to mention Mac Opera/9.27 is rendering the heading serif rather than sans. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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/
