div question IE/Opera vs. FireFox/Safari who's right?

Discussion in 'HTML' started by Damien Cymbal, Mar 17, 2006.

  1. I've stripped this down from a larger page to make it as simple as
    possible. The relevant bits are supposed to represent a sort of context
    menu down the left hand side of the page. When I render this on IE and
    Opera and then shrink the browser window width, the strings in the menu
    display ok. When I render it in Firefox/Safari/Epiphany/Konqueror the
    strings start to overflow/overlap and just become a jumbled mess as I
    squeeze the window. Is there a cross-platform way to achieve the IE
    behavior?

    ------------------------------------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>
    Bad Content Menu
    </title>
    <style type="text/css">
    ..menu-container ul
    {
    padding: 1px 1px 1px 1px;
    margin: 0 0 /*1em*/ 0.5em 0;
    list-style-type: none;
    background-color: #666666;
    color: #FFFFFF;
    font: 12px arial;
    text-align: left;
    }
    ..menu li a
    {
    padding: 0 0 0 0.25em;
    display:block;
    height:1.5em;
    text-decoration: none;
    background-color: #9E9EA2;
    color: #FFFFFF;
    border-top: solid 1px #575757;
    border-left: solid 1em #575757;
    }
    ..menu li a:hover
    {
    background-color: #A5C3DE;
    color: #000000;
    }
    table#layout
    {
    width:100%;
    background-color:White;
    }
    #container-menu-layout
    {
    width:20%;
    border-style: solid;
    border-color: #999999;
    border-width: 1px;
    border-right-style:none;
    padding-top:0.25em;
    padding-left:0.25em;
    padding-right:0.25em;
    vertical-align:top;
    background-color:#BDC0C8;
    }
    #container-layout
    {
    vertical-align:top;
    border-style: solid;
    border-color: #999999;
    border-width: 1px;
    border-left: none;
    }
    </style>
    </head>

    <body>
    <table id="layout" align="center" border="0" cellpadding="0"
    cellspacing="0" width="100%" summary="foo">
    <tr>
    <td id="container-menu-layout">
    <h2>Menu Title</h2>
    <div class="menu-container">
    <ul class="menu">
    <li><a href="#String1">String1</a></li> <li><a
    href="#String2">String2 a bit longer</a></li> <li><a
    href="#String3">String3 which is really really long</a></li>
    </ul>
    </div>
    </td>
    <td id="container-layout">
    <div id="container">
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    Damien Cymbal, Mar 17, 2006
    #1
    1. Advertisements

  2. 1) Your in quirks mode!
    ^^^^^
    2) you set the height for your links and and make them block elements
    so I'd say Firefox and Safari
    <snip code>
     
    Jonathan N. Little, Mar 17, 2006
    #2
    1. Advertisements

  3. Damien Cymbal

    Jim Moe Guest

    Add this to ".menu li a":
    white-space: nowrap;
    overflow:hidden;

    Next time describe what "display ok" means.
     
    Jim Moe, Mar 17, 2006
    #3
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.