Home Feature Section CSS

Homepage Community Forums Optimal Theme Support Home Feature Section CSS

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1243
    mjohnson
    Customer

      I have a problem with the Optimal theme “Home Feature Section” CSS. The area is fine using Firefox, Safari, Chrome, IE9, but in IE7&8 the section does not align properly. The site is http://cardio2.icmhostingdsm.com

      Please advise on appropriate CSS changes needed to correct this issue.

      Thanks,

      Mike

      #1244
      Wes
      Moderator

        Unfortunately I only have Mac computers and do  not have windows, or older versions of IE.  I can access sites using an IE Emulator, but I don’t see the issue.

        Could you post  a screenshot of what it looks like?

        #1246
        mjohnson
        Customer

          Your system wouldn’t allow me to post a screenshot. The link below will take you to the image.

          http://cardio2.icmhostingdsm.com/css-error/

          Thanks,

          Mike

          #1247
          Wes
          Moderator

            This is just a guess (since I don’t have IE) but try changing the “float: left” to “float: right” for – “.home-feature-section” currently on line 727 in your style.css file.

             

            #1248
            mjohnson
            Customer

              It appears to improve the horizontal alignment, but not vertical. See result at: http://cardio2.icmhostingdsm.com/css-error-2/

               

              #1249
              mjohnson
              Customer

                I believe I have it working now. Just need some minor adjustments. I assigned a width of 1090px to .home-feature-wrap

                 

                #1250
                Wes
                Moderator

                  Ok, sounds good.

                  Its possible it could have just been a width issue…maybe IE was displaying the widgets too wide for that section.  The width of the theme is actually 960px.

                  If you have any other issues, just let me know.

                  #1251
                  mjohnson
                  Customer

                    Wes,

                    It’s not perfect, but if I modify CSS to make it perfect in IE7&8, the current browsers will not provide accurate view. You may not run across this in the future, but I wanted to provide the final CSS in case someone else runs into the issue. If you’re interested, you can see the corrected page at: ttp://cardio2.icmhostingdsm.com/error-corrected

                    Still have to work out the footer, but that shouldn’t be a problem.

                     

                    /* Home Feature Section
                    ———————————————————— */

                    .home-feature-wrap {

                    background: url(images/border-img-x_blu.png) repeat-x scroll center top transparent;
                    clear:both;
                    overflow: hidden;
                    padding: 30px 0;
                    width: 1090px;
                    }

                    .home-feature-sidebar {
                    //font-size: 14px;
                    //float: left;
                    //    line-height: 22px;
                    //margin: 0;
                    //padding-right: 30px;
                    //width: 220px;

                    float: left;
                    margin: 0 30px 0 0;
                    width: 320px;
                    }

                    .home-feature-sidebar h4 {
                    color: #333;
                    font-family: ‘Oswald’,arial,sans-serif;
                    font-size: 28px;
                    font-weight: normal;
                    line-height: 34px;
                    text-transform: none;
                    }

                    .home-feature-sidebar p {
                    margin: 0 0 15px;
                    }

                    .home-feature-section {
                    //background: url(images/border-img.png) repeat-y scroll left center transparent;
                    float: left;
                    font-size: 14px;
                    line-height: 22px;
                    //padding-left: 40px;
                    width: 670px;
                    }

                    .home-feature-section p {
                    margin: 0 0 15px;
                    }

                    .home-feature-1 {
                    float: left;
                    margin: 0 30px 0 0;
                    width: 320px;
                    }

                    .home-feature-2 {
                    float: right;
                    margin: 0;
                    width: 320px;
                    }

                    .home-feature-1 h4,
                    .home-feature-2 h4 {
                    color: #333333;
                    font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif;
                    font-size: 16px;
                    font-weight: bold;
                    margin: 0 0 10px;
                    padding: 0;
                    }

                    .home-feature-1 .widget,
                    .home-feature-2 .widget {
                    margin: 0 0 30px;
                    }

                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • The topic ‘Home Feature Section CSS’ is closed to new replies.