Browser compatibility issues

HTML & CSS
1

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

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.


<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…


/*
	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

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!