[CSS] IE Bug : heigth &margin-right & float incompatible

Discussion in 'HTML' started by OAM, Oct 24, 2006.

  1. OAM

    OAM Guest

    Hello,

    Why does this code work on FF or OPERA and not on IE ?
    The problem is the property margin-right (id: contents2) if I use at the
    same time the property heigth (without height, it's OK).

    Thanks.

    tabs.css
    -------------------------------------------------------------------
    body {
    font-family: verdana,sans-serif;
    font-size: small;
    color: #333;
    }

    #contents {
    margin-right: 26px;
    border: 1px solid #666;
    background: #FFF3B3;
    }

    #contents2 {
    padding: 1.5em;
    background: #FFFDF3;

    /* permet de fixer une hauteur mini sur les navigateurs modernes */
    min-height: 50em; /* Utilité ? */
    /* pour obtenir le meme effet sur IE, sachant que si le contenu depasse, il
    "poussera" la hauteur en ne respectant pas la norme. On se joue de ses
    lacunes */
    height: 50em;

    margin-right: 20px;
    text-align: justify;
    }

    #index {
    position: relative;
    float: right;
    width: 27px;
    }

    #index ul {
    margin: 0;
    padding: 0;
    }

    #index ul li {
    list-style: none;
    }

    #index ul a, #index ul span, #index ul a.current {
    margin: 0px 2px 1px 1px;
    padding: 5px 4px;
    display: block;
    height: 12px;

    text-align: center;
    font-family: tahoma, verdana, sans-serif;
    font-size: 85%;
    text-decoration: none;
    color: #333;

    background: #FFFDF3;
    border: 1px solid #AAA;
    border-left: none;
    }

    #index ul span, #index ul a.current, #index ul a.current:hover {
    padding-left: 5px;
    margin: 0px 0px 1px 0px;
    background: #FFF3B3;
    border: 1px solid #666;
    border-left: none;

    font-weight: bold;
    }

    #index ul a:hover {
    margin: 0px 0px 1px 0px;
    padding-left: 5px;
    background: #FFF3B3;
    border-color: #666;

    font-weight: bold;
    }
    -------------------------------------------------------------------

    -------------------------------------------------------------------
    <!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" xml:lang="en" lang="en">
    <head>
    <title>Example Tabs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css" media="screen">@import "tabs.css";</style>
    </head>

    <body>
    <div id="main">
    <div id="index">
    <ul>
    <li><a href="javascript:void(0);">A</a></li>
    <li><span>B</span></li>
    <li><a href="portfolio.html">C</a></li>
    <li><a href="javascript:void(0);">D</a></li>
    <li><a href="javascript:void(0);">E</a></li>
    <li><a href="javascript:void(0);">F</a></li>
    <li><a href="javascript:void(0);">G</a></li>
    <li><a href="javascript:void(0);">H</a></li>
    <li><a href="javascript:void(0);">I</a></li>
    <li><a href="javascript:void(0);">J</a></li>
    <li><a href="javascript:void(0);">K</a></li>
    <li><a href="javascript:void(0);">L</a></li>
    <li><a href="javascript:void(0);">M</a></li>
    <li><a href="javascript:void(0);">N</a></li>
    <li><a href="javascript:void(0);">O</a></li>
    <li><a href="javascript:void(0);">P</a></li>
    <li><a href="javascript:void(0);">Q</a></li>
    <li><a href="javascript:void(0);">R</a></li>
    <li><a href="javascript:void(0);">S</a></li>
    <li><a href="javascript:void(0);">T</a></li>
    <li><a href="javascript:void(0);">U</a></li>
    <li><a href="javascript:void(0);">W</a></li>
    <li><a href="javascript:void(0);">X</a></li>
    <li><a href="javascript:void(0);">Y</a></li>
    <li><a href="javascript:void(0);">Z</a></li>
    <li><a href="index.html">All</a></li>
    </ul>
    </div>
    <div id="contents">
    <div id="contents2">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
    viverra ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean
    vulputate sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue
    in ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed
    elit.</p>
    <p>Sed purus neque, suscipit vitae, cursus vitae, porttitor non, dui.
    Mauris volutpat dui vitae sapien. Duis laoreet nibh vitae sem. Phasellus
    ornare. Morbi sollicitudin mi ut nibh. Morbi egestas elementum tellus.</p>
    <p>Suspendisse magna dui, porta in, condimentum at, molestie nec, augue.
    Quisque vulputate facilisis ipsum. Aenean sollicitudin quam sed ante. Donec
    at nunc. In hac habitasse platea dictumst. Suspendisse quis lorem sit amet
    eros congue volutpat. Nam laoreet ultricies pede. Nulla vestibulum, pede
    eget varius vestibulum, nisl mi aliquet nisl, eget eleifend quam dui
    faucibus tortor. Maecenas justo. In lacus nisl, tempus at, aliquam nec,
    ornare in, metus. Maecenas hendrerit mauris vitae purus. Cras id sem.</p>
    <p>Curabitur vel urna vitae nunc bibendum porttitor. Nam tortor quam,
    luctus id, convallis sed, rutrum ac, ante. Proin euismod lacus vitae elit.
    Nullam vel diam in metus consectetuer facilisis.</p>
    <p>In mauris enim, suscipit a, consequat quis, porta ut, diam. Vivamus
    tempor. Donec nec enim quis ante ullamcorper mollis. Praesent dictum. Donec
    arcu arcu, tincidunt a, placerat sit amet, porta eget, erat. Aliquam erat
    volutpat. Aenean egestas, dolor ut consectetuer pulvinar, mauris ante
    volutpat leo, non pulvinar erat justo vitae mauris. Donec laoreet dui at
    quam. Pellentesque habitant morbi tristique senectus et netus et malesuada
    fames ac turpis egestas. Mauris id libero. Morbi luctus sapien vitae dolor.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
    cubilia Curae; Nullam pharetra vestibulum leo. Maecenas magna velit, porta
    eu, viverra quis, cursus non, sapien.</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    -------------------------------------------------------------------
     
    OAM, Oct 24, 2006
    #1
    1. Advertising

  2. OAM

    Breklin Guest

    IE 6 doesn't know what min-height is. You can hack it using IE
    "conditional comments" (google it) and creating an style element for
    #content2 called "_height: 50px;"

    Understand that that is a hack is not a valid css markup. It will blow
    up in IE7 so, based on your conditions for the conditional comment tag
    you wrap it in, make sure you are telling IE to only display it for 6 or
    lesser versions.

    OAM wrote:
    > Hello,
    >
    > Why does this code work on FF or OPERA and not on IE ?
    > The problem is the property margin-right (id: contents2) if I use at the
    > same time the property heigth (without height, it's OK).
    >
    > Thanks.
    >
    > tabs.css
    > -------------------------------------------------------------------
    > body {
    > font-family: verdana,sans-serif;
    > font-size: small;
    > color: #333;
    > }
    >
    > #contents {
    > margin-right: 26px;
    > border: 1px solid #666;
    > background: #FFF3B3;
    > }
    >
    > #contents2 {
    > padding: 1.5em;
    > background: #FFFDF3;
    >
    > /* permet de fixer une hauteur mini sur les navigateurs modernes */
    > min-height: 50em; /* Utilité ? */
    > /* pour obtenir le meme effet sur IE, sachant que si le contenu depasse, il
    > "poussera" la hauteur en ne respectant pas la norme. On se joue de ses
    > lacunes */
    > height: 50em;
    >
    > margin-right: 20px;
    > text-align: justify;
    > }
    >
    > #index {
    > position: relative;
    > float: right;
    > width: 27px;
    > }
    >
    > #index ul {
    > margin: 0;
    > padding: 0;
    > }
    >
    > #index ul li {
    > list-style: none;
    > }
    >
    > #index ul a, #index ul span, #index ul a.current {
    > margin: 0px 2px 1px 1px;
    > padding: 5px 4px;
    > display: block;
    > height: 12px;
    >
    > text-align: center;
    > font-family: tahoma, verdana, sans-serif;
    > font-size: 85%;
    > text-decoration: none;
    > color: #333;
    >
    > background: #FFFDF3;
    > border: 1px solid #AAA;
    > border-left: none;
    > }
    >
    > #index ul span, #index ul a.current, #index ul a.current:hover {
    > padding-left: 5px;
    > margin: 0px 0px 1px 0px;
    > background: #FFF3B3;
    > border: 1px solid #666;
    > border-left: none;
    >
    > font-weight: bold;
    > }
    >
    > #index ul a:hover {
    > margin: 0px 0px 1px 0px;
    > padding-left: 5px;
    > background: #FFF3B3;
    > border-color: #666;
    >
    > font-weight: bold;
    > }
    > -------------------------------------------------------------------
    >
    > -------------------------------------------------------------------
    > <!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" xml:lang="en" lang="en">
    > <head>
    > <title>Example Tabs</title>
    > <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    > <style type="text/css" media="screen">@import "tabs.css";</style>
    > </head>
    >
    > <body>
    > <div id="main">
    > <div id="index">
    > <ul>
    > <li><a href="javascript:void(0);">A</a></li>
    > <li><span>B</span></li>
    > <li><a href="portfolio.html">C</a></li>
    > <li><a href="javascript:void(0);">D</a></li>
    > <li><a href="javascript:void(0);">E</a></li>
    > <li><a href="javascript:void(0);">F</a></li>
    > <li><a href="javascript:void(0);">G</a></li>
    > <li><a href="javascript:void(0);">H</a></li>
    > <li><a href="javascript:void(0);">I</a></li>
    > <li><a href="javascript:void(0);">J</a></li>
    > <li><a href="javascript:void(0);">K</a></li>
    > <li><a href="javascript:void(0);">L</a></li>
    > <li><a href="javascript:void(0);">M</a></li>
    > <li><a href="javascript:void(0);">N</a></li>
    > <li><a href="javascript:void(0);">O</a></li>
    > <li><a href="javascript:void(0);">P</a></li>
    > <li><a href="javascript:void(0);">Q</a></li>
    > <li><a href="javascript:void(0);">R</a></li>
    > <li><a href="javascript:void(0);">S</a></li>
    > <li><a href="javascript:void(0);">T</a></li>
    > <li><a href="javascript:void(0);">U</a></li>
    > <li><a href="javascript:void(0);">W</a></li>
    > <li><a href="javascript:void(0);">X</a></li>
    > <li><a href="javascript:void(0);">Y</a></li>
    > <li><a href="javascript:void(0);">Z</a></li>
    > <li><a href="index.html">All</a></li>
    > </ul>
    > </div>
    > <div id="contents">
    > <div id="contents2">
    > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
    > viverra ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean
    > vulputate sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue
    > in ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed
    > elit.</p>
    > <p>Sed purus neque, suscipit vitae, cursus vitae, porttitor non, dui.
    > Mauris volutpat dui vitae sapien. Duis laoreet nibh vitae sem. Phasellus
    > ornare. Morbi sollicitudin mi ut nibh. Morbi egestas elementum tellus.</p>
    > <p>Suspendisse magna dui, porta in, condimentum at, molestie nec, augue.
    > Quisque vulputate facilisis ipsum. Aenean sollicitudin quam sed ante. Donec
    > at nunc. In hac habitasse platea dictumst. Suspendisse quis lorem sit amet
    > eros congue volutpat. Nam laoreet ultricies pede. Nulla vestibulum, pede
    > eget varius vestibulum, nisl mi aliquet nisl, eget eleifend quam dui
    > faucibus tortor. Maecenas justo. In lacus nisl, tempus at, aliquam nec,
    > ornare in, metus. Maecenas hendrerit mauris vitae purus. Cras id sem.</p>
    > <p>Curabitur vel urna vitae nunc bibendum porttitor. Nam tortor quam,
    > luctus id, convallis sed, rutrum ac, ante. Proin euismod lacus vitae elit.
    > Nullam vel diam in metus consectetuer facilisis.</p>
    > <p>In mauris enim, suscipit a, consequat quis, porta ut, diam. Vivamus
    > tempor. Donec nec enim quis ante ullamcorper mollis. Praesent dictum. Donec
    > arcu arcu, tincidunt a, placerat sit amet, porta eget, erat. Aliquam erat
    > volutpat. Aenean egestas, dolor ut consectetuer pulvinar, mauris ante
    > volutpat leo, non pulvinar erat justo vitae mauris. Donec laoreet dui at
    > quam. Pellentesque habitant morbi tristique senectus et netus et malesuada
    > fames ac turpis egestas. Mauris id libero. Morbi luctus sapien vitae dolor.
    > Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
    > cubilia Curae; Nullam pharetra vestibulum leo. Maecenas magna velit, porta
    > eu, viverra quis, cursus non, sapien.</p>
    > </div>
    > </div>
    > </div>
    > </body>
    > </html>
    > -------------------------------------------------------------------
    >
    >
    >
    >
    >
    >
     
    Breklin, Oct 24, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dennis Strickland via .NET 247

    How to autosize the row heigth in a Datagrid

    Dennis Strickland via .NET 247, Jun 14, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    1,403
    Uri Dor
    Jun 15, 2004
  2. bd
    Replies:
    0
    Views:
    671
  3. Carsten Fuchs
    Replies:
    45
    Views:
    1,659
    James Kanze
    Oct 8, 2009
  4. Cal Who
    Replies:
    1
    Views:
    455
    Alexey Smirnov
    May 16, 2010
  5. Cal Who
    Replies:
    4
    Views:
    602
    Cal Who
    May 17, 2010
Loading...

Share This Page