Hyperlink Styling

Discussion in 'CSS' started by Omzy, Oct 25, 2008.

0
  1. #1
    I have written the following CSS to style the hyperlinks on my page:

    
a:link {
text-decoration: none; 
background-color: #C00000; 
color: white; 
padding: 5px;
}
    Code (markup):
    In FF this displays as intended (a 'box' hyperlink with 5px padding around the text). However in IE the top and bottom padding does not display, only the left and right. Is there another CSS property to specify for IE?
     
    Omzy, Oct 25, 2008 IP
  2. Omzy

    Omzy Peon

    Messages:
    249
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    OK I fixed it, I had to specify padding on the DIV itself.

    But now I have another problem. When I zoom the page in or out (using IE7) the text does not stay within it's 'box'. Does anyone know why?
     
    Omzy, Oct 25, 2008 IP
  3. Omzy

    Omzy Peon

    Messages:
    249
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    'display:inline-block' seems to have fixed that!
     
    Omzy, Oct 25, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yes its because the <a> anchor element is in-line, therefore if you give it widths heights margins or paddings it will be ignored, unless you set it to display: block;

    Elements like a DIV and P are block elements, whereas SPAN and A are in-line elements.

    in-line elements appear next to each other whereas block elements appear undeneath each other.
    That's why we sometimes float block elements so that they can appear next to each other rather than undeneath one another.
     
    wd_2k6, Oct 25, 2008 IP