RE: [WSG] Nowrap for floats
From what I can see there it's because of the image you are using. Try .float1, .float2, .float{ float:left; } .float1 img { height: 20px; width: 20px; float: left; } _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of akella Sent: 05 July 2008 11:38 To: wsg@webstandardsgroup.org Subject: [WSG] Nowrap for floats Hi list! Got a CSS question, it's now two days in my head. Here is my HTML, just to be abstract: div class=float div class=float1/div div class=float2Some random text/div /div and smth like this in CSS: .float1, .float2, .float{float:left} My problem is that i need .float1-2 to be on the same line. Here is how it should look like: http://cssing.org.ua/a/2.png But it breaks like this: http://cssing.org.ua/a/1.png (the text and the green block are two floats, the block itself is a float) So i need something like nowrap-for-floats. I solved this problem for Safari, FF, Opera by: .float{display:table} .float1, .float2{display:table-cell} But that doesn't work in IE. May be someone got such an experience? Fancy ie-expression? i would highly appreciate any ideas on this subject. Thanx in advance! regards, Yuriy akella Artyukh, http://cssing.org.ua *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Nowrap for floats
@Essential, there is no image, the number in green block is text. It has some padding and background-image (left-top corner). And it is already floated, because it is .float1. Any ideas? The real life code for those images looks like this: dl dt30/dt ddstrongCommodore645/strong spana href=#add present/a/span/dd /dl I can give a link to live demo, but i just want to simplify it for the list. The abstract float1 float2 example is just my problem... С уважением, Юрий akella Артюх, http://cssing.org.ua, On Sat, Jul 5, 2008 at 1:54 PM, Essential eBiz Solutions Ltd [EMAIL PROTECTED] wrote: From what I can see there it's because of the image you are using. Try .float1, .float2, .float{ float:left; } .float1 img { height: 20px; width: 20px; float: left; } -- *From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] *On Behalf Of *akella *Sent:* 05 July 2008 11:38 *To:* wsg@webstandardsgroup.org *Subject:* [WSG] Nowrap for floats Hi list! Got a CSS question, it's now two days in my head. Here is my HTML, just to be abstract: div class=float div class=float1/div div class=float2Some random text/div /div and smth like this in CSS: .float1, .float2, .float{float:left} My problem is that i need .float1-2 to be on the same line. Here is how it should look like: http://cssing.org.ua/a/2.png But it breaks like this: http://cssing.org.ua/a/1.png (the text and the green block are two floats, the block itself is a float) So i need something like nowrap-for-floats. I solved this problem for Safari, FF, Opera by: .float{display:table} .float1, .float2{display:table-cell} But that doesn't work in IE. May be someone got such an experience? Fancy ie-expression? i would highly appreciate any ideas on this subject. Thanx in advance! regards, Yuriy akella Artyukh, http://cssing.org.ua *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Nowrap for floats
try inline-block and nowrap for container and remove float of float1 and float2 com.ua? speak albanian? используй inline-block для float1 и float2 без флоатов зачастую это гораздо удобнее флоатов, особенно теперь, когда ФФ3 поддерживает это свойство - как итог - кроссбраузерно полностью ) akella пишет: Hi list! Got a CSS question, it's now two days in my head. Here is my HTML, just to be abstract: div class=float div class=float1/div div class=float2Some random text/div /div and smth like this in CSS: .float1, .float2, .float{float:left} My problem is that i need .float1-2 to be on the same line. Here is how it should look like: http://cssing.org.ua/a/2.png But it breaks like this: http://cssing.org.ua/a/1.png (the text and the green block are two floats, the block itself is a float) So i need something like nowrap-for-floats. I solved this problem for Safari, FF, Opera by: .float{display:table} .float1, .float2{display:table-cell} But that doesn't work in IE. May be someone got such an experience? Fancy ie-expression? i would highly appreciate any ideas on this subject. Thanx in advance! regards, Yuriy akella Artyukh, http://cssing.org.ua *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Nowrap for floats
Try putting an overflow:hidden in your .float parent class. It tends to help me float things in a page. On Jul 5, 2008, at 7:05 AM, akella wrote: @Essential, there is no image, the number in green block is text. It has some padding and background-image (left-top corner). And it is already floated, because it is .float1. Any ideas? The real life code for those images looks like this: dl dt30/dt ddstrongCommodore645/strong spana href=#add present/ a/span/dd /dl I can give a link to live demo, but i just want to simplify it for the list. The abstract float1 float2 example is just my problem... С уважением, Юрий akella Артюх, http://cssing.org.ua, On Sat, Jul 5, 2008 at 1:54 PM, Essential eBiz Solutions Ltd [EMAIL PROTECTED] wrote: From what I can see there it's because of the image you are using. Try .float1, .float2, .float{ float:left; } .float1 img { height: 20px; width: 20px; float: left; } From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of akella Sent: 05 July 2008 11:38 To: wsg@webstandardsgroup.org Subject: [WSG] Nowrap for floats Hi list! Got a CSS question, it's now two days in my head. Here is my HTML, just to be abstract: div class=float div class=float1/div div class=float2Some random text/div /div and smth like this in CSS: .float1, .float2, .float{float:left} My problem is that i need .float1-2 to be on the same line. Here is how it should look like: http://cssing.org.ua/a/2.png But it breaks like this: http://cssing.org.ua/a/1.png (the text and the green block are two floats, the block itself is a float) So i need something like nowrap-for-floats. I solved this problem for Safari, FF, Opera by: .float{display:table} .float1, .float2{display:table-cell} But that doesn't work in IE. May be someone got such an experience? Fancy ie-expression? i would highly appreciate any ideas on this subject. Thanx in advance! regards, Yuriy akella Artyukh, http://cssing.org.ua *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Nowrap for floats
@Essential, there is no image, the number in green block is text. It has some padding and background-image (left-top corner). And it is already floated, because it is .float1. Any ideas? The real life code for those images looks like this: dl dt30/dt ddstrongCommodore645/strong spana href=#add present/a/span/dd /dl I can give a link to live demo, but i just want to simplify it for the list. The abstract float1 float2 example is just my problem... Why floating everything? Did you try this approach: dl {overflow:hidden;zoom:1;} dt {float:left;width:20px;height:20px;} dd {margin-left:30px;} -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Nowrap for floats
of course. in ie inline-block works properly on inline-elements if it's possible use inline-elements gotcha! while writing letter found answer dl { display:block; white-space:nowrap; } dt, dt { display:inline; } and insert in dt and dd any inline-element, e.g. b or span and make b or span display:inline-block and вуаля ) just add to b or span white-space:normal and enjoy ) it's for IE for others - just display:inline-block for dt and dd it likely works fine мало тестил akella пишет: @Сергей: it is a great idea! But i've tried it with no success. inline-block doesnt work in IE like that, float1-2 appear to be on a different lines all the time. @Manny, overflow doesn't help =(. @Thierry: I need to float container(.float) because there are a lot of them, here is screenshot of how it might look: http://cssing.org.ua/a/3.png When i set overflow hidden in addition to float and white-space:nowrap (for the text inside float2), it just cuts the float2 text. Without floated container - sure it is quite simple to acheive the thing i'm trying to acheive. Thanx for the code example! Even without .float2{float:left} the text jumps under the number in green block. I know you are extremely experienced with a complex CSS-problems. May be you've ever heard of display:table-cell emulation for IE? May be with expressions or smth like that? С уважением, Юрий akella Артюх, http://cssing.org.ua, On Sat, Jul 5, 2008 at 7:36 PM, Thierry Koblentz [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: @Essential, there is no image, the number in green block is text. It has some padding and background-image (left-top corner). And it is already floated, because it is .float1. Any ideas? The real life code for those images looks like this: dl dt30/dt ddstrongCommodore645/strong spana href=#add present/a/span/dd /dl I can give a link to live demo, but i just want to simplify it for the list. The abstract float1 float2 example is just my problem... Why floating everything? Did you try this approach: dl {overflow:hidden;zoom:1;} dt {float:left;width:20px;height:20px;} dd {margin-left:30px;} -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Nowrap for floats
@Сергей: it is a great idea! But i've tried it with no success. inline-block doesnt work in IE like that, float1-2 appear to be on a different lines all the time. @Manny, overflow doesn't help =(. @Thierry: I need to float container(.float) because there are a lot of them, here is screenshot of how it might look: http://cssing.org.ua/a/3.png When i set overflow hidden in addition to float and white-space:nowrap (for the text inside float2), it just cuts the float2 text. Without floated container - sure it is quite simple to acheive the thing i'm trying to acheive. Thanx for the code example! Even without .float2{float:left} the text jumps under the number in green block. I know you are extremely experienced with a complex CSS-problems. May be you've ever heard of display:table-cell emulation for IE? May be with expressions or smth like that? If you're willing to cheat with the markup a little (using many DLs), you can go this route (floating everything): http://tjkdesign.com/lab/inline-DLs.asp -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Nowrap for floats
Thierry! That is very cool and close! Thank you! But still it breaks a little in my IE6 after resizing the window, here is screenshot: http://cssing.org.ua/a/5.png. But still floating everything is great trick! Thank you for the idea. Anyway, i spent 2 hours experimenting, and i think i found the best solution, and it even doesn't need any additional markup. I just want to share it with everybody, so it may help in future. Here is what saved me: Safari,FF, Opera: (as i mentioned in the first letter) dt,dd{display:table-cell;vertical-align:top;} dl{display:table} And for ie in ie.css: dt{float:none;} dl{white-space:nowrap;} dt, dd { display:inline; vertical-align:middle; zoom:1; } Here is link to working example (tested in IE, Safari, Opera, Firefox) http://cssing.org.ua/a/floatingdls.html (I took your HTML, Thierry) Thanx everybody! Thank you Sergey. It seems that this problem is solved! =) And i hope it will help somebody as well. С уважением, Юрий akella Артюх, http://cssing.org.ua, 2008/7/5 Thierry Koblentz [EMAIL PROTECTED]: @Сергей: it is a great idea! But i've tried it with no success. inline-block doesnt work in IE like that, float1-2 appear to be on a different lines all the time. @Manny, overflow doesn't help =(. @Thierry: I need to float container(.float) because there are a lot of them, here is screenshot of how it might look: http://cssing.org.ua/a/3.png When i set overflow hidden in addition to float and white-space:nowrap (for the text inside float2), it just cuts the float2 text. Without floated container - sure it is quite simple to acheive the thing i'm trying to acheive. Thanx for the code example! Even without .float2{float:left} the text jumps under the number in green block. I know you are extremely experienced with a complex CSS-problems. May be you've ever heard of display:table-cell emulation for IE? May be with expressions or smth like that? If you're willing to cheat with the markup a little (using many DLs), you can go this route (floating everything): http://tjkdesign.com/lab/inline-DLs.asp -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] To stretch an image within a div ??
My web page is divided into 5 parts: Header, Left Sidebar, Content, Right Sidebar Footer. Within the header, I wish to place a large logo, a mini logo and a site name or company name in large text. Currently, the CSS I'm using for the header is: : : div { margin: 0; padding: 0; border: 1px dashed #00; //This is for visual testing purposes only } div.page { min-width: 54em; padding: 10px; } div.header { background-image: url(images/large_logo.gif); background-repeat: no-repeat; // This image is not repeat worthy ! height:200px; } : : And the HTML is: : : div class=page div class=header h1Title/h1 /div : : /div However the image does not stretch to fill the right portion of the 'header' div. Tiling this image spoils things. I've thought about slicing the rightmost portion of the large_logo. I could then, perhaps, introduce a parent div to 'header', say 'headerBackground' with the following CSS: div.headerBackground { background-image: url(images/large_logo_filler.gif); background-repeat: repeat-x; height:200px; } This sounds like a nasty way to solve this, with minimal guarantee of making the repeated slice look good. I'm not familiar with the technique used to stretch an image within a DIV, and am not confident that it won't visually skew the logo. A very simple table based technique seems to *visually* solve this problem quite well without having to fool around with the logo. But I wouldn't be here asking for help if I was in favor of tables. What is the standards compliant way to handle this ? Thanks, Matt *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Help
Hello All, Is there anyone who can design guestbook with flash? I guess you know what the question means.. .. I want someone to teach me how to develop guest book with flash. Thanks Bidemi. -- Love to be Loved! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] To stretch an image within a div ??
Hi Matt, If you stretch the img (you can't stretch a background-image as far as I know), you will definitely not be happy with the results. I am assuming you have a flexible design where the content expands to fit the width of the browser's window? If that is the case, create a very wide image and then use: div.header { background-image: url(images/large_logo.gif); background-repeat: no-repeat; height: 200px; width: 100%; overflow: hidden; } You can see an example of this technique I used on a web site I created a while back: http://www.freightturntables.com http://www.freightturntables.com/ Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 http://www.neighborwebmaster.com www.neighborwebmaster.com phone/fax: (732) 302-0904 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***BEGIN:VCARD VERSION:2.1 N:Gelotte;Kepler;;Mr. FN:Kepler Gelotte ([EMAIL PROTECTED]) ORG:Neighbor Webmaster TITLE:Web Designer TEL;WORK;VOICE:(732) 302-0904 TEL;WORK;FAX:(732) 302-0904 ADR;WORK:;;156 Normandy Dr;Piscataway;NJ;08854;United States of America LABEL;WORK;ENCODING=QUOTED-PRINTABLE:156 Normandy Dr=0D=0APiscataway, NJ 08854=0D=0AUnited States of America URL;WORK:http://www.neighborwebmaster.com EMAIL;PREF;INTERNET:[EMAIL PROTECTED] REV:20070415T052107Z END:VCARD
[WSG] hitting a IE 7 horizontal scrollbar bug, zoom:1 can't get rid of it :(
Can a kind soul helps? I found the culprit but couldn't get it fix with zoom: 1 or any hasLayout trick. It's the right column (outlined), at first I thought it's google calendar's iFrame causing it, but it's not as removing the iframe doesn't make the horizontal scrollbar goes away. http://msac.marinersq.com/1.html If I remove the entire div class=rightcol. The horizontal scrollable vanish. http://msac.marinersq.com/2.html These are the codes target for the 3 floated columns in 'ie7.css'. #content {width: 860px;margin:25px 50px 0 48px;} #content ul.list {width: 300px!important;} #content ul.promo {width: 250px!important;} .rightcol {width: 230px!important;margin-left:15px;border: 1px solid #333;zoom:1; } I tried decalaring 'zoom:1' in #content wrapper, no help either. Ingo Chao has a solution but I still can't get it work :-( http://www.satzansatz.de/cssd/ie7b2_prscrollbar.html Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Im sorry, I am on annual leave for a week.
I will be out of the office starting 04/07/2008 and will not return until 14/07/2008. I will respond to your message when I return. If it is a matter of urgency, feel free to contact me on my mobile on +61422029994. Or alternatively, if Anthony can help, contact him. The information contained in this e-mail is for the exclusive use of the intended recipient(s) and may be confidential, proprietary, and/or legally privileged. Inadvertent disclosure of this message does not constitute a waiver of any privilege. If you receive this message in error, please do not directly or indirectly use, print, copy, forward, or disclose any part of this message. Please also delete this e-mail and all copies and notify the sender. Thank you. For alternate languages please go to http://bayerdisclaimer.bayerweb.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] hitting a IE 7 horizontal scrollbar bug, zoom:1 can't get rid of it :(
Can a kind soul helps? I found the culprit but couldn't get it fix with zoom: 1 or any hasLayout trick. It's the right column (outlined), at first I thought it's google calendar's iFrame causing it, but it's not as removing the iframe doesn't make the horizontal scrollbar goes away. http://msac.marinersq.com/1.html If I remove the entire div class=rightcol. The horizontal scrollable vanish. http://msac.marinersq.com/2.html These are the codes target for the 3 floated columns in 'ie7.css'. #content {width: 860px;margin:25px 50px 0 48px;} #content ul.list {width: 300px!important;} #content ul.promo {width: 250px!important;} .rightcol {width: 230px!important;margin-left:15px;border: 1px solid #333;zoom:1; } I tried decalaring 'zoom:1' in #content wrapper, no help either. Ingo Chao has a solution but I still can't get it work :-( http://www.satzansatz.de/cssd/ie7b2_prscrollbar.html Hi Tee, Try: html {overflow-x:hidden;} -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] To stretch an image within a div ??
Kepler, Thanks for the quick reply. I'm using a 3 column elastic design with a min-width of 54 em. The content div stretches like a hybrid does, but the left and right sidebars don't. The header and footer will stretch without a problem as well. The content is embedded between the sidebars and the header doesn't quite reach the window edges because of a dliberate 10px margin. Adding the CSS for clarity: div.leftSidebar { width: 10em; float: left; } div.rightSidebar { width: 10em; float: right; } div.content { min-width: 30em; margin-left: 10em; margin-right: 10em; } div.footer { clear: both; } I had tried chaning the width and overflow. No visible effects were observed. Have I logically omitted or overlooked something here ? Thanks again, Mathew On 7/5/08, Kepler Gelotte [EMAIL PROTECTED] wrote: Hi Matt, If you stretch the img (you can't stretch a background-image as far as I know), you will definitely not be happy with the results. I am assuming you have a flexible design where the content expands to fit the width of the browser's window? If that is the case, create a very wide image and then use: div.header { background-image: url(images/large_logo.gif); background-repeat: no-repeat; height: 200px; width: 100%; overflow: hidden; } You can see an example of this technique I used on a web site I created a while back: http://www.freightturntables.com Best regards, *Kepler Gelotte* Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***