IE Issue with Div's

Dev Shed Forums Sponsor:

June 26th, 2004, 06:39 PM

tonyarous

Contributing User

Join Date: Jan 2004

Posts: 43

Time spent in forums: 20 h 41 m 7 sec
Reputation Power: 5

IE Issue with Div's

The problem I'm having is very hard to explain, so I'll try to do it with pictures. In the attached image, five pictures are loaded with 2 links under each one (Enlarge & Remove). For some reason, when IE renders the page, the last one creates a random Remove link in the middle of the page on the next line.

The XHTML code is here:

Code:

<div class="column1of1"><span class="text-underline"><strong><br />Customer Images:</strong></span></div>
<div class="column1of1">
  <div class="column1of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="aaaa" alt="aaaa" src="/store/customer/uploads/thumbnails/1-aaaa1-.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div>
  <div class="column2of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="Another Picture" alt="Another Picture" src="/store/customer/uploads/thumbnails/1-Another_Picture.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div>
  <div class="column3of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="asfsfasf" alt="asfsfasf" src="/store/customer/uploads/thumbnails/1-asfsfasf.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div>
  <div class="column4of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="A Picture of Something" alt="A Picture of Something" src="/store/customer/uploads/thumbnails/1-A_Picture_of_Something.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div>
</div>
<div class="column1of1">
  <div class="column1of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="sdfd" alt="sdfd" src="/store/customer/uploads/thumbnails/1-sdfd.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div>
</div>

The CSS:

Code:

.column1of1 {
    float: left;
    width: 590px;
    display: block;
}
.column1of4even {
    float: left;
    width: 144px;
    text-align: center;
}
.column2of4even {
    float: left;
    width: 144px;
    text-align: center;
}
.column3of4even {
    float: left;
    width: 144px;
    text-align: center;
}
.column4of4even {
    float: left;
    width: 144px;
    text-align: center;     
}

I've tried everything I could think of, but nothing works. Please help!!

Attached Images

images.JPG (20.9 KB, 183 views)

June 26th, 2004, 08:52 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

That looks like a known IE bug. It's usually caused by comments in a float layout.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

June 27th, 2004, 12:02 AM

tonyarous

Contributing User

Join Date: Jan 2004

Posts: 43

Time spent in forums: 20 h 41 m 7 sec
Reputation Power: 5

Thanks a lot. Unfortunately, the only way was to remove the comments because that code is generated by PHP, so it would be difficult to use the margin/padding solution.

Thanks again!!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: