SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Browser compatibility issues

    On this site, please advise why the headings for the different products ("Shop for...") overlay the product images when the site is viewed in chrome or safari, but not in firefox or IE???

    Also, how come the Facebook widget in the right sidebar does not appear in Chrome but does in all the other browsers?

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    multiple div for nothing around the teaser pic, no div around the H2 and UL to make them obey the float... That simple. You've got a bunch of pointless/wasteful HTML and a structure that doesn't do what it appears you want it to do.

    ... and that's before we talk the redundant and pointless title attribute on IMG (if you're GOING to do that, put it on the anchor), paragraph around non-paragraph text (that's ALSO redundant)..

    So first, we need to clean up the markup to do what you are trying to do here.

    Code:
    <div class="homeproduct">
    	<a href="/shop/wall-mounted-guitar-display/" class="leadingPlate">
    		<img
    			alt="Wall Mount Guitar Display Rack"
    			src="/wp-content/uploads/site-elements/wallmount-display-home.jpg"
    			width="245" height="237"
    		 />
    		 The Pro-File&trade; Series Guitar Wall Mount Display
    	</a>
    	<div class="contentAfterPlate">
    		<h2>
    			<a href="/shop/wall-mounted-guitar-display/">
    				Shop For Wall Mounted Guitar Displays
    			</a>
    		</h2>
    		<ul>
    			<li>Display and access your favorite guitars</li>
    			<li>Holds and displays four guitars angularly, using a minimal amount of wall space</li>
    			<li>Built to last with hardwood and handcrafted construction</li>
    			<li>Includes mounting hardware</li>
    			<li>Simple and fast assembly</li>
    		</ul>
    		<a href="/shop/wall-mounted-guitar-display/"
    			class="shopNow"
    			alt="Shop for wall mounted guitar racks"
    		>
    			<img
    				src="/wp-content/uploads/site-elements/guitar_shop.png"
    				alt="Read More / Shop"
    			>
    		</a>
    	<!-- .contentAfterPlate --></div>
    <!-- .homeproduct --></div>
    Is probably how I'd be coding that same section... with the CSS more being something like this...

    Code:
    /*
    	these are classes I have in most of my stylesheets along with
    	.trailingPlate (right) and just plain .plate (centered)
    */
    .leadingPlate {
    	float:left;
    	display:inline; /* prevent
    	margin:0 1em 1em 0;
    }
    
    .contentAfterPlate {
    	overflow:hidden; /* wrap floats, do not wrap under floats! */
    	zoom:1; /* trip haslayout, wrap floats/no wrap legacy IE */
    }
    
    /* page specific */
    
    .homeProduct {
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats legacy IE */
    }
    
    .homeProduct .leadingPlate {
    	width:250px;
    	text-align:center;
    	text-decoration:none;
    	color:#000;
    }
    
    .homeProduct .leadiingPlate img {
    	border:2px solid #630;
    }
    Very rough, but should be enough for you to get the idea... stripping out all the pointless tags and paragraphs around non-paragraph elements... and then getting the containers in a proper order so the float is obeyed properly.

    Which can be tough to do in turdpress given it's basically pissing all over your code in the first place...

  3. #3
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i got it fixed by adding display:inline to the h2. but i'll work to implement those changes you suggest, and also to cleanup the validation errors too. got lots to do here. hopefully within the next few days. appreciate the help!


Tags for this Thread

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
  •