Inline-block cross browser help, please

Get Started
1

I would like to achieve the same result that I get in Google Chrome in Firefox and IE too (better if Firefox 2+ and IE 6+).

The following code works as I wish: layout is fine and background changes color correctly when mouse hovers on text or image. In IE 7 the result is pretty the same although margins are not as in Chrome, in Firefox the layout is mess up and the background changes not as a unique block. I think I have to use display: -moz-inline-stack or display: -moz-inline-box, but as I don’t get any result maybe I don’t use them correctly.

Can some CSS guru may help me?

(attached the picture.jpg I’m using)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	
	<style>
		body {font: 11px arial, verdana, "Trebuchet MS", arial; color: black;}
		
		.title {font: 12px georgia, times, "times new roman", serif; color: #a90329;}
		
		#homepage_previews {width: 310px;}

		#homepage_previews li img {
			float: left;
			border: 0px; 
			padding-right: 10px;}

		ul#inline-block {
			list-style-type: none;} 
		
		ul#inline-block a {
			text-decoration: none;
			color: black; 
			display: inline-block; 
			width: 315px; 
			border-bottom: 1px solid #E5E5E5;}
			
		ul#inline-block a:hover {
			text-decoration: none; 
			background-color: #F2F2F2;}

	</style>
	
</head>

<body>

	<div>
		<div id="homepage_previews">
			<ul id="inline-block">
				<a href="#">
					<li>
						<img src='picture.jpg'/>
					</li>		
					<li class="title">TEST TEST TEST TEST</li>
					<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum turpis non enim tristique imperdiet. Cras neque ante, feugiat ut auctor ac, tempor id nibh. Vivamus dignissim egestas quam, et luctus nibh congue ut. Sed eget lorem enim, ut bibendum velit. Duis porttitor, ligula ac cursus volutpat. </li>
				</a>
			</ul>
		</div>					
	</div>

</body>
</html>
2

Hi Nicero, welcome to SitePoint!

Your code looks fine in firefox (3.6) to me—but maybe I don’t know what you want to see. Could you describe more what is happening that you don’t like?

EDIT: o, I see (compared it with Chrome). AS far as I can tell, there’s no reason to have display: inline-block on the anchor, so if you remove this

ul#inline-block a {display: inline-block; }

does that give you what you want?

3

Thank you very much for you prompt reply.

Unfortunately removing

ul#inline-block a {display: inline-block; }

does not solve the issue.

It is hard to describe the ‘effect’ I’m looking for. It is better to compare the code by having the windows of Chrome and Firefox side by side.

Please pay attention on the hover effect: when the mouse ‘enters’ an ideal rectangle (block) which contains the image, the title and the text, the background of whole ‘rectangle’ changes color. By removing

ul#inline-block a {display: inline-block; }

the mouse needs to hover on any portion of the text or the image to let the background change. In Chrome the mouse can simply enter the ideal rectangle (block) without touching the text to make the background react. As said is hard to explain than checking carefully the difference between the two browsers’ windows.

I tested the code in Firefox 3.0 and 3.5 and it does not appear as Chrome.

Thank you for any help.
Regards.

4

How about something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<style>
body {font: 11px arial, verdana, "Trebuchet MS", arial; color: black;}
		
.title {font: 12px georgia, times, "times new roman", serif; color: #a90329;}
		
#homepage_previews {width: 310px;}

#homepage_previews li img {
	float: left;
	border: 0px; 
	padding-right: 10px;
}

ul {list-style-type: none; padding:0; margin: 20px 0 0 40px;} 
		

			
ul a:hover {
	text-decoration: none; 
	background-color: #F2F2F2;
}

ul:hover {
	text-decoration: none; 
	background-color: #F2F2F2;
}

</style>
	
</head>

<body>

<div>
	<div id="homepage_previews">
	<ul>
	<li><img src='picture.jpg'/></li>		
	<li class="title">TEST TEST TEST TEST</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum turpis non enim tristique imperdiet. Cras neque ante, feugiat ut auctor ac, tempor id nibh. Vivamus dignissim egestas quam, et luctus nibh congue ut. Sed eget lorem enim, ut bibendum velit. Duis porttitor, ligula ac cursus volutpat. </li>
	</ul>
	</div>					
</div>

</body>
</html>
5

Yes, now it works correctly in FF too!

Now I need to wrap the block within a anchor ‘a href’ as the block should be a link to an other page. I guess I need javascript as I understood that an anchor cannot wrap block level elements, and it cannot be a child of ul.
Any suggestion?

Many thanks for your valuable help!

Best regards.

6

Hmm. You posted at CSSCreator, and 13 minutes later posted here, a serious breach of netiquette. You got the same answer both places, which means you wasted somebody’s time, but it still won’t help [url=http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.triestenascosta.it%2Findex.php]the 379 errors and 206 warnings on the actual page.

gary