SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    <li> line height difference in IE 7

    hi all

    i m having issue with setting the equal line height for <li> navigation

    see this below link in IE 7
    http://wdpixels.com/leftnav_issue/leftnav.html

    You will see line height difference in the left and right navigation.

    left navigation has <a> href tags but right navigation doesnt.

    dont know why <a> href is disturbing the line height.

    vineet

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's just because you give the links a display:block;

    The inline box model is extremely complicated. It's just giving you a bug. I don't see why you even need to have display:block there in the first place, but if you do eventually need to use some block level features, you can set it to display:inline-block; (also set zoom:1; to give haslayout).

    IE7 will also need *+html a.leftnav_link{display:inline;} since IE7 technically doesn't even support display:inline-block;

    The IE7 feeding of that line along with zoom:1 will make it have display:inline-block behavior.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi ryan

    i want to use "Display:block" to make the the whole <li> row as clickable as link

    if i use "Display:inline-box" then only the <li> text is clickable.

    i want the whole <li> clickable as link

    is there any solution to it.

    vineet

  4. #4
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh sorry,

    this work for me

    *+html a.leftnav_link{display:inline;}

    thanks. its solved now

    vineet

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As I said, display:inline makes it work for IE7. Glad you got it working .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •