SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float Breaking Out

    I'm doing a project with responsive web design and started at the mobile resolution. Everything seemed fine and thought it was going to easy, so I thought.

    I have a small test for a grocery store sales ad that displays the items in thumbnails, with the description and price. Each image is in a <div> and the description (floated left) and price (floated right) is in a span positioned at the bottom of each div. As stated, I thought it was going good, tested it on android and iPhone phones and it works. Of course since it worked on android it worked on Chrome on my desktop and Safari 5 and 6. However, according to Sauce Labs and their browser testing, not much luck on Opera, IE or Firefox. So hoping someone can give some opinion or answers on the matter to match up to Chrome and Safari.

    NOTE: I haven't started the up-coding in CSS to target higher resolutions, I thought it would be best to fix the problem first. So if you go to the link don't panic at the gigantic thumbnails, lol. I've been working with my phone and browser at the 320px range to test and I freak out when I go back to fullscreen.
    http://www.wordlocker.com/demos/ad_view.html

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Ad View</title>
    <meta name="viewport" content="width=device-width" />
    <link href="saleAd.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="container">
    	<div id="content">
    		<div class="adBlock">
    			<img src="english_cut_roast.jpg" title"DEL MONTE VEGETABLES" />
    				<span>
    					<p class="description">14.5 - 15.25 OZ CAN<br />SWEET PEAS, WHOLE KERNEL OR CREAM STYLE CORN, CUT GREEN BEANS OR FRENCH STYLE GREEN BEANS<br />DEL
                           MONTE VEGETABLES</p>
    					<p class="price">5/$3</p>
                  	</span>
        	</div>
            <div class="adBlock">
            	<img src="progresso_soup.jpg" title"PROG SOUP" />
    				<span>
    					<p class="description">12.5<br />ALL VARATIES<br />PROG SOUP</p>
    					<p class="price">3/$5</p>
                  	</span>
         	</div>
           	<div class="adBlock">
            	<img src="bnls_sknls_chkn_brst.jpg" title"BONELESS SKINLESS CHICKEN BREAST" />
    				<span>
    					<p class="description"><br />GRADE A<br />BONELESS SKINLESS CHICKEN BREAST</p>
    					<p class="price">1<sup>49</sup>/lb.</p>
                   	</span>
        	</div>
           	<div class="adBlock">
            	<img src="tav_bacon.jpg" title"THORN APPLE VALLEY BACON" />
    				<span>
    					<p class="description"><br />PORKY<br />THORN APPLE VALLEY BACON</p>
    					<p class="price">3/$10</p>
                  	</span>
          	</div>
            <div style="clear:both;"></div>
    	</div>
    </div>
    </body>
    </html>
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /*@import url(http://reset5.googlecode.com/hg/reset.min.css);*/
    
    body {
    	font-size:100%;
    	background-color:#09F;	
    }
    
    #container {
    	background-color:#FFF;
    	width:100%;
    	margin:0 auto;
    	
    }
    
    #content {
    	margin:0 auto;
    	width:99%;
    	background-color:#F33;
    	padding:0 .5555555555%;
    }
    
    .adBlock {
    	float:left;
    	position:relative;
    	width:48%;
    	margin:1% 1%;
    }
    
    .adBlock span {
    	position:absolute;
    	bottom:0;
    	width:100%;
    	max-height:100%;
    	
    	background: rgb(255, 255, 255);
    	
    	/* RGBa with 0.6 opacity */
    	
    	background: rgba(255, 255, 255, 0.8);
    	
    	/* For IE 5.5 - 7*/
    	
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);
    	
    	/* For IE 8*/
    	
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)";
    }
    
    img {
    	width:100%;	
    }
    
    .description {
    	float:left;
    	width:65%;
    	font-size:.6em;
    }
    
    .price {
    	text-align:right;
    	float:right;
    	background-color:#E8F30C;
    	/*width:35%;*/
    }
    
    sup {
    	vertical-align:super;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    What happens if you add a left setting?

    Code:
    .adBlock span {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
        bottom: 0;
        left: 0;
        max-height: 100%;
        position: absolute;
        width: 100%;
    }
    That fixes it in Firefox for me.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Note that it is invalid to wrap p elements in a span. p elements need to be in a div.

    As Ralph said you need to supply co-ordinates where specific position is required as auto position will vary between browsers depending on text-alignment and other factors.


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
  •