WordPress.org

Ready to get started?Download WordPress

Forums

Horizontal Social Media Icon (10 posts)

  1. mgray1122
    Member
    Posted 1 year ago #

    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!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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

  3. mgray1122
    Member
    Posted 1 year ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  5. mgray1122
    Member
    Posted 1 year ago #

    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.

  6. mgray1122
    Member
    Posted 1 year ago #

    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.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which files do you have in your Child Theme?

  8. mgray1122
    Member
    Posted 1 year ago #

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

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  10. mgray1122
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic