SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS, IE6, and NS7 are driving me INSANE

    I'm working on a site with three main sections, a header with my logo and space for an ad banner, a vertical navigation bar on the left that fills all vertical space below the header, and a content area that fills the rest of the page. I'm close, but I cannot get it to work as desired in both IE6 and Netscape7. I'm not even worrying about older/other browsers at the moment.

    I have divided up my page as follows:

    <div id="header"></div>
    <div id="ad_banner"></div> //absolute positioning
    <div id="navigation_pane"> //floated left
    <div id="navigation"></div>
    </div>
    <div id="content_pane">
    <div id="category"><?=$cat?></div>
    <div id="content">
    <div id="corner_image"></div> //floated right
    </div>
    </div>

    The navigation pane is set to float: left;
    No div widths or heights are specified except for the absolutely positioned ad banner. With this scenario, I experience 2 problems. The big one is that when the content is long enough, it wraps around my menu to the left border of the window. Additionally, I notice that IE6 adds a margin of about 4 pixels between floated and non-floated divs. NS7 does not. Also I notice that any margins or padding I specify for the content_pane div are added at the left of the browser window, not the left of the content pane where it meets the navigation pane. So, I want to accomplish two things:

    Extend the navigation_pane div to the bottom of the browser window even if it doesn't contain enough content to do so automatically.

    Have a margin between the navigation pane and the content pane in both IE6 and NS7.

    So I found two solutions that don't quite work.

    Solution #1:
    I can specify a large height in pixels for the navigation_pane div. To get my consistant left content margin, I can specify margin-right for the navigation_pane div, and at least that looks the same in IE6 and NS7. But this is not a good solution, because the navigation height is static and unnecessarily large, while the content length is dynamic. So I tried setting the navigation_pane div height to 100%, but this does absolutely nothing! It's no different whatsoever than not specifying a height in both IE and NS. Can somebody explain this? Is there a way to specify 100% of the CONTENT height?

    Solution #2:
    Float the content_pane div to the left as well. Great, this takes care of extending the navigation_pane div to the bottom of the window, but it introduces ALL SORTS of new problems. First of all, the uncontrollable margin between divs in IE is gone, and that's good. It only seems to exist between floated and non-floated divs. However, in NS7, the content pane is only as wide as the actual content. So my right-floated image's position shifts depending on the content width, and my categories div gets chopped off. And if my content is wide enough to wrap to a new line, as with a large block of text, the entire content_pane div is moved BELOW MY NAVIGATION PANE!!!! Only in NS7. IE6 works just like I want it to. What can I do to make NS7 behave?

    In general, when should you specify div demensions? When should you use px vs. %? Do percentage values even work at all? They seem to do nothing when I use them.


    If any of this is uncleer, you can take a look at an older version of my site at http://focifind.audiolizard.com

    Another problem that I'm now seeing is that whenever I float my content_pane div left, my absolutely-positioned ad banner disappears only in IE6! This is truly bizarre to me. Why why why?

    OK, I moved up my ad banner to be the very first div, and now it works! I thought absolutely positioned divs were rendered indpenedently of the normal document flow. Apparently not. Maybe it's bad to have floated divs without another non-floated div as a reference?
    Last edited by audiolizard; Nov 17, 2002 at 17:22.

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't anybody know how float divs correctly?

  3. #3
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I learned everything I know (not all that much) about CSS Positioning from a few articles on select websites:

    http://alistapart.com/stories/practicalcss/

    http://alistapart.com/stories/flexiblelayouts/

    http://www.bluerobot.com/web/layouts/

    And my personal favorite: http://www.brainjar.com/css/positioning/

    HTH.
    $slider = 'n00b';

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm familiar with all of those sites, and I just read the Brainjar article in it's entirety this weekend. I guess I can waste more hours searching for a clue at those sites again.

    In the slim chance that somebody actually wants to address my problem, let me summarize:

    What causes Netscape7 and NOT IE6 to reposition the rightmost of two left-floated divs BELOW the leftmost left-floated div when the content of the rightmost left-floated div wraps within the div?

    I'm going more insane by the minute.

  5. #5
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by audiolizard
    In the slim chance that somebody actually wants to address my problem, let me summarize:
    Any chance of:
    1. Demo page
    2. Some of the css perhaps?

    For starters, there is a problem with your html. Ids are unique, you cannot use an id for more than one element (you have 2 elements with the navigation id applied to them).

    I would guess that it's something to do with the ordering of your block elements. Elememts like <div> are block elements, which means that they wrap at close. Try shuffling the order of your div declarations around.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Demo page was mentioned in my original post.
    http://focifind.audiolizard.com
    Yes, it contains an evil table that will be converted to CSS.

    I've made a lot of local changes since then but that site exhibits the same problem. Try it in IE6 and NS7 and you'll see what I mean.

    Thanks for pointing out my duplicate id, except that I don't see it. I see id="navigation_pane" and id="navigation". Two different ids.

    I realize that divs are block level elements, but what do you mean by "wrap at close"?

    Here is my latest stylesheet, which is somewhat different than the site above but still exhibits the problem:

    /* Style Sheet v.1 */
    /* Last updated 11/19/2002 */

    body {
    background-color: #ffffff;
    font-family: "Microsoft Sans Serif", Arial, sans-serif;
    font-size: 11pt;
    margin: 0px;
    padding: 0px;
    }

    .description {
    font-family: "MS Sans Serif", Arial, Verdana, sans-serif;
    font-size: 67%;
    }

    .dim {
    color: #999999;
    font-family: "Microsoft Sans Serif", Arial, sans-serif;
    font-size: 10pt;
    }

    .important {
    color: #ff0000;
    }

    .new {
    color: #ff0000;
    font-weight: bold;
    font-size: 88%;
    }

    a {
    text-decoration: none;
    }

    a:hover {
    color: #fc0000;
    text-decoration: underline;
    }

    img {
    margin: 0px;
    padding: 0px;
    border-style: none;
    }

    img#corner_image {
    width: 200px;
    height: 100px;
    }

    img.ad_button {
    margin-top: 4px;
    }

    img.ad_banner {
    width: 468px;
    height: 60px;
    }

    div {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    }

    div#ad_banner {
    position: absolute;
    top: 2px;
    left: 250px;
    }

    div#category {
    background-color: #000000;
    color: #fff000;
    padding: 0px 0px 2px 8px;
    margin: 0px 0px 0px 0px;
    }

    div#content_pane {
    float: left;
    }

    div#content {
    font-family: "MS Sans Serif", Arial, Verdana, sans-serif;
    font-size: 10pt;
    line-height: 133%;
    padding: 4px 2px 2px 8px;
    margin: 0px;
    }

    div#corner_image {
    float: right;
    }

    div#header {
    background-color: #000000;
    padding: 2px 0px 2px 0px;
    margin: 0px;
    }

    div#navigation_pane {
    background-color: #FF0000;
    float: left;
    margin-right: 0px;
    padding: 0px;
    height: 100%;
    }

    div#navigation {
    background-color: #fff000;
    font: bold 10pt "MS Sans Serif", Arial, Verdana, sans-serif;
    text-align: center;
    padding: 4px 4px 4px 4px;
    border-top: 0px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    line-height: 80%;
    }

    div#navigation a {
    display: block;
    margin: 0px 0px 1px 0px;
    padding: 1px 0px 1px 0px;
    text-align: center;
    font: 10pt "MS Sans Serif", Arial, Verdana, sans-serif;
    text-decoration: none;
    color: #000000;
    background-color: #fffccc;
    }

    div#navigation a:hover {
    color: #fff00f;
    background-color: #000000;
    }

    p {
    line-height: 150%;
    }
    Last edited by audiolizard; Nov 19, 2002 at 03:59.


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
  •