Inline list not behaving

HTML & CSS
21

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.

/*home page social media links box*/

[B].social_links[/B] {
    background: #5d5f5c; 
    color: #FFF;
    text-align: center;
    [COLOR=Blue]padding: 5px;[/COLOR] /*or whatever you need on the parent div*/
    [COLOR=Red]/*margin:auto; only works when a width has been set*/[/COLOR]
}
.social_links [B]ul[/B] {
    [COLOR=Blue]margin:0;
    padding:0;
    list-style:none;[/COLOR]
   [COLOR=Blue] background:red;[/COLOR] /*test BG color*/
}
.social_links [B]ul li [/B]{
    [COLOR=Blue]display: -moz-inline-box;[/COLOR]/* for FF2 (inline-box must be used for shrink wrapping)*/
    [COLOR=Blue]display:inline-block;[/COLOR]/* for modern browsers [COLOR=DarkGreen](set vertical margins and dimensions when needed)[/COLOR]*/
    [COLOR=Blue]margin:5px;[/COLOR] /*or whatever you need*/
    }
.social_links ul li [B]a img[/B] {[COLOR=Blue]vertical-align:bottom[/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 */

EDIT: Added v-a:bottom to the images

22

  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.

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

  1. Title should probably be on the anchor, NOT the image.

  2. Some formatting may have let you avoid half the markup issues in the first place…

So, to neuter down the markup:


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


.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

deathshadow60

Hmmmmmmmm.
http://www.clickbasics.com/

24

Unfortuantely, Wordpress puts in <br />s. Where there are carriage returns. I’ll remove them, and we’ll see what happens.

25

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.

26

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.

A member here, on another forum uses a scatological term (rhymes with ‘word’) for that application due to the generally screwy css.

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.

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

27

The real problem now seems to be with the parent style sheet - style.css (line 1197)

.entry-content ol, .entry-content ul {
padding:0 0 0 35px;
}

I want to override the padding in the sub-style sheet - testscheme.css


.social_links ul {
    padding: 10px;
}

Why won’t this work?

28
  1. 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.

  1. 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
29

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

.entry-content ol, .entry-content ul {
padding:0 0 0 35px;
}
30

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

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

31

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.

[B]ul.[/B]social_links {
    list-style:none;
    text-align: center;
    color:#FFF;
    background:#5D5F5C; 
[COLOR=Blue]    margin:0;
    padding:0;[/COLOR]
}

[B]ul.[/B]social_links li {
    display:inline;
    height:1&#37;; /* trip haslayout, make IE behave */
}

[B]ul.[/B]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.

32

Hmm. I implemented the first part of your message:

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.

33

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.

[COLOR=Blue][B]ul[/B][/COLOR].social_links {
    list-style:none;
    text-align: center;
    color:#FFF;
    background:#5D5F5C; 
    [COLOR=Blue]margin:0;
    padding:0;[/COLOR]
}

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.

34

Couldn’t wait until morning.

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?

35

Because the code at your site is not the same as what you just posted.

Your site has this -

[COLOR=Red]li.social_links[/COLOR]{
    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.


ul.social_links { 
    [COLOR=Blue]margin:0;
    padding:0;[/COLOR]
    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.

36

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!

37 
ul.social_links li a img {vertical-align:bottom;width:110px;}

There. Done.

38

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.