SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 and min-width

    I've just made a web page and it's all come out really well except for IE7's handling of min-width. I'm all a bit new to CSS and web design, I've googled and others have had the same problem but so far I haven't found a solution.

    The page is a header, fixed left column and footer at bottom of page or viewport whichever is the lowest. The main content div has nothing applied to it in the CSS except fonts, background colour and ... min-width.

    Then there's a container with a % applied and overflow: hidden. Inside that container I have 4 floats and they've got an awesome flexible relationship goin' on ... except when it comes to IE7 which just hates that min-width - and the floats and whole container seem to jump half way down the page.

    Very sad.

    If I remove the min-width, the page is great in IE7 but it falls apart for all other browsers (mac and PC) except IE6 who doesn't care if it's there or not, just as long as overflow:hidden is applied. I mean gosh - the page even works in Mac IE!


    Can anyone help me fix this? Some clues .. a nifty little hack to hide min-width from IE7? Should I use a conditional and be done with it?

    Sorry I can't link to a page but it's not online and I don't have any space. The site is a freebie for a local school and I don't have access to their hosting yet. I've also got to get this in as soon as I can (like yesterday) - which is why I'm now asking for some help. Gettin' kinda desperate here.


    Thanks for any and all suggestions.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    a nifty little hack to hide min-width from IE7? Should I use a conditional and be done with it?
    You shouldn't use a hack for IE7 because its a living browser and likely to change. Any hack you use now could more likely be fixed in an update if it is based on a bug.

    Use conditional comments to be safe.

    You would have to set up a small demo of the problem so that we could see if anything else is at fault here because I can't replicate what you are saying exactly.

    As far as min-width goes I can't think why that would be causing you a problem. min-width does force "haslayout" on an element but as you are floating it anyway it will already have layout.

    I'd like to see an example

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul.

    Thanks for your help. I've uploaded the zipped file to here:
    http://download.yousendit.com/F1CFEFE41B4E0557

    It's barebones and stripped of all/most features including images. It's the content div holding the container which collapses down to the level of the bottom margin of the left navigation bar. Without the images enclosed, in IE6 the right-centre float goes and hides under the left centre float when the window is narrowed but it doesn't do that when there's an image there.


    Thanks again for your time!
    Last edited by spacefish; Jun 7, 2007 at 18:49. Reason: Correction.

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

    This is not a problem with min-width exactly because you would get the same issue if you added a width. The problem is in the way that IE handles content alongside floats.

    When the page compresses and the min-width is reached IE suddenly says "ok I am getting squashed so I will drop under the left float and find some more room".

    Therefore the content drops down below the left float. However because you have a margin-left on the content it can't slide under the float as it usually would and the just stupidly sits half way down the page.

    This is the same effect in ie6 and ie7 when both have widths and is a common problem with float and static content.

    My negative margin layouts avoid this problem to a degree by tricking the browser into not dropping the content.

    Here is your code adjusted.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>IE7 doesn't like this!</title>
    <style type="text/css">
    
    /* mac hide \*/
    html, body {
    height:100&#37;
    }
    /* end hide*/
    
    html  {
        padding: 0px;
        margin: 0px;
    }
    body {
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        padding: 0px;
        margin: 0px;
        background:#ffffd9;
        /*background-image: url(images/navfill.gif);
        background-repeat: repeat-y;*/
    }
            /*    HEADER  */
    #header {
        height: 150px;
        background-color: #72a29f;
        border-top:3.3em solid #72a29f;
        margin: 0;
        width: 100%;
        min-width: 650px;
        overflow: hidden;
    } 
    
            /*    NAVIGATION    */
    
    #navigation {
        float: left;
        width: 180px;
        margin-top: 0;
        background-color: #72a29f;
        padding: 0;
        margin-left:-179px;
        position:relative;
        left:-2px;
        top:-1px;
    }
    
            /*    MAIN CONTENT Area    */
    #wrapper {
        position: relative;
        min-height: 100%;
        margin-top:-3.3em;
    }
    * html #wrapper {
        height: 100%;
    }
    
            /*    FOOTER    */
    #footer {
        clear: both;
        height: 3.2em;
        /*background-color: #72a29f;*/
        position: relative;
        margin: 0 auto;
        border-top: 1px solid #bab9b8;
    }
    
    #content {
        margin-left: 180px;
        margin-top: 0;
        min-width: 650px;
        font-size: 12px;
        background-color: #ffffd9;
        border: 1px solid #000;
    }
    
            /*    WELCOME page    */
            
    #welcomepage {
        width: 95%;
        overflow: hidden;
        margin: 0;
        border: 1px solid #bab9b8;
        margin-bottom: 2.0em;
    }
    .mainheading {
        background: #FFFCC4;
        width: 100%;
        height: 100px;
        margin: 0;
        float: left;
    }
    .welcomekfs  {
        text-align: center;
        width: auto;
    }
    .motto {
        background: #f63f58;
        border: 1px solid #BAB9B8;
        width: 220px;
        height: 100px;
        margin: 100px 80px 20px 20px;
        float: right;
    }
    .pukeko {
        background: #FFFCC4;
        width: 250px;
        height: 264px;
        padding:  0;
        margin: 50px 20px 10px 30px;
        float: left;
        clear: left;
    }
    .mission {
        background: #ee304a;
        width: 100%;
        height: 100px;
        margin: 10px 0px 0 20px;
        float: left;
    }
    .centre {
    text-align: center;
    }
    .inner{width:100%;float:left;overflow:hidden;margin-right:-1px}
    .clearer{
        height:1px;
        clear:both;
        overflow:hidden;
        margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header">Header </div>
        <!-- end header div -->
        <div id="content">
            <div id="navigation">
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
            </div>
            <!-- end navigation div -->
            <div class="inner">
                <div id="welcomepage">
                    <div class="mainheading">
                        <p class="welcomekfs">Here we have a centered image 58px high and 600px wide.</p>
                    </div>
                    <div class="motto">
                        <p class="centre">Motto</p>
                    </div>
                    <div class="pukeko">Here we have an image 250px wide and 264px high.</div>
                    <div class="mission">
                        <p class="centre">Mission Statement</p>
                    </div>
                </div>
            </div>
            <div class="clearer"></div>
        </div>
    </div>
    <!-- end content div -->
    <!-- end wrapper div -->
    <div id="footer">Footer</div>
    </body>
    </html>

    Hope that helps

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul.

    Thanks for that - the content area is now sitting in place but ... I now seem to have some new problems.

    The floated "motto" box (and subsequent "mission") now drops when the page is compressed in IE7 and on FF and Safari on Mac - I haven't tried the other browsers yet. And on the Mac browsers, the navigation area completely disappears - even the background colour.

    BTW, I did try one of your examples for a similar page layout and I had exactly the same problem with the content dropping. This particular layout is absolutely required - after I've finished with this, the site then gets sent to someone else to be filled up with php code and a hefty lashing of javascript as it is also the backend template for a online education and student information management system.

    Everyone else uses tables but I really didn't want to go there.

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

    Your floated boxes were already dropping in firefox before I made the changes because you hadn't allowed enough width.

    The example I gave works in Safari 1.2 (and practically works in ie5mac!!).

    It works fine in IE, Firefox and Safari.

    http://www.pmob.co.uk/temp/spacefish.htm

    BTW, I did try one of your examples for a similar page layout and I had exactly the same problem
    Then you are putting something too big in the inner container or you aren't using the correct method.

    http://www.pmob.co.uk/temp/2col-nofloatdrop2.htm

  7. #7
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - I was just coming back to say I increased the width and it's all working now! I don't know what happened to the nav area initially but I re copy/pasted the code and that showed up afterwards so maybe there were a couple of gremlins copied in first time round.

    Thank you so very much. I really really appreciate your help. Have an awesome weekend!!


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
  •