SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline list not behaving

    Why is my "Join the conversation" inline list not behaving here:
    http://www.clickbasics.com/

    Code:
    /*home page social media links box*/
    .social_links {
        background: #5d5f5c; 
        color: white;
        text-align: center;
        padding: 5px;
        margin-right: auto;
        margin-left: auto;
    }
    .social_links ul li {
        list-style: inline !important;
        }
    HTML Code:
    <div class="social_links" ><!--social media links box-->
    <ul>
    <li><a href="http://www.twitter.com/clickbasics" /> <img src="/wp-content/uploads/2010/04/social_media_links_twitter.jpg" title="Twitter" alt="Twitter" /></a></li>
    
    <li><a href="http://www.linkedin.com/in/clickbasics" /> <img src="/wp-content/uploads/2010/04/social_media_links_linkedin.jpg" title="LinkedIn" alt="LinkedIn" /></a></li>
    
    <li><a href="http://www.facebook.clickbasics.com"  /> <img src="/wp-content/uploads/2010/04/social_media_links_facebook.jpg" title="Facebook" alt="Facebook" /></a>
    
    <li><a href="http://www.youtube.com/clickbasics" /> <img src="/wp-content/uploads/2010/04/social_media_links_youtube.jpg" title="YouTube" alt="YouTube" /></a></li>
    
    <li><a href="http://maps.google.com/maps/place?hl=en&georestrict=input_srcid%3Ae1ee641591f0417e" /> <img src="/wp-content/uploads/2010/04/social_media_links_google.jpg" title="Google Maps" alt="Google Maps" /></a></li>
    </ul>
        </div>
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Firebug says:

    .social_links ul li {
    }

    No inline...

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know that, but why...when it's clearly in the css?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    how about

    Code CSS:
    .social_links ul li {
      display: inline;
    }

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AAAAAARRRRRRGGGGGH! I can't believe I missed that! Thanks.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. The inline display is working fine. But the last two items in the list are not behaving like it is. Any clues?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  7. #7
    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)
    Hi,
    You need to get that <br/> tag out of your "RSS" list item.

    scroll to the right to see it
    Code:
    <li><a href="http://feeds.feedburner.com/ManageYourWebsiteAndGrowYourBusiness" onclick="window.open(this.href); return false;" /><br />
    <img src="/wp-content/uploads/2010/04/social_media_links_rss.jpg" title="RSS" alt="RSS"  /></a></li>

  8. #8
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah1! Looks like Wordpress put that in there as I had a carriage return in my html editor. I remove that, and now the list seems to be behaving better.

    The one remaining issue is what's preventing the lines from being longer. I applied 5px padding to the class .social_links and added !important. But something else seems to be involved to cause so much space to the left and right within the box. I see .entry-content ul applying 0 0 0 35px padding and 13px 0 margin. How can I override these settings in .social_links?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  9. #9
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Again, firebug doesn't show your 5px padding. Please post the css code for the .social_links class.

  10. #10
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    /*home page social media links box*/
    .social_links {
        background: #5d5f5c; 
        color: white;
        /*border-style:solid;
        border-color:red;*/
        text-align: center;
        padding: 5px; !important;
        margin-right: auto;
        margin-left: auto;
    }
    .social_links ul li {
        display: inline !important;
        }
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  11. #11
    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)
    Hi,
    The problem here is that you are targetting the div and not the ul styles. You don't even need those important declarations.

    If you want vertical margins then you can use display:inline-block.

    You also closed your padding:5px before you added the important rule.
    Code:
    padding: 5px; !important;
    This should get you straightened out.

    Code:
    /*home page social media links box*/
    .social_links ul {
        background: #5d5f5c; 
        color: white;
        /*border-style:solid;
        border-color:red;*/
        text-align: center;
        padding: 10px 0 ;
        margin:0;
    }
    .social_links ul li {
        display: -moz-inline-box;/* for FF2 (inline-box must be used for shrink wrapping)*/
           display:inline-block;/* for modern browsers (set vertical margins and dimensions when needed)*/
        margin:5px;
        }
    
    * html .social_links ul li  {display:inline;}/* inline-block trigger for IE6 */
    *+html .social_links ul li  {display:inline;}/* inline-block trigger for IE7 */

  12. #12
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    When I click on the social_links tab, I see your 35px padding.
    When I click on the ul, it disappears, and all that is inherited from the social_links class are color and text-align, the padding is taken from .entry-content ul.

    The reason obviously lies in the way inheritance works in css, but I'm no expert, so let's see what the guru's have to say about it

    Edit: They already did

  13. #13
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Thanks!

    However, what happened to the background color?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  14. #14
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait. I'm fiddling with it as we speak.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  15. #15
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You also have 35px left padding on the ul.
    Code:
    .entry-content ol, .entry-content ul {
      padding:0 0 0 35px;
      }   /*style.css (line 1197)*/
    You can also reduce the white space between items by giving some small amount of negative word-spacing to the ul.

    I think I saw that Ray removed the side padding from the ul's parent; if not, do so.

    Regarding the "!important" thingie: If you need it, you've messed up your cascade or specificity, or you've decided to override your visitors' user stylesheets. The first two errors involve a bit of trouble-shooting; no biggie. The third requires an attitude adjustment.

    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

  16. #16
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have stopped fiddling. Put your code back in tact, and the background color seems fine.

    I think I understand how it works now, except it seems to me the vertical padding should is more than 5px. I'd love to get all the images on two lines. Is the only way to do that by making the images smaller?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  17. #17
    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)
    Quote Originally Posted by gary.turner View Post

    I think I saw that Ray removed the side padding from the ul's parent; if not, do so.
    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

  18. #18
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The third requires an attitude adjustment
    Actually, that's Wordpress advice for making their stuff work. Didn't realize it messes up viewers preferences.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  19. #19
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using a sub-style sheet under the K2 (Wordpress theme) primary style sheet. The idea is to not mess with the primary style sheet, so you can keep that as the default.

    I would think I could override the parent side padding within the sub-style sheet, yes?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  20. #20
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  21. #21
    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)
    I would think I could override the parent side padding within the sub-style sheet, yes?
    If you don't want to tamper with the parent div (as I understand it you are calling .social_links the parent) then just leave your styles there but also set up a new selector for the ul.

    Then remove your default margins/paddings on that ul.

    The text-align:center will inherit from the parent to the ul so there is no need to declare it again on the ul.

    A temporary testing BG color on the ul shows clearly what is going on now.
    Code:
    /*home page social media links box*/
    
    .social_links {
        background: #5d5f5c; 
        color: #FFF;
        text-align: center;
        padding: 5px; /*or whatever you need on the parent div*/
        /*margin:auto; only works when a width has been set*/
    }
    .social_links ul {
        margin:0;
        padding:0;
        list-style:none;
        background:red; /*test BG color*/
    }
    .social_links ul li {
        display: -moz-inline-box;/* for FF2 (inline-box must be used for shrink wrapping)*/
        display:inline-block;/* for modern browsers (set vertical margins and dimensions when needed)*/
        margin:5px; /*or whatever you need*/
        }
    .social_links ul li a img {vertical-align:bottom}
    
    * html .social_links ul li  {display:inline;}/* inline-block trigger for IE6 */
    *+html .social_links ul li  {display:inline;}/* inline-block trigger for IE7 */
    EDIT: Added v-a:bottom to the images

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    1) lose that stupid wrapping div, it does nothing you can't apply to the UL directly.

    2) don't even waste your time screwing with the LI for formatting. Set them to display:inline and forget they exist.

    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).

    4) Do we see a problem here?

    <a href="http://www.twitter.com/clickbasics" onclick="window.open(this.href); return false;" />

    You're closing all your anchors before their content.

    5) Of course this malarkey:
    onclick="window.open(this.href); return false;"

    Don't shove behaviors down the users throat. Target was deprecated for a reason - using javascript to replicate it is NOT good usability.

    6) Title should probably be on the anchor, NOT the image.

    7) Some formatting may have let you avoid half the markup issues in the first place...

    So, to neuter down the markup:

    Code:
    <ul class="social_links">
    	<li>
    		<a href="http://www.twitter.com/clickbasics"
    			title="Twitter"
    		>
    			<img src="/wp-content/uploads/2010/04/social_media_links_twitter.jpg"
    				alt="Twitter"
    			/>
    		</a>
    	</li><li>
    		<a href="http://www.linkedin.com/in/clickbasics"
    			title="LinkedIn"
    		>
    			<img src="/wp-content/uploads/2010/04/social_media_links_linkedin.jpg"
    				alt="LinkedIn"
    			/>
    		</a>
    	</li><li>
    		<a href="http://www.facebook.clickbasics.com"
    			title="Facebook"
    		>
    			<img src="/wp-content/uploads/2010/04/social_media_links_facebook.jpg"
    				alt="Facebook"
    			/>
    		</a>
    	</li><li>
    		<a href="http://www.youtube.com/clickbasics"
    			title="YouTube"
    		>
    			<img src="/wp-content/uploads/2010/04/social_media_links_youtube.jpg"
    				alt="YouTube"
    			/>
    		</a>
    	</li><li>
    		<a href="http://maps.google.com/maps/place?hl=en&georestrict=input_srcid&#37;3Ae1ee641591f0417e"
    			title="Google Maps"
    		>
    			<img src="/wp-content/uploads/2010/04/social_media_links_google.jpg"
    				alt="Google Maps"
    			/>
    		</a>
    	</li><li>
    		<a href="http://feeds.feedburner.com/ManageYourWebsiteAndGrowYourBusiness"
    			title="RSS"
    		>
    			<img src="/wp-content/uploads/2010/04/social_media_links_rss.jpg"
    				alt="RSS"
    			/>
    		</a>
    	</li><li>
    		<a href="http://clickbasics.us1.list-manage.com/subscribe?u=d2ead708893f3254e69f7d4e4&id=5909fd8562"
    			title="email"
    		>
    			<img src="/wp-content/uploads/2010/04/social_media_links_mail_chimp1.jpg"
    				alt="email"
    			/>
    		</a>
    	</li>
    </ul>
    with this for CSS:

    Code:
    .social_links {
    	list-style:none;
    	text-align: center;
    	padding: 5px;
    	color:#FFF;
    	background:#5D5F5C; 
    }
    
    .social_links li {
    	display:inline;
    	height:1%; /* trip haslayout, make IE behave */
    }
    
    .socialLinks a {
    	display:-moz-inline-block;
    	display:-moz-inline-box;
    	display:inline-block;
    	padding:5px;
    }
    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.

    no "* html" or "+html" needed.

  23. #23
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    deathshadow60

    Hmmmmmmmm.
    http://www.clickbasics.com/
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  24. #24
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortuantely, Wordpress puts in <br />s. Where there are carriage returns. I'll remove them, and we'll see what happens.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  25. #25
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! much better now. http://www.clickbasics.com/ Looks like I just need to add some space at the top and bottom and make the images smaller to fit 4 to a line, and perhaps center them.
    Paul C.
    ClickBasics
    http://www.clickbasics.com


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
  •