www.webdeveloper.com
Results 1 to 2 of 2

Thread: Issues with images aligning vertically instead of horizontally in Mozilla & Chrome

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    1

    Question Issues with images aligning vertically instead of horizontally in Mozilla & Chrome

    I'm having an issue regarding my images aligning vertically instead of horizontally in Mozilla & Chrome browsers. Works fine in IE8 but haven't tested the other browsers yet. I suspect it has something to do with the float elements, but I can't figure out for the life of me how to fix it. I'm using a generic pre-designed template from Homestead/Intuit which I have pretty much redesigned to my own liking. I added a vertical accordion menu using css & jquery but ever since then, I've had trouble with my images aligning vertically instead of horizontally only in my Product Detail pages. You can get a good idea of the problem here: http://stores.homestead.com/springcr...mes/Detail.bok.

    If anyone has any ideas or suggestions I sure would appreciate it. I don't know much about floats or css. I'm just a do-it-yourselfer trying to learn. I know...EEEK! RUN FOR THE HILLS!

    DOCTYPE information on my Header Page:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
          
    <html xmlns:og="http://ogp.me/ns#"
          xmlns:fb="http://www.facebook.com/2008/fbml">
    Here is the css portion of code on my Stylesheet Base page:

    Code:
    /****** MULTIPLE IMAGES ****** product detail page */
    .click {cursor:pointer}
    .imagesmallcontainer {
            background-color:#ffffff;
    	border:2px solid #CCCCCC;
    	float:left;
    	height:65px;
    	margin:8px 4px 2px 0px;
    	overflow:hidden;
    	width:65px
    }
    .hoverover {
    	float:left;
    	font-size:11px;
    	padding-bottom:2px;
    	padding-top:2px;
    	width:300px
    }
    .notavailable {
    	background-color:#ffffff;
    	border:1px solid #cccccc;
    	color:#666666;
    	padding:10px;
    	text-align:center;
    }
    ...and the html portion on my Product Detail page:

    Code:
    [<table border="0" cellspacing="0" cellpadding="20">
    	<tr>
    		<td valign="top">
    		<ss:if test="$product.defaultImage"> 
    		    <table border="0" cellspacing="0" cellpadding="0" id="imgtable" rules="none">
    				<tr>
    					<td valign="bottom" width="100%" height="100%" id="divMediumContainer">
    	             		<ss:set name="item" value="$product.defaultImage"/>
    		
    						<ss:if test="$item.hasMediumSize()">
    								<ss:set name="urlMedium" value="$item.medium"/>
    						<ss:else/>
    								<ss:set name="urlMedium" value="$item.small"/>
    						</ss:if>
    			
                			<ss:image id="imgMedium" source="$urlMedium" title="$item.title" class="click"/>	     
                     	</td>
    				</tr>
    			</table>
    			
    			<br />
    	    
    			<ss:foreach item="productMedia" within="$product.images">
    				<ss:if test="$counter.totalRows > 1">
    					<ss:set name="item" value="$productMedia.storeMediaItem"/>
    					<ss:if test="$item.hasSmallSize()">
    						<div id="$system.concat('divSmallImage_', $counter.currentRow)" class="imagesmallcontainer">
    							<ss:image id="$system.concat('imgSmall_', $counter.currentRow)" source="$item.getImage('small')" calcoffset="65"/>
    						</div>
    				        <ss:if test="$counter.isLast">
    							<div class="hoverover">
    								<ss:image source="$storeVersion.images['hoverOver.gif']"/>
    							</div>	
    						</ss:if>
    					</ss:if>
    				</ss:if>
    			</ss:foreach>
    		<ss:else/>
    			<div class="notavailable">
    				<div style="padding:50px">Photo Not Available</div>
    			</div>
    		</ss:if>
    	</td>
    Thanks in advance for any help. I'm about ready to just give it all up...

    Marcy

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    If you want them to be displayed horizontally. So that you'll have the thumbnails like.

    PIC1,PIC2,PIC3,PIC4

    Code:
    .hoverover {
    	float:left;
    	font-size:11px;
    	padding-bottom:2px;
    	padding-top:2px;
    	width:300px;
            display: inline;
    
    }
    But if you want them to remain vertical like they are, but without the text over them. You'll need to read this
    http://www.w3schools.com/css/css_pos...p?output=print

    Just using the inspect element on chrome I notice that the image part only has a 295x300px. If you want the thumbs to be displayed vertical without the overlapping just make the size of the height larger.

    According to chrome you should be looking for the CSS called common-container and not hoverover if you want the thumbs to remain vertical.But the code above should work if you want them horizontal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles