• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

Help with CSS link background

Please visit www.mwebdev.com/wa.html. Look at the links on the right hand side, with the green background arrow images. I want the arrow to extend full width to the right of the link text, so all of the link background images are the same width. I've tried simply adding right padding to the links, but that's not working properly. How can I extend the background images to their full width and have all of them the same width? Thanks in advance.
0
isaacr25
Asked:
isaacr25
  • 6
  • 6
3 Solutions
 
Gurvinder Pal SinghCommented:
either wrap the anchor tags in a div and give them a fixed width
or
give a min-width to those anchors
0
 
isaacr25Author Commented:
Your first option would be difficult (for me) since this is a CMS and many of the objects are created by the CMS.

I tried min-width and this did not work.
0
 
Gurvinder Pal SinghCommented:
have you updated the code with min-width?, can i see it on the link you have give above?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
isaacr25Author Commented:
Yes, you can see it at the same link. I added it to the #block-block-3 .content a  tag
0
 
Gurvinder Pal SinghCommented:
did you tried giving specific width to the anchor tag?

display:block;
width:250px;
0
 
isaacr25Author Commented:
Ok... that worked with the width... I wasn't adding the display:block. However, now there is vertical space between the links and I can't see where it is being added. I need the background images to be on top of each other, with no spacing.
0
 
Gurvinder Pal SinghCommented:
remove bottom and top padding
0
 
isaacr25Author Commented:
I've tried that. It doesn't help. See the link again. Thanks.
0
 
Gurvinder Pal SinghCommented:
try removing the <br> also
0
 
isaacr25Author Commented:
Ahhh. Ok. Now I have another problem. Sorry! When I remove top and bottom padding, the text is aligned vertically at the top of the image. I want the text to be in the middle of the image vertically. That's why I had the padding before. How can I get the text to align in the middle vertically without using top padding?
0
 
Gurvinder Pal SinghCommented:
does it work after removing <br>?
If yes, then padding can be reinstated as earlier
0
 
isaacr25Author Commented:
If you look at the page now, the <br> has been removed from all lines, and the padding is in place. There is still spacing between the images.
0
 
Jen0910Commented:
Make sure the height of the boxes is not more than then height of the image. Remember, padding is in addition to your specified height. So if you have a specified height of 50px tall on the div, and you added  20px of padding, that would make the height of the box 70px. You'd need to subtract the padding from the height, and declare it at 30px, not 50px.

If that does not work, make sure you have no top/bottom margins on the boxes.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now