SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE/Mac problem, images with captions

    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">
    <!--
    div.float {
    float: left;
    }

    div.float p {
    text-align: center;
    }
    -->
    </style>

    here is my html:
    <div class="float">
    <img src="images/featured_items/thumbbroyhill_chair_ottoman.jpg" width="150" />
    <br />
    <p>broyhill chair &amp; 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

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Are you wrapping the group of <div>s in another <div>?

  3. #3
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?)

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote 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

  5. #5
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •