• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2888
  • Last Modified:

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

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
andy7789
Asked:
andy7789
  • 2
  • 2
2 Solutions
 
andy7789Author Commented:
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
 
Peter HartCommented:
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
 
andy7789Author Commented:
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
 
Peter HartCommented:
have you tried reducing the size of images to see what happens?
0
 
uzzidesignCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now