[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

div position problem in ie6: a row of divs float:left

Posted on 2007-10-14
5
Medium Priority
?
2,876 Views
Last Modified: 2013-12-08
Hi X-perts,

here is a simple code that causing problems in ie6 (only!) as the last row of divs jumps over the header:

<div class="centerBoxWrapper" id="whatsNew">
<h2 class="centerBoxHeading">New Products For October</h2>
    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href="5"><img src="" alt="" title=" Happy Birthday Basket " width="100" height="79" style="position:relative" /></a><br /><a href="">Happy Birthday Basket</a><br />$34.98</div>
    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href=""><img src="" alt="" title="" width="100" height="79" style="position:relative"  /></a><br /><a href="">Kitty Play Time Basket</a><br />$34.98</div>
    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href=""><img src="b" alt="Birthday Dog Basket" title="  " width="100" height="79" style="position:relative"   /></a><br /><a href="">Birthday Dog Basket</a><br />$39.98</div>
<br class="clearBoth" />

    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href="5"><img src="" alt="" title=" Happy Birthday Basket " width="100" height="79" style="position:relative" /></a><br /><a href="">Happy Birthday Basket</a><br />$34.98</div>
    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href=""><img src="" alt="" title="" width="100" height="79" style="position:relative"  /></a><br /><a href="">Kitty Play Time Basket</a><br />$34.98</div>
    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href=""><img src="b" alt="Birthday Dog Basket" title="  " width="100" height="79" style="position:relative"   /></a><br /><a href="">Birthday Dog Basket</a><br />$39.98</div>
<br class="clearBoth" />

    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href="5"><img src="" alt="" title=" Happy Birthday Basket " width="100" height="79" style="position:relative" /></a><br /><a href="">Happy Birthday Basket</a><br />$34.98</div>
    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href=""><img src="" alt="" title="" width="100" height="79" style="position:relative"  /></a><br /><a href="">Kitty Play Time Basket</a><br />$34.98</div>
    <div class="centerBoxContentsNew centeredContent back" style="width:33%;"><a href=""><img src="b" alt="Birthday Dog Basket" title="  " width="100" height="79" style="position:relative"   /></a><br /><a href="">Birthday Dog Basket</a><br />$39.98</div>
<br class="clearBoth" />
</div>

styles:
.centerBoxWrapper {
      border: 1px solid #9a9a9a;
      height: 1%;
      margin: 1.1em 0;
      }

.centerBoxContentsNew, .alert {
      vertical-align: top;
        margin: 1em 0em;
        text-align: center;
      }

.back {
      float: left;
      }
=========================

The problem here is that on ie 6.0 the last row of three divs is positioned on the top, i.e. on the level of hd tag. it happens only with the last row, regardless a total number of rows.

IMPORTANT! it happens only with the pictures (not text)

Please, help. Very urgent.

Thanks

A
0
Comment
Question by:andy7789
  • 2
  • 2
5 Comments
 

Author Comment

by:andy7789
ID: 20075103
extra info: removing position:relative on <img> tag fixes the problem, however I cannot remove it because it is needed for jscript functions (omitted in the code).

The bottom line here is that ie 6.0 renders the last row of images relative to the div 'centerBoxWrapper' but not to the div "centerBoxContentsNew "

Any ideas, please?
0
 
LVL 29

Accepted Solution

by:
chilternPC earned 1200 total points
ID: 20075270
its a bug in IE6
the most likely issue is IE is rendering in 'quirks mode'  the very first line has to be the following statement to make the browser renders in  complainance mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

even if there is a space or blank line first IE6 will operate in 'quirks mode'
0
 

Author Comment

by:andy7789
ID: 20075313
I have changed it to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

But it makes no difference
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 20076466
have you tried reducing the size of images to see what happens?
0
 
LVL 6

Assisted Solution

by:uzzidesign
uzzidesign earned 800 total points
ID: 20086568
Try adding a "clear:both;" to the last div, by giving it a class of clear or something.

Also, could be a box model bug inherent to IE6. Try adding a "display:inline;" to all or the last div. This corrects the bug where IE doubles the margins when the element is floated.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question