Hi,
I am using this code 5 times to get a list of songs, but for some reason when i put a href around the buttons it add space to the top and bottom of the buttons and pushes it all out.
Works fine in IE but not firefox??
//CSS
.ringtonestxt {
margin:3px 3px 0 3px;
float:left;
}
.listenbutton {
margin:5px;
float:left;
}
.buybutton {
margin:5px;
float:right;
}
.ringtoneshr {
margin:0 8px 0 8px;
}
// HTML
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" target="_blank"><img src="xx.gif" border="0" alt="xx" title="xx" width="27" height="20" class="listenbutton"></a>
<div class="ringtonestxt">
<p class="ringtonslrgtxt">Song titlep>
<p class="ringtonssmltxt">Artist</p>
</div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="xx.gif" border="0" alt="xx" title="xx" width="27" height="20" class="buybutton"></a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/hr.gif" border="0" alt="" width="95%" height="2" class="ringtoneshr">
Looks perfect when i remove the href from around the two buttons but ff adds space ??
Any ideas why??
Thanks
k0r54Try adding this.
a img {
margin: 0;
padding: 0;
border: 0 none;
}Or use display:block on that img. Images are inline by default and have to take into account the current font metrics around them. Do you have a valid doctype on that page?yes i do but it is transitional, has to be or it will not validate with other parts of the code
Unfortunatly neither of these work
Perhaps if you showed us the rest of the code we might be able to come up with a solution.kravvitz: -
Sorry but there isn't really any more code to show, this is it all It is inside an outside div, but that has no influence.
Is there anything in perticular that you want to see?
Thanks
k0r54The CSS rules that you have for <a> and <img> elements.Hi,
I have this for the <a> but nothing for the img
a {
margin:0;
padding:0;
}Maybe you mean the margin on the <p>s.
Try this.
.ringtonestxt p {
margin: 0;
}Unfortunatly that does not work either, this is drivin me mad, i just cannot see what the problem isHAHA, job done 
It was for some reason there was padding on in the outer div and that was causing it :s. Not sure why though, but im sorry to have wasted your time, it was the other code.
Thanks for all your time
k0r54
I am using this code 5 times to get a list of songs, but for some reason when i put a href around the buttons it add space to the top and bottom of the buttons and pushes it all out.
Works fine in IE but not firefox??
//CSS
.ringtonestxt {
margin:3px 3px 0 3px;
float:left;
}
.listenbutton {
margin:5px;
float:left;
}
.buybutton {
margin:5px;
float:right;
}
.ringtoneshr {
margin:0 8px 0 8px;
}
// HTML
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" target="_blank"><img src="xx.gif" border="0" alt="xx" title="xx" width="27" height="20" class="listenbutton"></a>
<div class="ringtonestxt">
<p class="ringtonslrgtxt">Song titlep>
<p class="ringtonssmltxt">Artist</p>
</div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="xx.gif" border="0" alt="xx" title="xx" width="27" height="20" class="buybutton"></a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/hr.gif" border="0" alt="" width="95%" height="2" class="ringtoneshr">
Looks perfect when i remove the href from around the two buttons but ff adds space ??
Any ideas why??
Thanks
k0r54Try adding this.
a img {
margin: 0;
padding: 0;
border: 0 none;
}Or use display:block on that img. Images are inline by default and have to take into account the current font metrics around them. Do you have a valid doctype on that page?yes i do but it is transitional, has to be or it will not validate with other parts of the code
Unfortunatly neither of these work
Perhaps if you showed us the rest of the code we might be able to come up with a solution.kravvitz: -Sorry but there isn't really any more code to show, this is it all It is inside an outside div, but that has no influence.
Is there anything in perticular that you want to see?
Thanks
k0r54The CSS rules that you have for <a> and <img> elements.Hi,
I have this for the <a> but nothing for the img
a {
margin:0;
padding:0;
}Maybe you mean the margin on the <p>s.
Try this.
.ringtonestxt p {
margin: 0;
}Unfortunatly that does not work either
, this is drivin me mad, i just cannot see what the problem isHAHA, job done It was for some reason there was padding on in the outer div and that was causing it :s. Not sure why though, but im sorry to have wasted your time, it was the other code.
Thanks for all your time
k0r54