[Pro] forgot solution for problem nested DIV's and IE7

Hi

I’ve got this page with some nested DIV’s that are ‘filled’ with items from Expression Engine database.
I know there is an issue with IE, but I forgot…

In IE7 it does not work, in IE8 it does.

this is the code (cannot show the page, classified by client…;-(
(Anonymous Action on the repeating elements)

<div id="producten" class="f-x2 f-x3" style="position:relative; float:left; width:547px; clear:left; margin-left:50px; margin-bottom:5px; overflow:visible">
			<div id="produktcontainer" class="f-x2 f-x3" style="position:relative; float:left; width:540px; clear:left; padding:5px 0px 5px 5px; border:solid #ccc 1px; overflow:visible">
				{exp:weblog:entries weblog="produkten"}
				<div class="f-x2 f-x3" style="position:relative; float:left; width:100px; clear:left; overflow:visible">
					<p class="f-lp"><a href="{exp:extract_url}{produktfoto}{/exp:extract_url}" title="{produkt}">{exp:imgsizer:size src={exp:extract_url}"{produktfoto}"{/exp:extract_url} width="75" alt="{produkt}"}</a> </p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:left; width:280px; overflow:visible">
					<p class="f-lp">{produkt}</p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:right; width:156px; clear:right; overflow:visible">
					<p class="f-lp">{prijs} aantal: <input name="aantal" size="3" id="item6a"/></p>
				</div>
				{/exp:weblog:entries}
			</div>
		</div>

Must be something with float, height, completely lost in it

Thanks…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, forgot to add the rendered code. Hope this helps…
Otherwise I’ll set up a test site to reproduce that particular page.

<div id="producten" class="f-x2 f-x3" style="position:relative; float:left; width:547px; clear:left; margin-left:50px; margin-bottom:5px; overflow:visible">
<div id="produktcontainer" class="f-x2 f-x3" style="position:relative; float:left; width:540px; clear:left; padding:5px 0px 5px 5px; border:solid #ccc 1px; overflow:visible">
				
				<div class="f-x2 f-x3" style="position:relative; float:left; width:100px; clear:left; overflow:visible">
					<p class="f-lp"><a href="http://www.mysite.com/images/uploads/testfoto500x600.jpg" title="Item in een blauw schuifdoosje"><img src="/images/uploads/cache/testfoto500x600_75x90.jpg" width="75" height="90" alt="Item in een blauw schuifdoosje" style="border: 0;" /></a> </p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:left; width:280px; overflow:visible">
					<p class="f-lp">Item in een blauw schuifdoosje</p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:right; width:156px; clear:right; overflow:visible">
					<p class="f-lp">€ 9,95 aantal: <input name="aantal" size="3" id="item6a"/></p>
				</div>
				
				<div class="f-x2 f-x3" style="position:relative; float:left; width:100px; clear:left; overflow:visible">
					<p class="f-lp"><a href="http://www.mysite.com/images/uploads/testfoto500x600.jpg" title="Item in een paars schuifdoosje"><img src="/images/uploads/cache/testfoto500x600_75x90.jpg" width="75" height="90" alt="Item in een paars schuifdoosje" style="border: 0;" /></a> </p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:left; width:280px; overflow:visible">
					<p class="f-lp">Item in een paars schuifdoosje</p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:right; width:156px; clear:right; overflow:visible">
					<p class="f-lp">€ 9,95 aantal: <input name="aantal" size="3" id="item6a"/></p>
				</div>
				
				<div class="f-x2 f-x3" style="position:relative; float:left; width:100px; clear:left; overflow:visible">
					<p class="f-lp"><a href="http://www.mysite.com/images/uploads/testfoto500x600.jpg" title="Item in een appeltjes groen schuifdoosje"><img src="/images/uploads/cache/testfoto500x600_75x90.jpg" width="75" height="90" alt="Item in een appeltjes groen schuifdoosje" style="border: 0;" /></a> </p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:left; width:280px; overflow:visible">
					<p class="f-lp">Item in een appeltjes groen schuifdoosje</p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:right; width:156px; clear:right; overflow:visible">
					<p class="f-lp">€ 9,95 aantal: <input name="aantal" size="3" id="item6a"/></p>
				</div>
				
				<div class="f-x2 f-x3" style="position:relative; float:left; width:100px; clear:left; overflow:visible">
					<p class="f-lp"><a href="http://www.mysite.com/images/uploads/testfoto500x600.jpg" title="Item in een vuurrood schuifdoosje"><img src="/images/uploads/cache/testfoto500x600_75x90.jpg" width="75" height="90" alt="Item in een vuurrood schuifdoosje" style="border: 0;" /></a> </p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:left; width:280px; overflow:visible">
					<p class="f-lp">Item in een vuurrood schuifdoosje</p>
				</div>
				<div class="f-x2 f-x3" style="position:relative; float:right; width:156px; clear:right; overflow:visible">
					<p class="f-lp">€ 9,95 aantal: <input name="aantal" size="3" id="item6a"/></p>
				</div>
				
			</div>
		</div>

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What is the problem that you’re seeing? Is the inner DIV hidden, or is it spilling out of the parent container?

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter

Thanks for replying. Sorry that I did not manage to set up a testsite yet. Will do soon.

I’ve put screenshots (IE from Netrenderer) here: http://www.atelier.box.nl/test/issue_4-4-09/Firefox-Mac.png
http://www.atelier.box.nl/test/issue_4-4-09/IE_8.png
which render good, but now the problem:
http://www.atelier.box.nl/test/issue_4-4-09/IE_7.png

IE7 does not understand the growing of the DIV. I know there is some trick…I’ve looked on some trouble-shooting sites, but could not find a direct answer.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The old “escaping float trick”. I’m surprised you fell for it,
Seigfried! (in mock Maxwell Smart voice)

You have a couple of options here. One would be to fall back to
tables, which don’t have this problem. The other would be to clear the
floats, either implicitly, or with an extra element.

To do it implicitly, simply float the container object that holds
those floated objects (price, photo, and description). Make a box that
is 100% width, float left, and insert your photo, description and
price into that. Then cut that entire box and paste it inside your
vertical column. Make this your template object to fill with the
generated items, and no matter how many of these you emit, they will
all hang together.

To do it with an extra element, add a break or horizontal rule after
the last floated element in each group, and set that element to
clear:both.

Walter

On Jun 4, 2009, at 2:25 AM, atelier wrote:

Hi Walter

Thanks for replying. Sorry that I did not manage to set up a
testsite yet. Will do soon.

I’ve put screenshots (IE from Netrenderer) here: http://www.atelier.box.nl/test/issue_4-4-09/Firefox-Mac.png
http://www.atelier.box.nl/test/issue_4-4-09/IE_8.png
which render good, but now the problem:
http://www.atelier.box.nl/test/issue_4-4-09/IE_7.png

IE7 does not understand the growing of the DIV. I know there is some
trick…I’ve looked on some trouble-shooting sites, but could not
find a direct answer.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The old “escaping float trick”. I’m surprised you fell for it,

yeah yeah… :wink:

I’ll write this one down in my ‘do-not-forget’ book… so I won’t stumble and fall again…:slight_smile:

Thanks again, Agent 66!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options