WordPress.org

Support

Support » How-To and Troubleshooting » Horizontal Social Media Icon

Horizontal Social Media Icon

  • I know this topic has been covered, but everything I’ve tried so far based on the answers in previous threads is not working.

    I have added two social media icons to the top right of my header on my site, http://www.burlingtonbookfestival.com (using a child theme of twenty-eleven). I have been trying to get the two icons to line up horizontally, but no matter what I try to do, they stay lined up vertically. I know very little about .php, so I don’t know if the problem is there (although I doubt it, I’m pretty sure it’s a CSS issue I’m just missing). I’m pretty good with CSS, and this is what I have right now:

    #header_icons {
    float: right;
    width: 100px;
    margin-top: 5px;
    }

    #header_icons ul {
    height: 50px;
    width: 50px;
    }

    #header_icons ul li {
    display: inline;
    float: left;
    height: 50px;
    margin: 0px;
    padding: 0px;
    }

    #header_icons li{
    display: inline;
    }

    #header_icons img {
    margin: 0px;
    padding-left: 15px;
    width: 50px;

    I’ve tried fixing the problem in Firebug, but no matter what I try (including changing the right float to left on #header_icons), it’s still not fixing the issue. Any help would be greatly appreciated!

Viewing 9 replies - 1 through 9 (of 9 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    You’ve got some problems with the HTML code there – which is likely interfering with the CSS working:

    http://validator.w3.org/check?uri=http%3A%2F%2Fburlingtonbookfestival.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    I have cleaned up the HTML code, except for one error which I can’t seem to figure out on stray end tag on <div id=”primary”>, but not only are the social media icons still vertically aligned, but now there is a string of other problems, mostly with the background colors. I’m hoping that one error is what’s causing these issues- any thoughts on where this error is coming from and how to fix it? I’m having a hard time reading the Markup Validation- it says the error is on Line 272, Column 20, but I don’t know where that is, and it doesn’t match up to my view-source page on Chrome.

    WPyogi

    @wpyogi

    Forum Moderator

    Looks like your closing body tag is in the wrong place:

    </div>
      </body>
    
    		<div id="primary">
    			<div id="content" role="main">

    Can’t tell you why that would be…

    I just don’t know what .php file that bit of code with the error is in…I’ve looked in all of them and just can’t find it, and when the validator tells me what line the error is on, the line number doesn’t match up with the source code of my site.

    I still have this issue, and there is only one error on my site that I can’t seem to find a solution to when I run the validator.

    If anyone can help with the social media icon alignment issue, that would be greatly appreciated.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Which files do you have in your Child Theme?

    As of now, I just have footer.php, header.php, and the stylesheet.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Then the erroneous code will be in those PHP files, as the theme’s original files would not have such errors.

    I’ve looked in both of those files several times, and still can’t seem to find the error. The validator says there is a stray end tag div on <div id=”primary”>, but there is no <div id=”primary”> in either the footer.php or the header.php…

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Horizontal Social Media Icon’ is closed to new replies.
Skip to toolbar