• Hola my fellow WordPress gurus! I just prepared my first WP blog for a friend’s cigar company (great flavored cigars btw!). Anyway, i’m having some issues in the header CSS and I think it relates to the floats. Here’s the address:

    https://www.heavencigar.com/blog

    If you preview in Firefix, the blog appears correctly. If you preview in I.E., the header image misplaced.
    My best guess is that the search box is not properly floating and causing the header image to be pushed down.?.?.?
    Are there any CSS guru’s out there that can help??

    Thanks in advance:

    George

    Here’s the stylesheet info:

    body {
    margin: 0;
    padding: 0;
    background: #191919;
    font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #999999;
    }

    h1, h2, h3 {
    font-weight: normal;
    color: #FFFFFF;
    }

    h1 {
    font-size: 197%;
    }

    h2 {
    font-size: 167%;
    }

    h3 {
    margin-bottom: 1.5em;
    font-size: 100%;
    font-weight: bold;
    }

    p, ul, ol {
    margin: 0 0 1.5em 0;
    line-height: 1.7em;
    }

    ul, ol {
    margin-left: 0;
    padding-left: 0;
    list-style-position: inside;
    }

    ul {
    list-style: none;
    list-style-position: outside;
    }

    ul li {
    padding-left: 25px;
    background: url(images/img09.gif) no-repeat left center;
    }

    blockquote {
    font-style: italic;
    }

    a:link {
    border-bottom: 1px dotted #333333;
    text-decoration: none;
    color: #FFFFFF;
    }

    a:hover {
    border: none;
    color: #50B1F2;
    }

    a:visited {
    color: #999999;
    }

    img {
    border: none;
    }

    img.left {
    float: left;
    margin: 3px 20px 10px 0;
    }

    img.right {
    float: right;
    margin: 3px 10px 0 20px;
    }

    /* Wrapper */

    #wrapper {
    background: #3B3B3B url(images/img01.gif) repeat-x;
    }

    /* Header */

    #header {
    width: 760px;
    height: 265px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    }

    /* Search Form */

    #searchform {
    float: right;
    margin: 0;
    padding: 205px 20px 0 0;
    }

    input, textarea {
    float: left;
    width: 100px;
    height: 25px;
    background: #307CEA url(images/img03.gif) no-repeat;
    border: none;
    font: bold 100% “Trebuchet MS”, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    }

    #s, textarea {
    width: 150px;
    height: 20px;
    margin: 0 10px 0 0;
    background: #F6F6F6 url(images/img02.gif) repeat-x;
    border: 1px solid #FFFFFF;
    font-weight: normal;
    color: #000000;
    }

    #searchform br {
    display: none;
    }

    /* Logo */

    #logo {
    }

    #logo h1 {
    height: 50px;
    margin: 0;
    padding: 15px 0 15px 55px;
    background: url() no-repeat left center;
    font-size: 32px;
    font-weight: normal;
    }

    #logo h2 {
    margin: 0;
    padding: 0;
    width: 740px;
    height: 235px;
    padding: 0px 0 0 0px;
    background: url(images/header.jpg) no-repeat;
    text-transform: lowercase;
    font-size: 26px;
    font-weight: normal;
    font-style: italic;
    color: #FFFFFF;
    }

    #logo a {
    text-decoration: none;
    color: #FFFFFF;
    }

    /* Pages (Top Menu) */

    #pages {
    clear: both;
    width: 760px;
    height: 36px;
    }

    #pages ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #pages li {
    display: block;
    float: left;
    margin: 0;
    padding: 2px 0 0 0;
    background: none;
    }

    #pages a {
    float: left;
    display: block;
    height: 29px;
    padding: 7px 20px 0 20px;
    border: none;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    }

    #pages a:hover, #pages .current_page_item a {
    background: url(images/img06.gif) repeat-x;
    }

    /* Page */

    #page {
    width: 760px;
    margin: 0 auto;
    }

    /* Content */

    #content {
    float: right;
    width: 480px;
    }

    /* Post Box */

    .post {
    }

    .post .title, .pagetitle {
    margin: 0;
    padding-top: 20px;
    background: url() no-repeat right bottom;
    border-bottom: 1px solid #2F2F2F;
    color: #CCCCCC;
    }

    .pagetitle {
    margin-bottom: 20px;
    }

    .post .title a {
    border: none;
    text-decoration: none;
    color: #CCCCCC;
    }

    .post .title a:hover {
    }

    .post .byline {
    margin: 0;
    font-size: 77%;
    color: #999999;
    }

    .post .entry {
    padding: 20px 20px 0 20px;
    text-align: justify;
    }

    .post .meta {
    margin: 0 0 20px 0;
    padding: 10px 20px;
    background: #353535 url(images/img08.gif) no-repeat left bottom;
    border-top: 1px solid #2A2A2A;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 85%;
    line-height: normal;
    }

    .post .meta a {
    }

    /* Comments */

    #comments {
    }

    #comments h3 {
    }

    #comments ol {
    background: #2A2A2A;
    line-height: normal;
    }

    #comments li {
    margin: 0 0 1px 3em;
    padding: 1em;
    background: #353535;
    list-style-position: outside;
    }

    #comments li.alt {
    }

    #comments cite {
    }

    #comments .commentmetadata {
    }

    #comments p {
    margin: 0;
    line-height: normal;
    }

    /* Respond */

    #respond {
    }

    #respond h3 {
    }

    #respond p {
    margin: 0;
    }

    #respond form {
    }

    #respond #comment {
    width: 470px;
    height: 100px;
    margin-bottom: 10px;
    }

    #respond #submit {
    width: 140px;
    background: url(images/img10.gif) no-repeat;
    }

    /* Sidebar */

    #sidebar {

    float: left;
    width: 240px;
    padding: 20px 0 0 0;
    }

    #sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    }

    #sidebar li {
    margin-bottom: 10px;
    padding: 0;
    background: none;
    }

    #sidebar li ul {
    padding: 20px;
    background: url(images/img12.gif) no-repeat;
    }

    #sidebar li li {
    padding-left: 25px;
    background: url(images/img09.gif) no-repeat left center;
    }

    #sidebar a {
    }

    #sidebar a:hover {
    }

    #sidebar h2 {
    width: 220px;
    height: 29px;
    margin: 0;
    padding:6px 0 0 20px;
    background: url(images/img11.gif) no-repeat;
    font-size: 122%;
    font-weight: bold;
    }

    /* Calendar */

    #calendar_wrap {
    padding: 20px;
    background: url(images/img12.gif) no-repeat;
    }

    #wp-calendar {
    width: 100%;
    border-collapse: collapse;
    }

    #wp-calendar caption {
    padding: 2px 0;
    font-weight: bold;
    color: #FFFFFF;
    }

    #wp-calendar tr {
    }

    #wp-calendar th {
    background: #353535;
    border-bottom: 1px solid #2A2A2A;
    }

    #wp-calendar td {
    padding: 0 2px;
    }

    #wp-calendar tbody td {
    text-align: center;
    }

    #wp-calendar tbody td a {
    }

    #wp-calendar tfoot td {
    padding: 2px 0;
    border-top: 1px solid #2A2A2A;
    font-weight: bold;
    }

    #today a {
    font-weight: bold;
    }

    #prev {
    text-align: left;
    }

    #next {
    text-align: right;
    }

    /* Footer */

    #footer {
    clear: both;
    height: 100px;
    padding: 20px 0;
    background: #191919 url(images/img13.gif) repeat-x;
    }

    #footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    font-size: 85%;
    }

    #footer a {
    color: #395C5B;
    }

    #credits {
    }

    #feeds {
    }

  • The topic ‘CSS float problems in I.E…….HELP PLEASE!!! :)’ is closed to new replies.