SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning differ in ie7 and ie6 as compared to standard browsers

    I have following code in stylesheet.

    in IE6 and 7 div with id content start after div#sidebar content finishes but in IE8, FF, Safari, Chrome, Opera div#sidebar and div#content appear side by side. is it some IE bug or am i doing something wrong.

    please help
    Code:
    #wrapper {
    height:inherit;
    position:relative;
    width:100%;
    }
    
    #Sidebar {
    float:left;
    }
    
    
    #Content  {
    margin-left:170px;
    padding:8px 8px 8px 4px;
    position:relative;
    }

    thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,754
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, since you have widthless floats there a number of reasons could pop up. Although all of which would be guesses unless we have your full code to work with .

    Since you have under 5 posts, post your link to your site as such. We will decipher it

    sitehere dot com slash page dot php

    Also note that the value "inherit" isn't supported in IE7 and down except on a few properties.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

    Unfortunately the code you posted produces the same results in Ie6,7 and Firefox so it's hard to guess what the problem may be as there is probably another trigger in code not shown.

    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>Untitled Document</title>
    <style>
    * {
        margin:0;
        padding:0
    }
    #wrapper {
        height:inherit;
        position:relative;
        width:100&#37;;
    }
    #Sidebar {
        float:left;
    }
    #Content {
        margin-left:170px;
        padding:0px 8px 8px 4px;
        position:relative;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="Sidebar">sidebar</div>
        <div id="Content">content</div>
    </div>
    </body>
    </html>
    As Ryan said the widthless Sidebar will not be a lot of use as fluid content will eventually push it to 100% wide.

    IE6 and 7 don't understand "inherit" and indeed you would not want the height inherrited into that element anyway as that would limit the element to a fixed height (should it be able to reconcile it's height from a fixed height parent of course.)

    Have you got a link to the problem so we can debug further?


Tags for this Thread

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
  •