WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header/footer in IE 6 shifts to the Left (2 posts)

  1. jporett
    Member
    Posted 8 years ago #

    I am new to WordPress and am using a 3 column variant of the Relaxation theme. In all major browsers, the theme looks good with no issues.

    All was well until I added a nav bar in the header.

    It looks fine in Firefox and Safari, however in IE 6 the Header and footer is shifted to the left approx 5-10px.

    From all of my reading in this forum it is clear that it is fairly normal that IE issues arise. However I have not found a clear answer on my own.

    Here is a link to the css style sheet: http://www.jimporett.com/blog/wp-content/themes/relaxation_3column/style.css

    Here is the CSS code I added specifically for the nav bar:
    .container {
    padding-top: 0px;
    padding-left: 527px;
    padding-right: 30px;
    margin: 0px 0 0px 0;
    background: none;
    }

    #miniflex {
    width: 100%;
    float: left;
    font-size: small;
    margin: 0;
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #333;
    }

    #miniflex li {
    float: left;
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
    }

    #miniflex a:link, #miniflex a:visited {
    float: left;
    font-size: 85%;
    line-height: 20px;
    font-weight: bold;
    margin: 0 13px 0 10px;
    text-decoration: none;
    color: #999;
    }

    #miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
    border-bottom: 4px solid #333;
    padding-bottom: 2px;
    color: #333;
    }

    Here is the code I added to the header for the navbar:

    <div class="container">
    <ul id="miniflex">

    <li><a href="#">home</a></li>
    <li><a href="#">news</a></li>
    <li><a href="#">links</a></li>
    <li><a href="#">photos</a></li>
    <li><a href="#">about</a></li>
    </div>

    (the href links have not been added yet as this is still the construction phase)

    Any wisdom on how to get this to appear the same in IE as it already does in Firefox and Safari is welcomed!

  2. jporett
    Member
    Posted 8 years ago #

    Thanks to an email from a friend This issue is resolved!

    For those who are curious:

    #miniflex {
    width: 100%;
    float: left;
    font-size: small;
    margin: 0;
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #333;
    }

    The padding needed to be changed to... 0 0px 0 0px in this segment of CSS code.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags