RE: [WSG] floating an image hides the container's background
For those playing along at home... Patrick's answer led me to an interesting page. Many of you are probably familiar with this, but here's a way to fix the problem I had without adding an extra div to the document: http://www.positioniseverything.net/easyclearing.html works great in CSS2 browsers, degrades will in IE (since IE has it's own bug - it always contains floated divs). scott -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Patrick H. Lauke Sent: Wednesday, August 11, 2004 10:41 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] floating an image hides the container's background If you float all the content of a div, you take that content out of the normal document flow. The containing div is now empty, and doesn't wrap around the floated elements anymore...it's still there, but has a height of 0 (or well, of whatever non-floated content is left there, in your case). Either keep one element non floating, or add something with a clear property after the floated elements. Patrick Scott Reston wrote: > I'm experiencing a problem with Mozilla/Safari. I have a container div with a > background and two floated elements inside it. when I float one, I get the infamous > IE 3px bug[1]. so... I float both (since this avoids the problem with the 3px bug) > and the background of the containing div vanishes. > > with float applied to div and image: > http://www.capstrat.com/development/obrienatkinsx/test1.html > > with float applied only to the div: > http://www.capstrat.com/development/obrienatkinsx/test2.html > > > the elements in question are: > > div#content-main #portfolio-text { > margin: 0; > float: left; > padding-top: 30px; > width: 186px; > font-size: .8em; > } > > img#portfolio-image { > float: left; > width: 465px; height: 465px; > margin-left: 1px; padding: 0; > } > > > [1] http://positioniseverything.net/explorer/threepxtest.html > > > can someone give me some guidance on this? > > thanks! > > Scott Reston > Director, Web Development > Capstrat > 919/882.1966 v > 919/834.7959 f > 1201 Edwards Mill Road, Suite 102 > Raleigh, NC 27607 > www.capstrat.com > > > > -Original Message- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > Behalf Of russ - maxdesign > Sent: Wednesday, August 11, 2004 8:04 AM > To: Web Standards Group > Subject: [WSG] Some light reading... > > > Westciv's free online CSS course - week 1 of CSS Level 1: > http://www.westciv.com/courses/free/index.html > > A Better Image Rotator: > http://www.alistapart.com/articles/betterrotator/ > > WaSP Interviews Jim Ramsey on the redesign of The San Francisco Examiner > http://www.webstandards.org/learn/interviews/jramsey/ > > Pixy-style CSS no-preload rollovers, with PNG support for IE > http://devilock.mine.nu/pixie/ > > Redesign of WWF UK: > http://www.wwf.org.uk/core/index.asp > > Andy talks about the redesign of WWF UK: > http://www.stuffandnonsense.co.uk/archives/wwf.html > > New PGA site launch: > http://www.pga.com/pgachampionship/2004/ > > Behind the scenes of PGA rebuild: > http://whatdoiknow.org/archives/001797.shtml > > Learning CSS: > http://9rules.com/whitespace/design/learning_css.php > > Thanks > Russ > > ** > The discussion list for http://webstandardsgroup.org/ > > Proud presenters of Web Essentials 04 http://we04.com/ > Web standards, accessibility, inspiration, knowledge > To be held in Sydney, September 30 and October 1, 2004 > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** > > ** > The discussion list for http://webstandardsgroup.org/ > > Proud presenters of Web Essentials 04 http://we04.com/ > Web standards, accessibility, inspiration, knowledge > To be held in Sydney, September 30 and October 1, 2004 > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** > > > > -- _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials
Re: [WSG] floating an image hides the container's background
If you float all the content of a div, you take that content out of the normal document flow. The containing div is now empty, and doesn't wrap around the floated elements anymore...it's still there, but has a height of 0 (or well, of whatever non-floated content is left there, in your case). Either keep one element non floating, or add something with a clear property after the floated elements. Patrick Scott Reston wrote: I'm experiencing a problem with Mozilla/Safari. I have a container div with a background and two floated elements inside it. when I float one, I get the infamous IE 3px bug[1]. so... I float both (since this avoids the problem with the 3px bug) and the background of the containing div vanishes. with float applied to div and image: http://www.capstrat.com/development/obrienatkinsx/test1.html with float applied only to the div: http://www.capstrat.com/development/obrienatkinsx/test2.html the elements in question are: div#content-main #portfolio-text { margin: 0; float: left; padding-top: 30px; width: 186px; font-size: .8em; } img#portfolio-image { float: left; width: 465px; height: 465px; margin-left: 1px; padding: 0; } [1] http://positioniseverything.net/explorer/threepxtest.html can someone give me some guidance on this? thanks! Scott Reston Director, Web Development Capstrat 919/882.1966 v 919/834.7959 f 1201 Edwards Mill Road, Suite 102 Raleigh, NC 27607 www.capstrat.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of russ - maxdesign Sent: Wednesday, August 11, 2004 8:04 AM To: Web Standards Group Subject: [WSG] Some light reading... Westciv's free online CSS course - week 1 of CSS Level 1: http://www.westciv.com/courses/free/index.html A Better Image Rotator: http://www.alistapart.com/articles/betterrotator/ WaSP Interviews Jim Ramsey on the redesign of The San Francisco Examiner http://www.webstandards.org/learn/interviews/jramsey/ Pixy-style CSS no-preload rollovers, with PNG support for IE http://devilock.mine.nu/pixie/ Redesign of WWF UK: http://www.wwf.org.uk/core/index.asp Andy talks about the redesign of WWF UK: http://www.stuffandnonsense.co.uk/archives/wwf.html New PGA site launch: http://www.pga.com/pgachampionship/2004/ Behind the scenes of PGA rebuild: http://whatdoiknow.org/archives/001797.shtml Learning CSS: http://9rules.com/whitespace/design/learning_css.php Thanks Russ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** -- _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] floating an image hides the container's background
I'm experiencing a problem with Mozilla/Safari. I have a container div with a background and two floated elements inside it. when I float one, I get the infamous IE 3px bug[1]. so... I float both (since this avoids the problem with the 3px bug) and the background of the containing div vanishes. with float applied to div and image: http://www.capstrat.com/development/obrienatkinsx/test1.html with float applied only to the div: http://www.capstrat.com/development/obrienatkinsx/test2.html the elements in question are: div#content-main #portfolio-text { margin: 0; float: left; padding-top: 30px; width: 186px; font-size: .8em; } img#portfolio-image { float: left; width: 465px; height: 465px; margin-left: 1px; padding: 0; } [1] http://positioniseverything.net/explorer/threepxtest.html can someone give me some guidance on this? thanks! Scott Reston Director, Web Development Capstrat 919/882.1966 v 919/834.7959 f 1201 Edwards Mill Road, Suite 102 Raleigh, NC 27607 www.capstrat.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of russ - maxdesign Sent: Wednesday, August 11, 2004 8:04 AM To: Web Standards Group Subject: [WSG] Some light reading... Westciv's free online CSS course - week 1 of CSS Level 1: http://www.westciv.com/courses/free/index.html A Better Image Rotator: http://www.alistapart.com/articles/betterrotator/ WaSP Interviews Jim Ramsey on the redesign of The San Francisco Examiner http://www.webstandards.org/learn/interviews/jramsey/ Pixy-style CSS no-preload rollovers, with PNG support for IE http://devilock.mine.nu/pixie/ Redesign of WWF UK: http://www.wwf.org.uk/core/index.asp Andy talks about the redesign of WWF UK: http://www.stuffandnonsense.co.uk/archives/wwf.html New PGA site launch: http://www.pga.com/pgachampionship/2004/ Behind the scenes of PGA rebuild: http://whatdoiknow.org/archives/001797.shtml Learning CSS: http://9rules.com/whitespace/design/learning_css.php Thanks Russ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **