#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    297
    Rep Power
    18

    How to get lineheight of links the same in FireFox as in IE?


    In the html http://www.inspiration-company.nl/test40.html I have placed 4 links. In IE there is a normal small vertical distance between the lines of these links. In Firefox however there is more distance between the lines. Is there a way to get the distance in FireFox the same as in IE?
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    Just set a line-height for #navLeft
    line-height:1; or line-height:.9; by the look of it.

    By the way, a list should be marked up as a list, a unordered list would be better here.

    To see how one can style list take look at Listamatic, example on both vertical and horizontal lists:
    http://css.maxdesign.com.au/listamatic/
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    297
    Rep Power
    18
    Thanks for your reaction. I added line-height as you can see in http://www.inspiration-company.nl/test41.html, but there is still a rather big difference in FireFox compared to IE. In Firefox the distance is much wider. I need to make a long list of links so I will get in trouble. Isn't there a way to solve this problem?

    Hope you can help me out.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    Maybe I should have been more specific.

    You should apply that style to #navLeft not the links.

    Code:
    #navLeft {
        position:absolute;
        width:150px;
        top:50px;
        left: 50px;
        z-index:10;
        line-height:1;
    }
    More about line-height.
    http://meyerweb.com/eric/thoughts/20...-line-heights/


    Sidenote:There is a issue with the pseudo-classe.
    They should come in this order:
    a:link {...}
    a:visited {...}
    a:hover {...}
    a:active {...}
    As they have the same specificity and would otherwise overrule each other.
    An another link to Meyer with more about that :
    http://meyerweb.com/eric/css/link-specificity.html
    Last edited by Akh; November 14th, 2006 at 06:26 PM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    297
    Rep Power
    18
    Hi,

    Thanks for all your help. I did as you said (see http://www.inspiration-company.nl/test41a.html) but the difference is still the same. In Firefox the "height" of all the links is 20 - 30% more than in IE. I need to make columns of links and will get in trouble with the layout of my site in FireFox!!!
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    I think this is how these two browsers handles br.
    When marked-up with a list you get a more coherent result

IMN logo majestic logo threadwatch logo seochat tools logo