www.webdeveloper.com
Results 1 to 6 of 6

Thread: HTML5/CSS doesn't display correctly in IE7

  1. #1
    Join Date
    May 2006
    Location
    Colorado
    Posts
    16

    HTML5/CSS doesn't display correctly in IE7

    I'm building a small website for a business. I'm not that well trained in coding. I use the web to troubleshoot often. I have found one error of display only in IE7 that is driving me nutz...lol !!! I'm utilizing HTML5 for rounded corners and shading...

    I'm using a "container" div with 3 columns and a footer of course...I float left on the first...float right on the second...and then content for the center...displays just fine in all browsers aside from IE7...the "content" drops halfway down the page? I've used the "clear" function and "display" to no success?

    Any ideas for this problem would be greatly appreciated !!!

    #container2 {
    overflow: hidden;
    background-color:#fff;
    margin-left:auto;
    margin-right:auto;
    height:auto;
    width:960px;
    clear:all;
    }

    #leftside {
    float:left;
    margin:10px 10px 10px 10px;
    width:145px;
    border-style:solid;
    border-width:1px;
    border-color:#d7d7ff;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    }

    #rightside {
    float:right;
    margin:10px 10px 10px 10px;
    width:145px;
    border-style:solid;
    border-width:1px;
    border-color:#d7d7ff;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    }

    #content {
    overflow:hidden;
    width:620px;
    margin:10px 170px 10px 170px;
    border-style:solid;
    border-width:1px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    border-color:#d7d7ff;
    }

    #footer {
    clear:both;
    background-color:#FFF;
    height:auto;
    width:960px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border-style:solid;
    border-width:1px;
    border-color:#d7d7ff;
    border-bottom-color:#006;
    }

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    Are you handling the fact that IE has issues with HTML 5?

    Code:
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    This would be a good start.

  3. #3
    Join Date
    May 2006
    Location
    Colorado
    Posts
    16
    That's in the Head correct?

  4. #4
    Join Date
    Nov 2002
    Posts
    2,632
    Yes.

  5. #5
    Join Date
    May 2006
    Location
    Colorado
    Posts
    16
    I added that but no luck...I just reduced my content div by 10px and that solved it !!! I guess IE7 had trouble calculating 1:1 on the fit !? Thanks for quick reply...

  6. #6
    Join Date
    Nov 2002
    Posts
    2,632
    You'll likely want to google "HTML 5 IE7" for issues as you come along them as well. My guess is most issues are simply related to IE7 though.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles