Inline list not behaving

HTML & CSS
1

Why is my “Join the conversation” inline list not behaving here:

/*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;
    }


<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>
2

Firebug says:

.social_links ul li {
}

No inline… :shifty:

3

I know that, but why…when it’s clearly in the css?

4

how about

.social_links ul li {
  display: inline;
}
5

AAAAAARRRRRRGGGGGH! I can’t believe I missed that! Thanks.

6

OK. The inline display is working fine. But the last two items in the list are not behaving like it is. Any clues?

7

Hi,
You need to get that <br/> tag out of your “RSS” list item.

scroll to the right to see it

<li><a href="http://feeds.feedburner.com/ManageYourWebsiteAndGrowYourBusiness" onclick="window.open(this.href); return false;" />[COLOR=Red][B]<br />
[/B][/COLOR]<img src="/wp-content/uploads/2010/04/social_media_links_rss.jpg" title="RSS" alt="RSS"  /></a></li>
8

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?

9

Again, firebug doesn’t show your 5px padding. Please post the css code for the .social_links class.

10 
/*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;
    }
11

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.

padding: 5px[SIZE=4][B][COLOR=Red];[/COLOR][/B][/SIZE] !important;

This should get you straightened out.

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

* 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

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 :slight_smile:

Edit: They already did :smiley:

13

Great! Thanks!

However, what happened to the background color?

14

Wait. I’m fiddling with it as we speak.

15

You also have 35px left padding on the ul.

.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

16

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?

17

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

.social_links [B]ul[/B]
18

The third requires an attitude adjustment

Actually, that’s Wordpress advice for making their stuff work. Didn’t realize it messes up viewers preferences.

19

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?

20

At the moment the sub-style sheet padding is set thus:

.social_links ul {
    padding: 10px 0 ;
}

i.e. no padding to the right and left. Why doesn’t that take precedence over the parent?