SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS within Div Overflow problem

    Hi there,

    I am trying to create a CMS system using Mootools which creates a preview panel. My preview panel is the frontend website contained within a div frame with overflow set to auto.

    In firefox it works great: (see below)


    And the broken IE (as always)


    Here is the snippet of code that the preview pane is held in
    PHP Code:
    <table class='ViewTable' border='0' cellspacing='0' cellpadding='0'>
            <
    tr>
                    <
    th>Live Preview</th>
            </
    tr>
            <
    tr><td>
    <
    div id="previewpane">
            <
    div id="contain">
                    <
    div id="innercontainer">

                            <
    div id="innerheader">
                                 <
    div id="my_slideshow" class="slideshow">
                                  <
    img src="../images/headers/header01.jpg" alt="A picture" />
                                </
    div>
                            </
    div>
                            <
    div id="innerleftnav">
                                    <
    ul id="idList">
                                         <
    li><img src='../images/about_nav.jpg' border='0'></li>
                                         <
    li><img src='../images/photos_nav.jpg' border='0'></li>
                                         <
    li><img src='../images/stats_nav.jpg' border='0'></li>
                                         <
    li><img src='../images/resume_nav.jpg' border='0'></li>
                                         <
    li><img src='../images/tv_nav.jpg' border='0'></li>
                                         <
    li><img src='../images/blog_nav.jpg' border='0'></li>
                                         <
    li><img src='../images/contact_nav.jpg' border='0'></li>
                                    </
    ul>
                                    <
    br />
                            </
    div>

                            <
    div id="innertext">
                              <
    div id="log">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 <
    p>Greetings websurfer, and welcome to the Oli Pettigrew Homepage.<br /> Feel free to have a look around!<br /><br /> You'll find a selection of my Modelling pictures, a few  commercials and Television shows, my tech blog for Animax and information regarding contact.<br /><br />Enjoy and thanks for visiting. </p><p>Oli</p>                                                                                                                                                                                                                                                                                                  </div>

                            </div>
                            <div id="innerfooter">

                            </div>

                    </div>
                 </div>
    </div>
    </td></tr></table>
    <br /><br /><br /> 
    & here is the CSS

    PHP Code:
    #wrap{position:relative;z-index:999;}

    #previewpane{
     
    width:700px;
     
    height:300px;
     
    border:2px solid #ddd;
     
    overflowauto;
     
    background-color#fff;
    }

    #previewpane p
    {
        
    font:8pt verdana,sans-serif;
        
    text-align:justify;
        
    padding-top:10px;
        
    color:#676767;

    }

    #previewpane h1
    {
            
    font:16pt verdana,sans-serif;
            
    font-weightbold;
            
    text-align:left;
            
    padding-left0px;
                
    color:#676767;
    }
    #contain
    {
        
    width:730px;
        
    padding-left:62px;
        
    padding-top:62px;
        
    padding-bottom:1px;
        
    background-repeat:repeat-y;
        
    background-image:URL(../../images/background.gif);
        
    margin:10px auto;
    }

    #innercontainer
    {
        
    border:7px solid #FFF;
        
    width:614px;
        
    margin-bottom:62px;
        
    background:#E7E8E7;
        
    background-repeat:repeat-y;
        
    background-image:URL(../../images/innerbackground.gif);
    }

    #innerheader
    {
        
    height:173px;
    }

    #innerleftnav
    {
        
    width:220px;
        
    float:left;
    }

    #innerleftnav ul
    {
        
    text-align:right;
        list-
    style:none;
        
    font-size:1.1em;
        
    font-family:TahomaGenevasans-serif;
        
    color:#000;
        
    position:relative;
        
    margin:0;
        
    padding-top:20px;
    }

    #innerleftnav li
    {
        
    padding-right:5px;
        
    height:24px;
    }

    #innerleftnav ul li a
    {
        
    display:block;
        
    text-indent:5px;
        
    height:24px;
        
    color:#666;
        
    text-decoration:none;
    }

    #innerleftnav ul li a:hover
    {
        
    background-color:#ddd;
    }

    #innertext
    {
        
    text-align:justify;
        
    width:374px;
        
    float:left;
        
    padding:10px;
            
    background-color:#fff;
    }

    #innerfooter
    {
        
    clear:both;
        
    height:30px;
        
    background-repeat:repeat-y;
        
    background-image:URL(../../images/footer.gif);
    }

    .
    imgborderthin
    {
        
    padding:4px;
        
    border1px solid #cfcfcf;
    }


    textarea {
        
    floatleft;
        
    background#f8f8f8;
        
    border1px solid #d6d6d6;
        
    border-left-color#e4e4e4;
        
    border-top-color#e4e4e4;
        
    padding0.3em;
        
    margin-top10px;
        
    overflowauto;
    }

    #log {
        
    floatleft;

    }

    span.highlight {
        
    background-color#E0ECEF;

    Thanks

    Rodent

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump anyone?

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seemed to look fine when I took away position: releative from #innerleftnav ul

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

    The problem is likely to be the position:relative that you have set on the ul because elements with position:relative applied inside an overflow container suddenly become visible outside the container (an old ie bug).

    Try removing the position:relative from here:

    Code:
    #innerleftnav ul
    
    {
    
        text-align:right;
    
        list-style:none;
    
        font-size:1.1em;
    
        font-family:Tahoma, Geneva, sans-serif;
    
        color:#000;
    
       /* position:relative;*/
    
        margin:0;
    
        padding-top:20px;
    
    }
    There wasn't enough code for me to tell whether you had cause to be using it anyway so test and see.

    Edit:


    beaten to the punch

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great...works brilliant now...thx guys..


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
  •