Sidebar CSS Error Causing Spacing

Discussion in 'CSS' started by NaSh123, Mar 4, 2009.

  1. #1
    Site: http://tinyurl.com/cxfpc2

    If you look at my left navigation, there is a space between all those buttons. On Firefox there is only 2 spaces between the top images..on IE there is a space between the images and the menu items.

    How can I remove this? I spent a good few hours and couldn't figure it out.

    Thanks!
     
    NaSh123, Mar 4, 2009 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    kk5st, Mar 4, 2009 IP
  3. NaSh123

    NaSh123 Peon

    Messages:
    1,298
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey Gary,

    Not sure what you mean by that? I tried adding that in FireBug but I didn't see a difference? Any chance you got AIM, maybe we can discuss real quick?
     
    NaSh123, Mar 4, 2009 IP
  4. dickieknee

    dickieknee Active Member

    Messages:
    441
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    80
    #4
    you need to learn about padding and margins in css, for IE you will need to have a conditional statement to cover IE and then load a seperate stylesheet for IE

    if you do not know css then consider hiring someone to fix it
     
    dickieknee, Mar 4, 2009 IP
  5. NaSh123

    NaSh123 Peon

    Messages:
    1,298
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I do have a separate sheet for IE CSS. No offense, I appreciate your feedback but point of the thread was to get help on a problem. "Hire someone" isn't really constructive.

    My guess right now is there is some padding or margin in the CSS that I can't figure out which exactly line is causing the spacing in the sidebar.
     
    NaSh123, Mar 4, 2009 IP
  6. dickieknee

    dickieknee Active Member

    Messages:
    441
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    80
    #6
    sometimes when the css has not be stated explicitly then it takes on the defaults, so define a new class

    ul .sidebar_list img to set the padding /margin explicitly
     
    dickieknee, Mar 4, 2009 IP
  7. NaSh123

    NaSh123 Peon

    Messages:
    1,298
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks for the suggestion. Tried it, didn't work :(

    Added

    ul .sidebar_list img {
    margin-bottom:0px;
    padding-bottom:0px;
    }

    Still looked the same.
     
    NaSh123, Mar 4, 2009 IP
  8. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I din't really look at your code too many stylesheets for me in there with lotsa useless classes but usually non floating li's in explorer will give you this extra space under each li because of a small bug.

    Usually can be easely fixed by putting li's with no space in between in the html
    <li></li><li></li> otherwise just use display block n float add some bottom margin if you looking for same effect as ie.
     
    007c, Mar 4, 2009 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Adding the change in Firebug won't help you see anything in IE. Use the IE developers' toolbar. Better yet, add it to your stylesheet.

    The purpose of the forum is to share solutions with the community. To move the discussion to IM defeats the purpose. I will, but only professionally. You may PM me for my rate.

    cheers,

    gary
     
    kk5st, Mar 4, 2009 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    First, having a separate stylesheet for IE is a generally bad idea, though CCs can be used to patch the stylesheet with IE overrides.

    Second, forums like this affoord the beginner a chance to learn by being mentored by more experienced coders.

    That is always the case, but is not an issue here.

    Setting hasLayout on the anchor element will fix the bug without jiggering the formatting.

    cheers,

    gary
     
    kk5st, Mar 4, 2009 IP