SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div's overlapping in IE7

    I am having problems with overlapping div's in IE7. #mainContainer doesn't seem to consider 100% height. It only expands to monitor rezolution. Everything is fine in IE6, Opera, Firefox. Please have a look at it here: http://www.studioweber.ro/html/test.htm . Thanks in advance for your help. Alex

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE7 doesn't understand display:table but it does understand height correctly now so you can't set a height on something and then expect the browser to expand it when that height is reached (as ie6 does). IE7 will obey the height and stop right there.

    This makes the display:table method useless and un-workable if you want to cater for IE7. For ie7 you will need to just have the one container with min-height:100% and use that for all your 100% high images. You cannot nest further 100% high elements inside either as css just doesn't work that way (more's the pity).

    Remove your #container div as it is a waste of space anyway (You don't need named anchors anymore either as you simply use the div id as the target). Next remove all the display:table property/values.

    Then apply the min-height:100% to maincontainer while removing the height and then add a hack for ie6 * html #mainContainer {height:100%} (you will need to hide that from ie5 mac - if you care).

    Here is the result.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Oferta de preturi pentru web design si promovare pe internet</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="Oferta de preturi pentru web design si promovare pe internet" />
    <meta name="keywords" content="preturi pagini web, site-uri, Web design Brasov, Romania, pagini web, solutii web, corporate id, aplicatii multimedia, e-commerce, pagina web, site, prezentare firma, prezentare pe internet, imagine companie, firma, brasov, promovare, webdesign, web, design, pagini internet, promovare pe internet, outsourcing romania" />
    <meta name="rating" content="General" />
    <meta name="robots" content="index, all" />
    <meta name="robots" content="index, follow" />
    <meta name="revisit-after" content="3" />
    <meta name="author" content="Alex Flueras - http://www.studioweber.ro" />
    <link rel="shortcut icon" href="../assets/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="../script/test.css" />
    <link rel="stylesheet" type="text/css" href="../script/oferta_test.css" />
    <!--[if IE]> 
    <style type="text/css">
    html { 
    scrollbar-arrow-color:#FE0000; 
    scrollbar-track-color:#F4F4F4; 
    scrollbar-face-color:#F4F4F4; 
    scrollbar-highlight-color:#F4F4F4; 
    scrollbar-3dlight-color:#F4F4F4; 
    scrollbar-darkshadow-color:#C4C4C4; 
    scrollbar-shadow-color:#F4F4F4; 
    } 
    
    </style>
    <![endif]-->
    <style type="text/css">
    /* mac hide \*/
    html, body {height:100%}
    /* end hide*/
    
    /*html {
        height: 100%;
    }*/
    html, body {
        background-color: #999999;
        margin-top: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #666666;
        text-decoration: none;
        height: 100%;
        margin-bottom: 0px;
        list-style-position: outside;
        list-style-image: url(http://www.studioweber.ro/assets/bullet.gif);
        text-align: center;
    }
    body{text-align:center}
    a {
        color: #959595;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #959595;
    }
    a:hover {
        text-decoration: none;
        color: #D90000;
    }
    a:active {
        text-decoration: none;
        color: #959595;
    }
    h3 {
        font-size: 11px;
        color: #666666;
    }
    .bg_main {
        top: 0px;
        margin-top: 0px;
        background-image: url(http://www.studioweber.ro/assets/bg_01.jpg);
        background-repeat: repeat-y;
        background-position: center;
        padding-top: 0px;
    }
    .frame {
        border: 4px solid #E0E1DC;
        margin-right: 4px;
        margin-left: 4px;
    }
    #mainContainer {
        position : relative;
        width: 580px;
        min-height: 100%;
        background-image: url(http://www.studioweber.ro/assets/bg01.jpg);
        background-repeat: repeat-y;
        padding-left: 40px;
        padding-right: 110px;
        margin:auto;
        text-align:left;
    }
    * html #mainContainer{height:100%;}
    #topLogo {
        clear: both;
        height: 69px;
        width: 580px;
        text-align: left;
        vertical-align: top;
    }
    #menuLeft {
        font-weight: bold;
        text-align: left;
        vertical-align: top;
        float: left;
        height: 60px;
        width: 160px;
        padding-top: 34px;
        font-size: 13px;
        font-family: Tahoma;
    }
    #menuRight {
        font-size: 13px;
        font-weight: bold;
        text-align: right;
        vertical-align: top;
        float: right;
        width: 400px;
        height: 60px;
        padding-top: 34px;
        font-family: Tahoma;
    }
    #bottom {
        clear: both;
        height: 40px;
        width: 100%;
        padding-top: 15px;
        text-align: left;
        vertical-align: top;
        font-size: 10px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #999999;
    }
    #banner {
        clear: both;
        height: 211px;
        width: 580px;
    }
    #contentMain {
        text-align: left;
        vertical-align: top;
        width: 530px;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 35px;
        padding-left: 10px;
        background-color: #FFFFFF;
        border: 15px solid #E0E1DC;
        margin-top: -1px;
    }
    #mainBottom {
        background-color: #CC0000;
        height: 60px;
        width: 580px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: normal;
        color: #FFFFFF;
        text-align: left;
        vertical-align: top;
    }
    #mainBottomRight {
        float: right;
        width: 270px;
        text-align: right;
        vertical-align: top;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 15px;
    }
    #mainBottomLeft {
        width: 200px;
        float: left;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 15px;
        font-weight: bold;
        font-size: 11px;
    }
    #mainBottomLeft A:hover {
        color: #FFFFFF;
        text-decoration: underline;
    }
    #mainBottomLeft A:active {
        color: #FFFFFF;
    }
    #mainBottomLeft A:link {
        color: #FFFFFF;
    }
    #mainBottomLeft A {
        color: #FFFFFF;
    }
    h1 {
        font-family:Arial, Helvetica, sans-serif;
        background-color:#F4F4F4;
        font-size:11px;
        font-weight: bold;
        height: 17px;
        width: 97%;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #CCCCCC;
        padding-top: 3px;
        padding-left: 8px;
        color: #666666;
        clear: both;
    }
    #pdf {
        font-size: 11px;
        font-weight: bold;
        background-color: #F4F4F4;
        width: 195px;
        text-align: left;
        height: 15px;
        padding-left: 15px;
    }
    .pret {
        float: left;
        height: 15px;
        width: 110px;
        font-size: 11px;
        font-weight: bold;
        color: #FF0000;
    }
    .pret2 {
        float: left;
        height: 15px;
        width: 100px;
        font-size: 11px;
        font-weight: bold;
        color: #FF0000;
    }
    .top {
        float: right;
        width: 100px;
        text-align: right;
        padding-right: 10px;
    }
    
    
    </style>
    </head>
    <body>
        <div id="mainContainer" class="bg_main">
            <div id="topLogo"><a href="javascript:;"><img src="http://www.studioweber.ro/assets/logo_02.gif" alt="Pagini web Romania | Corporate ID | Portofoliu" width="324" height="69" border="0" /></a></div>
            <div id="menuLeft"><a href="javascript:;">romana</a> | <a href="javascript:;">fran&ccedil;ais</a> </div>
            <div id="menuRight"><a href="javascript:;">home</a> | <a href="javascript:;">services</a> | <a href="javascript:;">portfolio</a> | <a href="javascript:;">prices</a> | <a href="javascript:;">contact</a></div>
            <div id="banner"><img src="http://www.studioweber.ro/assets/preturi-web-design-romaniae.jpg" alt="Oferta de pret" width="580" height="210" /></div>
            <div id="contentMain">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam non nulla imperdiet felis sagittis pellentesque. Pellentesque luctus leo ullamcorper sem. Aliquam erat volutpat. Donec tincidunt. Mauris quis nunc. Pellentesque condimentum viverra libero. Nullam mi. Morbi purus. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing
                    elit. Aenean in enim. Quisque nisl. Proin tincidunt, nunc ac iaculis ultricies, nisl enim sodales augue, tempor mollis mi libero id eros. Proin tempor nibh ut pede. Donec ipsum. Praesent lectus magna, mattis et, posuere id, iaculis at, risus. </p>
            </div>
            <div id="mainBottom">
                <div id="mainBottomLeft"><a href="javascript:;">oferta pdf</a> | <a href="javascript:;">email</a> </div>
            </div>
            <div id="bottom">&copy;2001
                <script language="JavaScript" type="text/javascript">
    var d=new Date();
    yr=d.getFullYear();
    if (yr > 2001) document.write(" - "+yr);
              </script>
                studioweber srl</div>
        </div>
        <!-- mainContainer -->
    </body>
    </html>
    Hope it help


Bookmarks

Posting Permissions

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