SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE a:hover padding

    http://www.jream.com/

    At the top, Home and Submit dont touch the bottom bar like in firefox.

    The padding is defined by #header a {}, have I done something wrong?
    HTML Code:
    #header a {
    	padding: 10px 20px 5px 20px; 
    	text-decoration: none; 
    	font-size: 18px;
    }
    
    #header a:link {color:#ccc;}
    #header a:visited {color:#ccc;}
    #header a:hover {color:#ccc; background: #95B26D;}
    #header a:active {color:#ccc;}
    HTML Code:
    #header ul {
    	position: relative;
    	float: left;
    	top: 65px;
    	left: 40%;
    }
    
    #header ul li {
    	display: inline;
    }

  2. #2
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really dont know, Im still puzzled, is there a solution to this? Could anyone help

  3. #3
    SitePoint Addict mr.pita's Avatar
    Join Date
    Aug 2005
    Location
    USA
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried "height"? try it without the top and bottom padding too.

    if not, do a search for "firefox padding," theres some helpful stuff

  4. #4
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've searched everywhere, I don't think there is a bug fix for this.
    The padding width works, but the height padding doesn't, that doesn't make sense to me!

  5. #5
    SitePoint Addict mr.pita's Avatar
    Join Date
    Aug 2005
    Location
    USA
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    margin then?

    ie and ff display them differently.

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2003
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to me that the "a" elements should be display: block. Inline is supposed to display stuff inside the current block, but you don't really have a block set up.

    From W3:

    inline - The element will be displayed as an inline element, with no line break (emphasis added) before or after the element
    display: block, on the other hand, does have breaks before and after the element. My guess is that IE is being more strict and isn't recognizing the padding, since there isn't supposed to even be a break. I don't know, but maybe "padding: xx xx xx xx !important;" will override any conflicting default settings.

  7. #7
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I do this it appears to give the lower object the correct padding,
    with display: block; but the inline becomes obsolete.

    PHP Code:
    #header ul li {
        
    displayinline;
        
    displayblock;

    PHP Code:
    #header a {
        
    padding10px 20px 5px 20px;
        
    text-decorationnone
        
    font-size18px;
    }
    #header a:link {color:#ccc;}
    #header a:visited {color:#ccc;}
    #header a:hover {color:#fff; background: #95B26D;}
    #header a:active {color:#fff;} 
    The !important bug fixes didn't seem to work, I tried:
    padding:!important; padding: 10px 20px 5px 20px;
    and
    padding:!important 10px 20px 5px 20px;

  8. #8
    SitePoint Evangelist
    Join Date
    Oct 2003
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #header ul li { 
    	display: inline; 
    	display: block; 
    } 


    What you need here is display: inline-block. This page may help, too: http://www.quirksmode.org/css/display.html

    --

    Code:
    padding:!important 10px 20px 5px 20px;


    Try
    Code:
    padding: 10px 20px 5px 20px !important;

  9. #9
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never heard of inline-block, it actually displayed just as a block, ill checkout that site in a bit. Im starting to think this whole top link is cursed! Haha =) I may just erase it and use a left menu or something, this is ridiculus

  10. #10
    SitePoint Evangelist
    Join Date
    Oct 2003
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lostseed
    never heard of inline-block, it actually displayed just as a block, ill checkout that site in a bit. Im starting to think this whole top link is cursed! Haha =) I may just erase it and use a left menu or something, this is ridiculus
    Yeah, and there's always margins and floated divs

  11. #11
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If Im not mistaken it looks like this guy accomplished it and it works in ie:
    http://www.eoghanmccabe.com/

    the bottom list with green highlights, the padding is much higher and below the link,
    ill probably check out how he did that


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
  •