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 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
