IE/Mac problem, images with captions

**carrotflowers** · Oct 22, 2003 07:10

Hi there,

I am having a problem. I want a page of photos with captions, centered. I followed the tip from http://alistapart.com/articles/practicalcss

here is my css:
<style type="text/css">

</style>

here is my html:
<div class="float">
<img src="images/featured_items/thumbbroyhill_chair_ottoman.jpg" width="150" />
<br />
<p>broyhill chair & ottoman</p>

</div>

<div class="float"> <img src="images/featured_items/thumb_double_rocker.jpg" width="150" />
<br />
<p>double rocker</p>
</div>

<div class="float">
<img src="images/featured_items/thumb_fishtank_radio.jpg" width="150" />
<br />
<p>fishtank radio</p>

</div>

Pretty strsightforward. And my dtd is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

But when I view this on the latest IE for the Mac (OS10.2) the images are stacking on top of each other on the left side of the page, while the captions are below each image, but in the center of the page.

Does anyone know why this is happening/is it a Mac bug/know a fix?

Thanks!

PS for faster viewing here is the page:
http://www.dapperdesigns.net/clients...d_items2.shtml

**vgarcia** · Oct 22, 2003 07:43

Are you wrapping the group of <div>s in another <div>?

**carrotflowers** · Oct 22, 2003 07:46

Look who it is!

Originally yes, but trying to isolate the issue I stripped the page of everything besides the code above (see link, view source?)

**vgarcia** · Oct 22, 2003 07:53

Originally Posted by furryyuri

Look who it is!

Originally yes, but trying to isolate the issue I stripped the page of everything besides the code above (see link, view source?)

If you look further down in that article, you'll see that the author added wrapper and spacer <div>s to get the required appearance. Here's the code from the article:

HTML Code:

<div class="container">
<div class="spacer">
  &nbsp;
</div>

<div class="float">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /><br />
  <p>caption 1</p>
</div>

<div class="float">
  <img src="image2.gif" width="100" height="100"
  alt="image 2" /><br />
  <p>caption 2</p>
</div>

<div class="float">
  <img src="image3.gif" width="100" height="100"
  alt="image 3" /><br />
  <p>caption 3</p>
</div>

<div class="spacer">
  &nbsp;
</div>

</div>

And here's the CSS for the spacer and container divs:

Code:

div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }

div.spacer {
  clear: both;
  }

Try the article suggestions again with this code and let us know how it works out.

Off Topic:

And my Powerbook is at home, it's actually my girlfriend's

**carrotflowers** · Oct 22, 2003 10:40

She has good taste!

Thanks, Vinnie, I'll check that out.

I actually wrote to the guy (Mark Newhouse) who wrote that piece for alistapart. He very graciously responded and said that while most browsers will collapse the float if you don't assign a width, IE/Mac will not. So I need to add a width to the class definition. I will try it when I get home to my Mac!

User Tag List

Thread: IE/Mac problem, images with captions

Thread Tools

Display

Hybrid View

IE/Mac problem, images with captions

Bookmarks

Bookmarks

Posting Permissions