www.webdeveloper.com
Results 1 to 3 of 3

Thread: Compatability in IE7

  1. #1
    Join Date
    Jun 2011
    Posts
    10

    Compatability in IE7

    Greetings.

    I've recently just released a beta of my new website (actually my first website, ever). It's come to my attention that it isn't showing properly in IE7, with scrollbars appearing where they shouldn't.

    You're welcome to visit the website at: http://extinction.dk/

    Here's a screenshot of the website with the problem (as viewed in IE7): http://api.browsershots.org/png/orig...a6a9ccd45f.png

    And here's how it should look, and indeed does look in most browsers:
    http://api.browsershots.org/png/orig...e6f88d144d.png

    My question is this: How do I get it to work properly in IE7, so it shows just like in firefox or IE8?

    And the full CSS for the front page:

    Code:
    @charset "utf-8";
    /*CSS reset*/
    body, div, h1, h2, h3, h4, h5, h6, p, ul, img{margin:0px;padding:0px;}
    a img {border: none; }
    
    /* Font styles */
    body, td, pre {color:#606060; font-family:Arial, Helvetica, sans-serif;	background-color:#e2e2e2; font-size: 14px;}
    h4 {font-size: 24px; font-weight: bold;}
    small {font-size: 12px; color: #373737;}
    #content a, #sidebar a {color: #2a3f53; font-weight: bold; text-decoration: none;}
    #content small {float: left; position:absolute; right:330px; bottom:20px; font-style: italic;}
    .block_inside a {position:absolute; right:30px; bottom:20px;} /* "Læs mere" linket */
    
    /* Header */
    #main {background: url(../images/header_slice.jpg) repeat-x;}
    #logo {background: url(../images/logo.png) no-repeat; height: 120px; width: 450px;}
    #logo h1 {text-indent: -9999px;}
    #header {padding-top: 38px;}
    ul.dropdown {padding-top:30px;}
    
    /* Content */
    .container {width:1000px; margin: 0 auto;} /*Container er 'beholderen' til alt andet indhold på siden*/
    #content {padding-top:25px;	width:630px; float:left;}
      
    /* Sidebar */
    #sidebar{float:left; margin-left:10px; margin-top:25px;}
    
    .block_inside, #sidebar {margin-bottom:10px; position:relative; overflow:auto; background:none; background-color:#e2dddc; padding:15px; border:1px solid #a1a1a1; box-shadow: 3px 3px 4px #555;}
    #sidebar {width:260px;}
    
    .thumbnail {float:left; margin-right:20px; border:1px solid #979390; }
    
    /*Footer*/
    #footer {background:url(../images/footer_slice.gif) repeat-x; padding-top:20px; padding-bottom:30px; margin-top:25px; color:#e2e2e2;}
    #footer p {float:left;}
    #footer img {position:relative; left:400px; top:-10px;}

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    Changing the overflow from "auto" to "hidden" fixed it for me.

  3. #3
    Join Date
    Jun 2011
    Posts
    10
    Quote Originally Posted by Cory R View Post
    Changing the overflow from "auto" to "hidden" fixed it for me.
    Thanks! This conditional statement solved the issue:

    Code:
        <!--[if IE 7]>
        <style>.block_inside, #sidebar {overflow:hidden;}</style>
        <![endif]-->

Thread Information

Users Browsing this Thread

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

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