WEB Hmmm. A CSS bug I can't fix:

Discussion in 'OT Technology' started by symptic, Oct 3, 2008.

  1. symptic

    symptic I run companies

    Joined:
    Oct 12, 2003
    Messages:
    13,712
    Likes Received:
    0
    On my Wordpress theme, I installed a social bookmarking plugin that displays icons after a post, but the first icon isn't in-line with the rest.

    Check it out:
    http://stevenkovar.com/special-thanks/special-thanks-pop-culture-tees-and-hide-your-arms/

    Any ideas?

    Here's the CSS for the plugin:
    Code:
    div.sociable { margin: 16px 0; }
    
    span.sociable_tagline { position: relative; }
    span.sociable_tagline span { display: none; width: 14em; }
    span.sociable_tagline:hover span {
    	position: absolute;
    	display: block;
    	top: -5em;
    	background: #ffe;
    	border: 1px solid #ccc;
    	color: black;
    	line-height: 1.25em;
    }
    .sociable span {
    	display: block;
    }
    .sociable ul {
    	display: inline;
    	margin: 0 !important;
    	padding: 0 !important;
    }
    .sociable ul li {
    	background: none;
    	display: inline;
    	list-style-type: none;
    	margin: 0 auto;
    	padding: 1px;
    }
    .sociable ul li:before { content: ""; }
    .sociable img {
    	float: none;
    	width: 16px;
    	height: 16px;
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    
    .sociable-hovers {
    	opacity: .4;
    	-moz-opacity: .4;
    	filter: alpha(opacity=40);
    }
    .sociable-hovers:hover {
    	opacity: 1;
    	-moz-opacity: 1;
    	filter: alpha(opacity=100);
    }
    
    And the HTML:

    Code:
    <div class="sociable">
    <div class="sociable_tagline">
    Share and Enjoy:
    </div>
    <ul>
    	<li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fstevenkovar.com%2Fprojects%2Fnew-project-epic-tees%2F&amp;title=New%20Project%3A%20Epic%20Tees" onclick="javascript:pageTracker._trackPageview('/outbound/article/digg.com');" title="Digg"><img src="http://stevenkovar.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a></li>
    
    	<li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fstevenkovar.com%2Fprojects%2Fnew-project-epic-tees%2F&amp;title=New%20Project%3A%20Epic%20Tees" onclick="javascript:pageTracker._trackPageview('/outbound/article/del.icio.us');" title="del.icio.us"><img src="http://stevenkovar.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
    	<li><a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fstevenkovar.com%2Fprojects%2Fnew-project-epic-tees%2F&amp;t=New%20Project%3A%20Epic%20Tees" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.facebook.com');" title="Facebook"><img src="http://stevenkovar.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a></li>
    	<li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fstevenkovar.com%2Fprojects%2Fnew-project-epic-tees%2F" onclick="javascript:pageTracker._trackPageview('/outbound/article/technorati.com');" title="Technorati"><img src="http://stevenkovar.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a></li>
    	<li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fstevenkovar.com%2Fprojects%2Fnew-project-epic-tees%2F&amp;title=New%20Project%3A%20Epic%20Tees" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.stumbleupon.com');" title="StumbleUpon"><img src="http://stevenkovar.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a></li>
    </ul>
    </div>
    
     
  2. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    i guess if you want a temporary fix, you could put a div tag around the digg one, then in the css, do a margin-top: 10px or something like that to bring it back down to level with the rest
     
  3. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,590
    Likes Received:
    1
    Location:
    Detroit
    looks ok in chrome and ie7, so it is something with firefox
     
  4. symptic

    symptic I run companies

    Joined:
    Oct 12, 2003
    Messages:
    13,712
    Likes Received:
    0
    From what I can tell, the area where I edit that is dynamically created. :dunno:
     
  5. symptic

    symptic I run companies

    Joined:
    Oct 12, 2003
    Messages:
    13,712
    Likes Received:
    0
    Haha. Irony. That's good to know though.
     
  6. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,590
    Likes Received:
    1
    Location:
    Detroit
    i usually always test in ie and ff

    and it is usually vice versa for me, it looks ok in ff and a fucked in ie :rofl:
     
  7. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,922
    Likes Received:
    11
    Location:
    Los Angeles
    :rofl: I had the exact same problem with the sociable plug-in in WordPress when I was developing a theme for someone. I forgot how I fixed it though. I think I relatively positioned the bitch and forced that bitch in place.
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,922
    Likes Received:
    11
    Location:
    Los Angeles
    If FireFox is the only one giving you issues, then use the following selector to directly select the first item in your list elements.

    Code:
    .sociable ul li:first-child
    
    Won't work in IE.
     
  9. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    hah it works fine in Chrome and IE7.. but not FF3..
     
  10. Pepsi1975

    Pepsi1975 Mod of the Year

    Joined:
    Jan 6, 2005
    Messages:
    47,590
    Likes Received:
    1
    Location:
    Detroit
  11. symptic

    symptic I run companies

    Joined:
    Oct 12, 2003
    Messages:
    13,712
    Likes Received:
    0
    Hmm, it's not working out so well for me.

    Do it like this?
    Code:
    .sociable ul li:first-child {
        position: relative;
        margin: 10 0 0 0;
    }
    
     
  12. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    Your "#content img" styles are overriding the sociable imgs and making them float when sociable wants them inline (and also inheriting the other styles such as border, margin, padding).

    Try moving the sociable block out of the #content div, or add a more specific style e.g.:

    #content .sociable img {
    float: none;
    padding etc
    margin etc
    }
     
  13. symptic

    symptic I run companies

    Joined:
    Oct 12, 2003
    Messages:
    13,712
    Likes Received:
    0
    :bowdown: Crisis averted.
     

Share This Page