I'm trying to style a hyperlink to look like a button using a sprite image, the button needs to be flexible for different lengths of text.

problem with the one i've built, it's not flexible in IE6. Looking for suggestions as to how to better code a button like that.

3 answers

1
point
This was chosen as the best answer

Is there a reason why you wrapped every single link into a p tag? normally you should use a unsorted list, simply remove the bullets and set a fixed with for the list, that should fix the problem.

Here is a little example for the CSS:

li{
width:150px;
list-style:none;
}

EDIT:

Like you can read in the comments, i have misunderstood the problem and found something that could be the solution, here is a little CSS example of what i tried to explain:


a{
padding-right:10px;
}
a img{
margin-right:-10px;
}
Answered about 7 years ago by Sven Finke
  • Hi, It's not meant to be in a list, each link will be position individual anywhere in between paragraphs. I do not wish to limit the width as the length of each button may vary as you can see from the example. Caleb Wong about 7 years ago
  • Okay, like i just read here http://tr.im/B4CV (in german), its impossible to add bottom or right like you intended in IE6, the IE6 cant get the height or width of the parent element to position the element in the right way. Cant you just remove the 'right:0', add some padding to the a element and then add a negative margin to the img? Sven Finke about 7 years ago
1
point

Have you tried declaring display:inline-block; on the <a> of the button? The vertical padding will not be created if the default display (which is inline for <a>) is used.

Answered about 7 years ago by Divya Manian
0
points

Have a look into display: inline-block; which gives inline elements some attributes of block elements (margin, padding, etc).

It originated in Internet Explorer, and is now supported in most other browsers.

Answered about 7 years ago by Olly Hodgson