Grr, arg! CSS Positioning...

[GravyMonster]

Hey all,

Quick Q, I've got the below code:

<div style="width: 235px;">
	<img src="images/btn-discuss-left.gif" style="float: left;" />
	<div style="background-image: url('images/btn-discuss-bg.gif'); background-repeat: repeat-x; float: left; width: 173px; height: 30px; display; inline;"><a href="#" style="margin-top: 7px; display: block; font: bold 10pt arial; color: #FFFFFF; text-decoration: none;">Discuss your project</a></div>
	<img src="images/btn-discuss-right.gif" style="" />
</div>

In FF it looks great:

In IE, it does not...

can anyone see why IE is adding the additional padding?

I swear I'm going to go postal over this one in a minute

TIA

 

[Mickey]

That HTML is horrible. Fix the HTML, style it all using CSS and your problems should go away on their own

 

[Conrad11]

Is it one button with this style or one of many?

HTML is horrid as noted above.

 

[TwoSaints]

have you tried adding padding: 0; and/or margin: 0; to the styling of the img tags?

 

[dbmzk1]

Is there any reason why you split it into 3 chunks? Why not just have 1 div with a single background image? Just knocked this up in less than 2 minutes, it's much simpler and it works perfectly in IE6, IE7, FF, Opera and Safari.

HTML:

<div id="discuss">
<div id="discuss-text">
<p><a href="#">Discuss your project</a></p>
</div>
</div>

CSS:

#discuss {
	width:235px;
	height:30px;
	line-height:30px;
	background:#C82034 url(new-discuss-bg.gif) no-repeat;
}

#discuss-text {
	margin-left:35px;
}

EDIT: Forgot the CSS! lol!

 

[Mickey]

Why not just have 1 div with a single background image?

It'd be better as 2 images, the icon for the link seems to be specificly for that one link, the background image is generic by the looks.

HTML:

<div id="discuss">
<div id="discuss-text">
<p><a href="#">Discuss your project</a></p>
</div>
</div>

CSS:

#discuss {
	width:235px;
	height:30px;
	line-height:30px;
	background:#C82034 url(new-discuss-bg.gif) no-repeat;
}

#discuss-text {
	margin-left:35px;
}

That HTML isn't THAT much better than the original tbh, apart from separating the styles.



Something like this would be better (assuming it's a menu item, looks like it to me) (not tested so dimensions will be out):

<ul id="menu">
	<li class="discuss"><a href="#">Discuss your project</a></li>
</ul>

	#menu li
	{
		display:block;
		background: transparent url(menu-item-bg.gif) no-repeat top right;
		width:235px;
		height:30px;
		padding-right:20px;
	}
	
	#menu li a
	{
		display:block;
		font-weight:bold;
		padding-left:30px;
	}
	
	#menu li.discuss a
	{
		background: transparent url(menu-item-discuss.gif) no-repeat top left;
	}

 

[GravyMonster]

Thanks for the replies guys.

I know the code in the example was crap - it was just a quickly thrown together proof of concept, the updated version is below.

The reason it was three images was because that's how the site had been previously built and I couldnt be arsed to put 60+ button images together. However as it ended up that was the only effective solution. So now it looks like...

<div class="discuss-btn"><a href="#" alt="Discuss your project" title="Discuss your project">Discuss your project</a></div>

.discuss-btn {
	background-image: url('../images/btn-discuss-bg.gif'); 
	float: left; 
	clear: both; 
	background-repeat: repeat-x; 
	width: 235px; 
	height: 30px; 
	margin-bottom: 6px;
}

.discuss-btn A {
	margin: 7px 0px 0px 34px; 
	display: block; 
	font: bold 10pt arial; 
	color: #FFFFFF;
	text-decoration: none;
}

 

[Mickey]

Thanks for the replies guys.

I know the code in the example was crap - it was just a quickly thrown together proof of concept, the updated version is below.

The reason it was three images was because that's how the site had been previously built and I couldnt be arsed to put 60+ button images together. However as it ended up that was the only effective solution. So now it looks like...

<div class="discuss-btn"><a href="#" alt="Discuss your project" title="Discuss your project">Discuss your project</a></div>

.discuss-btn {
	background-image: url('../images/btn-discuss-bg.gif'); 
	float: left; 
	clear: both; 
	background-repeat: repeat-x; 
	width: 235px; 
	height: 30px; 
	margin-bottom: 6px;
}

.discuss-btn A {
	margin: 7px 0px 0px 34px; 
	display: block; 
	font: bold 10pt arial; 
	color: #FFFFFF;
	text-decoration: none;
}

You'd be better off using padding instead of margins on the link, it'll give you a bigger clickable area.

When you say you've combined all the images into 60+ individual images, is the background of them all the same, with a different icon? If so, it'd be better having it as my example above shows.