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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    div containers with 'white-space' CSS element: wrap prob in faux tables

    OK -- first off, my intention is to create div containers in which the titles can wrap underneath the imgs with 3 containers per 'row' of faux table.

    Everything renders fine when the text titles below the images do not push beyond the width of the image (107px) and do not wrap. See:



    I'm using a bit of CSS and HTML to accomplish this.

    CSS
    Code:
    .website-nominee .grid_item {
    	 width:107px;
    	 float:left;
    	 padding:0 5px 8px 0;
    	 margin-top:0px;
    	 margin-bottom:10px;
    	 margin-right:20px;
    	 margin-left:20px;
    	 white-space:normal;}
    
    .website-nominee .grid_item .name{
    	 font-size:9px;
    	 color:#808080;
    	 padding-top:2px;
    	 text-align:center;
    	 white-space:wrap;
    }
    HTML
    Code:
    ......<div class="grid_item"> 
    <a href="http://9cloudsinc.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//889d79900afa6e90e3835ff9b7e08bbe.jpg"/><div class="name">9 Clouds, Inc</div></a></div> 
     
    <div class="grid_item"> 
    <a href="http://www.billcosby.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//00c7ce79b659b0abfb627a4d7e542540.jpg"/><div class="name">Bill Cosby</div></a></div> 
     
    <div class="grid_item"> 
    <a href="http://www.clarklittlephotography.com/" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//aaef4d8f6b4de6411ec700a002c04a18.jpg"/><div class="name">Clark Little Photography</div></a></div> .......
    Here's the problem, however:

    In IE 8 and Chrome with the 'white-space' property set to "normal/wrap" the text wraps within its own DIV but leaves empty spaces to compensate for the white space that would have otherwise been there, producing this result:


    In Chrome with the 'white-space' property set to "nowrap" the text does not wrap within its own DIV and does not leave empty spaces, again.. still not producing the desired results 'cause I do want the title text to wrap:


    In IE 8 with the 'white-space' property set to "nowrap" the text does not wrap within its own DIV and DOES leave empty spaces, pushing the imges out of their own blocks/columns -- def. not good.:


    So, again, my goal is to get the text to wrap correctly within each DIV and to keep the block formate of the grid intact, with 3 images, with respective text below wrapped if necessary, all uniformly rendered.

    The problem may not even be the CSS element 'White-space'. I'm not sure 'cause this is a little out of my league. Can anyone help?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello RyanRayLA,
    To keep the .website-nominee .grid_item with longer titles from pushing the other floated divs out of the way you need to put a height on it so all .website-nominee .grid_item are the same height.

    If that doesn't work, you will need to put the 3 side by side in a container div like this -
    Code:
    <div class="wrap">
    <div class="grid_item"> 
    <a href="http://9cloudsinc.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//889d79900afa6e90e3835ff9b7e08bbe.jpg"/><div class="name">9 Clouds, Inc</div></a></div> 
     
    <div class="grid_item"> 
    <a href="http://www.billcosby.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//00c7ce79b659b0abfb627a4d7e542540.jpg"/><div class="name">Bill Cosby</div></a></div> 
     
    <div class="grid_item"> 
    <a href="http://www.clarklittlephotography.com/" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//aaef4d8f6b4de6411ec700a002c04a18.jpg"/><div class="name">Clark Little Photography</div></a></div> 
    <!--end .wrap--></div>
    When you do that, .wrap can push down on the next row without moving any out of the way.

    Would be easiest to give each .website-nominee .grid_item a height that fits the longest expected title.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    RyanRayLA (11-25-2009)

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Awesome! Simply adding the height property fixed my problem in Chrome but in IE it didn't help. Any thoughts as to why? If interested the full code and site is: http://www.wakeupawards.com/nominate

    I don't really think container DIV for the three will work because these are being generated by PHP automatically
    Last edited by RyanRayLA; 11-25-2009 at 09:34 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Put a background color on those .grid_item's and you'll see that something is making it expand more than the height:100px; you've put on it.
    Like this
    Code:
    .website-nominee .grid_item {
    	 width:107px;
             height: 100px;
    	 float:left;
    	 padding:0 5px 8px 0;
    	 margin-top:0px;
    	 margin-bottom:10px;
    	 margin-right:20px;
    	 margin-left:20px;
    	 white-space:wrap;
    background: #fff;
    
    }
    It could be as simple as zeroing out default browser settings with a reset.
    I always use the following, or some variation, at the top of my CSS in everything I write -
    Code:
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    	outline: none;
    	text-decoration: none;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    RyanRayLA (11-26-2009)

  • #5
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You did it!~ Your tip of changing the background color of the DIV clued me in and I was able to fix my margins, etc. to get everything to break perfectly.. Geeze, IE can be a pain in the *** sometimes!

    Thanks again!


  •  

    Posting Permissions

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