Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a <div>'s content in IE5 Mac

    Hello all,

    I'm trying to build an image gallery with pictures of different widths. Those images are put into divs which float left, and thus create a band of images neatly aligned to each other. Each image should have a centered caption text beneath it.

    The way I did it and how it worked in Moz and IE on Windows, was this:

    CSS:

    Code:
    .floater {
    	float			: left;	
    }
    
    .floater div {
    	text-align		: center;
    }
    HTML:
    Code:
    <div style="width: 500px;">
    	<div class="floater">
    		<img src="storage/c/11-C-0001-R-1-thumb.jpg" />
    		<div>test</div>
    	</div>
    	
    	<div class="floater">
    		<img src="storage/v/31-V-0021-X-0-thumb.jpg" />
    		<div>test</div>	
    	</div>
    </div>
    However, this does not work on IE5 Mac. It seems as if the text-align rule causes the div to not float anymore and become an ordinary block element. I could recreate the same visual effect by using a table instead:

    Code:
    <div style="width:500px;">
    	<div class="floater">
    	<table style="border:0px;padding:0px;" cellpadding="0" cellspacing="0">
    		<tr>
    			<td><img src="storage/c/11-C-0001-R-1-thumb.jpg" /></td>
    		</tr>
    		<tr>
    			<td style="text-align:center;">test</td>
    		</tr>
    	</table>
    	</div>
    	
    	<div class="floater">
    	<table style="border:0px;padding:0px;" cellpadding="0" cellspacing="0">
    		<tr>
    			<td><img src="storage/v/31-V-0021-X-0-thumb.jpg" /></td>
    		</tr>
    		<tr>
    			<td style="text-align:center;">test</td>
    		</tr>
    	</table>
    	</div>	
    </div>
    This wil work in IE on Windows as well as on Mac. But resorting to use a table for a simple visual effect seems quite redundant to me, not to mention the increased code size that will be generated. Semantically... you can guess the rest.

    So here's my question: Is there any possibility to center text in a floated block element whose width is not known that works in IE5 Mac, but without using the table? Thanks in advance.
    De gustibus non est disputandum.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No div

    You could also not include the caption inside yet another div, but have the image and the caption both in the floated div (class floater) and seperate image and text with a line break. Specify text-align: center for the floater divs and you should be fine. I guess.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion, but this does also cause the <div>s to not float anymore, and each new div is positioned beneath the former one, like if they were normal block elements.
    De gustibus non est disputandum.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    hmmm... maybe my idea might work. I have a gallery of pics with center aligned-captions as well. The difference is I used an unordered list and used CSS to align everything just so. It's a little messy, but it might help, and it works on all browsers (pretty sure)...

    page:
    http:richardmedek.com/photos

    stylesheet (look under /* photos */):
    http://richardmedek.com/style.css

    Hope this helps,

    Rich


  •  

    Posting Permissions

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