SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 38 of 38
  1. #26
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Actually I added ul to the end of the parent. I had mentioned that the OP was targeting the parent and not the ul.

    All my changes above were applied to the ul
    Code:
    .social_links ul
    OK, that got rid of the list indent which I addressed vis ŕ vis the left padding on ul. The side padding on the parent reduces the available space for the ul.

    Quote Originally Posted by paulcj2 View Post
    Actually, that's Wordpress advice for making their stuff work. Didn't realize it messes up viewers preferences.
    A member here, on another forum uses a scatological term (rhymes with 'word') for that application due to the generally screwy css.

    Quote Originally Posted by paulcj2 View Post
    At the moment the sub-style sheet padding is set thus:

    Code:
    .social_links ul {
        padding: 10px 0 ;
    }
    i.e. no padding to the right and left. Why doesn't that take precedence over the parent?
    Padding is not inherited, and no selector addresses an ancestor anyway.

    Here is a minimal test case for investigating the effects of padding. Alter, delete, or add padding to the different elements.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
            
      <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
    
      <title>Test</title>
      <style type="text/css">
    /*<![CDATA[*/
    
      #a {
        background-color: blue;
        color:  white;
        padding: 10px;
        }
    
      ul {
        background-color: red;
        list-style: none;
        margin: 0;
        padding-left: 35px;
        }
    
      li {
        background-color: green;
        }
    
      li span {
        background-color: magenta;
        font-weight: bold;
        }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div id="a">
        <ul>
          <li><span>list item</span></li>
    
          <li><span>list item</span></li>
        </ul>
      </div>
    </body>
    </html>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  2. #27
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The real problem now seems to be with the parent style sheet - style.css (line 1197)

    Code:
    .entry-content ol, .entry-content ul {
    padding:0 0 0 35px;
    }
    I want to override the padding in the sub-style sheet - testscheme.css

    Code:
    .social_links ul {
        padding: 10px;
    }
    Why won't this work?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  3. #28
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    2) don't even waste your time screwing with the LI for formatting. Set them to display:inline and forget they exist.
    You missed the point Jason!
    The reason I set inline-block on the LI was to give the "option" of setting vertical margins since native inline elements cannot take on vertical margins.

    However, if the OP is content with loosing that option then there is no reason for inline-block.

    3) you've got anchors around all of them, inline-block THOSE. Will work in all browsers without dicking about with any 'targeting' hacks (* html, +html, etc).
    And if you want the option that I mentioned above then you will have to use the tripswitch for IE6/7.

    Assuming you really 'need' the inline-block and padding... and use padding instead of margin so you can dodge the whole margin-collapse headaches AND any IE margin quirks.
    Collapsing Margins is not happening here because the LI items were inline-blocks.

    There are other situations where elements do not have their margins collapsed:

    • floated elements
    • absolutely positioned elements
    • inline-block elements
    • elements with overflow set to anything other than visible (They do not collapse margins with their children.)
    • cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
    • the root element

  4. #29
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm lost here. I really appreciate all the thought and assistance coming my way, but I'm not finding a way to get my sub-style sheet to override this
    Code:
    .entry-content ol, .entry-content ul {
    padding:0 0 0 35px;
    }
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  5. #30
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm lost here. I really appreciate all the thought and assistance coming my way, but I'm not finding a way to get my sub-style sheet to override this
    Code:
    .entry-content ol, .entry-content ul {
    padding:0 0 0 35px;
    }
    I don't want to change that in the main style sheet, as I don't know what else it will change.
    (Sorry for the double post.)
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #31
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You do not have to change that in the main stylesheet.
    You just need more specifity on the ul class. Then remove the default margin/padding or set it as you desire.

    Code:
    ul.social_links {
        list-style:none;
        text-align: center;
        color:#FFF;
        background:#5D5F5C; 
        margin:0;
        padding:0;
    }
    
    ul.social_links li {
        display:inline;
        height:1&#37;; /* trip haslayout, make IE behave */
    }
    
    ul.socialLinks li a {
        display:-moz-inline-block;
        display:-moz-inline-box;
        display:inline-block;
        padding:5px;
    }
    @paul
    You see though, now you have no way to use vertical margins and space things out evenly.
    I was trying to give you that option, as you can see now the images are smashed together vertically. Padding on the anchors is not a substitute for margins on the LI.

    I was trying to set you up with Something Like This.

  7. #32
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. I implemented the first part of your message:
    Code:
    margin:0;
    padding:0;
    Which does not make any difference in the space to the right or left. Please help me understand why.

    Edit: Oh ok. That does change the padding. Now I see the value of the second part of your message. I'll give that a try in the morning when I'm fresh. Thanks for hanging in with me.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  8. #33
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You are still picking up the 35px left padding from the .entry-content ul

    The first part of my message was telling you to add UL before the selector in order to give it more weight over your default styles and then to reset the margin/padding.

    Code:
    ul.social_links {
        list-style:none;
        text-align: center;
        color:#FFF;
        background:#5D5F5C; 
        margin:0;
        padding:0;
    }
    The second part of my message was an attempt to show you how deathshadow's code (which is what you have now) has left you without the ability to set vertical margins on your list items.

  9. #34
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't wait until morning.
    Code:
    ul.social_links{ 
        margin:10px auto;
        padding:5px;
        background:#5D5F5C;
        text-align:center;/*center the list items*/
        list-style:none;
    }    
    ul.social_links li{
        display:-moz-inline-box;/* for FF2 (inline-box must be used for shrink wrapping)*/
        display:inline-block;/* for modern browsers */
        margin:5px 3px;
    }
    * html #nav li{display:inline;margin:5px}/* inline-block trigger for IE6 */
    *+html #nav li{display:inline;margin:5px}/* inline-block trigger for IE7 */
    Why is the code not being applied to li?
    http://www.clickbasics.com/
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  10. #35
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Because the code at your site is not the same as what you just posted.

    Your site has this -
    Code:
    li.social_links{
        display:-moz-inline-box;/* for FF2 (inline-box must be used for shrink wrapping)*/
        display:inline-block;/* for modern browsers */
        margin:5px 3px;
    }
    You also did not have the IE styles right, you still had them as #nav li which was from my live demo.

    This code below will fix everything for you. Then go and clean out the old styles.
    Code:
    ul.social_links { 
        margin:0;
        padding:0;
        background:#5D5F5C;
        text-align:center;/*center the list items*/
        list-style:none;
    }    
    ul.social_links li {
        display:-moz-inline-box;/* for FF2 (inline-box must be used for shrink wrapping)*/
        display:inline-block;/* for modern browsers */
        margin:5px 3px;
    }
    ul.social_links li a img {vertical-align:bottom}
    
    * html ul.social_links li {display:inline;margin:5px}/* inline-block trigger for IE6 */
    *+html ul.social_links li {display:inline;margin:5px}/* inline-block trigger for IE7 */
    I have set the vertical-alignment for your "a img" to bottom also.

    The IE "li" styles get a 5px side margin because text nodes are not present due to IE<8 lack of support for native inline-block.
    Good browsers get the side margins on the li set slightly less to account for the text nodes.

    EDIT:
    As far as the specificity problem and the need to set UL before everything in order to override your existing defaults. That could have all been solved by simply making that UL and ID instead. IDs carry more weight than classes do. If that is the only place on the page that UL is being used then an ID would have solved the weight problem.

  11. #36
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exxxxxxxcellent. Thanks for your patience. Now all I have to do is make the images smaller, so they will fit more comfortably in the available space. Thanks for all the help!
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  12. #37
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    ul.social_links li a img {vertical-align:bottom;width:110px;}
    There. Done.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  13. #38
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paulcj2 View Post
    Unfortuantely, Wordpress puts in <br />s. Where there are carriage returns. I'll remove them, and we'll see what happens.
    Yet another reason for me not to even want to touch that steaming pile of manure. As if the security flaws and half-assed coding techniques running right to it's bone weren't enough. They say that beauty's skin deep, but he's ugly to the bone... he is so damned ugly, he's even ugly on the phone.


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
  •